Developer | 9photoshop.com

Posts Tagged ‘developer’

14
Feb
2011

20 Useful Free iPhone and iPad Apps for Designers and Developers

Big shocking news of the day: iPhones and iPads are increasingly popular and widespread and are being used by more and more people. But what’s interesting is this also includes web developers ie. you. And the following list will feature 20 free iPhone and iPad apps for web developers.

While iPhones and iPads appear to be more consumer-driven devices, there are apps on there that can assist in your web development and make your development and design life much easier. Think of it as having sketchbooks, notepads, calculators, communications devices, and more – all in one device. Of course, there are paid apps that provide much more robust development tools, but these free apps will be more than enough to get you started using your iPhone and/or iPad as a web development aid.

Without further ado, here are 20 free iPhone and iPad apps for web developers:

File Accessing, Managing, and Syncing

Dropbox

DropBox lets you sync and share files across computers and your iPhone and iPad.

SugarSync

SugarSync is in case you want an alternative to Dropbox. Sync and access files from your other devices and computers.

2X Client

2X Client lets you remotely connect to and work on your Windows computer.

LiveView

LiveView is a remote screen viewing app that can help you design quick simulations and demos and try out prototypes of your designs. Also useful for designing for mobile apps or web apps for use on mobile devices.

Design Sketching

Adobe Ideas

Adobe Ideas is a digital vector-based sketchbook for drawing and capturing design ideas – which you can then send for further working on to Photoshop and Illustrator.

Doodle Buddy

Doodle Buddy is a doodling app which can let you quickly sketch out design ideas and anything else with your fingers. Colors included.

Note-taking and Task Lists

Evernote

Evernote lets you capture and store design and development notes, ideas, snapshots, recordings, and anything else for easy finding later on. Paid in-app upgrades if you need more features.

Note Hub

Note Hub is a note-taking app that lets you create projects and add notes, to do lists, drawings, and whatever else.

TaskPad HD

TaskPad HD is a task manager that lets you sync tasks across all of your devices as well as manage your tasks via a web browser.

Communicating With Clients and Collaborators

Twitter

The official Twitter app for when you need to talk to clients and collaborators via Twitter.

Twitterrific

Twitterrific is for those who prefer a different interface for using Twitter to stay connected with clients and collaborators – choice is good.

Skype

Skype on your iPhone or iPad – need more be said? Really useful for talking to clients and collaborators, especially when they’re in different parts of the world. It’s free to call if you’re both using Skype, otherwise affordable rates let you call landlines and cell phones.

Fring

Fringe is an alternative to Skype. Text chat with people via Skype and other instant messenger accounts and get free calls if you’re both using Fring.

Creating and Managing Web Content

WordPress

WordPress has an iPhone and iPad app that lets you create and edit posts and pages, moderate comments, and other tasks for your WordPress.com blog or WordPress-powered website.

Adobe Photoshop Express

Adobe Photoshop Express is a super-slimmed down version of Photoshop for when you need to quickly edit and upload photos and images on your iPhone or iPad.

Working on and Testing Projects

PCalc Lite Calculator

PCalc Lite Calculator is a scientific calculator for when you need exact measurements and calculations for your web development projects and designs. This is the free fully-functional lite version of the paid full calculator app.

MedCommons Prototyper

MedCommons Prototyper helps build SplitView layouts for easy presenting of web content on an iPad by letting you test your HTML5 and Ajax designs for things like rotation and resizing.

Finding Work and Useful People

Craigsphone

Craigsphone is Craigslist for iPad – ’nuff said. For when you need to find clients or work, people to outsource to, and anything else related to your web development and design work.

Design Inspiration and Ideas

FontShuffle

FontShuffle is useful for finding the right font for your project or just browsing for typography inspiration – hundreds of font families are sorted by similarity.

SkyGrid

SkyGrid is a better RSS feed reader – an easy way to browse relevant design and development information and articles.

What Are Your Most Useful Free iPhone and iPad Apps?

Over to you: what are your favorite free iPhone and iPad apps for web developers? What other apps should be on this list? Feel free to share your useful additions in the comments section below.

You might also like…

30 Brilliant iOS Applications for Freelance Designers and Developers →
Showcase of Beautiful and Unique iPhone Apps →
iPhone and iPad Development GUI Kits, Stencils and Icons →
15 Useful Free Android Apps for Web Developers →
Android App Developers GUI Kits, Icons, Fonts and Tools →
45+ Cool Google Android Apps – The Perfect iPhone Replacement →
Mobile Web and App Development Testing and Emulation Tools →
14 Free Mobile Application Development Icon Sets →

Tags: adobe, Ajax, android, app, Application, Apps, art, blog, book, color, designer, dev, developer, Development, Drawing, emulation, font, form, free, freelance, grid, gui, html, html5, icon, icons, illustrator, ipad, iphone, iPhone & iPad Dev, kits, layout, Mobile, phone, photo, prototype, showcase, stencils, testing, text, Tools, twitter, typography, ui, vector, web app, web browser, Web Development, Windows, Wordpress
Posted in Design, Inspiration, Photoshop

10
Feb
2011

20 New Free Icon Sets for Web Designers and Developers

No Comments

Once or twice a year we like to take a look at what new icon sets are freely available for designers and developers. We have found a nice selection for you covering most aspects of web, mobile and app devlopment. You will love them!

Stock Icon Set

Number of Icons: 154
Format(s): .ico
Size(s): 16px 32px, 64px & 128px
Stock Icon Set →

iconSweets 2

Number of Icons: 400+
Format(s): .psd
Size(s): 16px, 32px & 64px
iconSweets 2 →

Retina Display Icon Set

Number of Icons: 400+
Format(s): .png
Size(s): 24px, 48px & 64px
Retina Display Icon Set →Full Preview →

Android Icons – Shape Package

Number of Icons: 40+
Format(s): .png, .psh
Android Icons – Shape Package →

Simple Icon Set

Number of Icons: 16
Format(s): .psd & .png
Simple Icon Set →

NounProject

Number of Icons: 500+
Format(s): .svg
NounProject →

Open Source Multitouch Gesture Library

Number of Icons:
Format(s): .png & .eps
License: Released under a FreeBSD license
Open Source Multitouch Gesture Library →

Agile Toolkit Icon Set

Number of Icons: 128
Format(s): .png
Size(s): 16px
Agile Toolkit Icon Set →

Micro Icons

Number of Icons: 32
Format(s): .ico
Size(s): 16px
Micro Icons →

Strabo Icon Set

Number of Icons: 16
Format(s): .png
Size(s): 24px
Strabo Icon Set →

Pixim Icon Set

Number of Icons: 54
Format(s): .gif
Size(s): 12px
Pixim Icon Set →

Pixel Perfect Collection

Number of Icons: 33
Format(s): .png, .ico & .icns
Size(s): 48px
Pixel Perfect Collection →

Basic Rounded

Number of Icons: 27
Format(s): .psd
Basic Rounded →

LinkDeck Social Bookmark Icon Pack

Number of Icons: 45
Format(s): .psd
Size(s): 16px, 32px, 64px, 128px & 256px
LinkDeck Social Bookmark Icon Pack →

Buddycon – Vector-Based Social Media Icons

Number of Icons: 126
Format(s): .ai & .png
Size(s): 32px
Buddycon →

WPZOOM Developer Icon Set

Number of Icons: 154
Format(s): .png, .ai & .psd
Size(s): 48px
WPZOOM Developer Icon Set →

E-Commerce Icons

Number of Icons:
Format(s): .psd
Size(s): 48px, 64px & 128px
E-Commerce Icons →

Kaching eCommerce Icons

Number of Icons: 24
Format(s): .png, .ai & .psd
Size(s): 48px & 400px
Kaching eCommerce Icons →

Credit Card, Debit Card and Payment Icons Set

Number of Icons: 18
Format(s): .png
Size(s): 32px, 64px & 128px
Credit Card, Debit Card and Payment Icons Set →

Credit Card Icon Pack

Number of Icons: 35
Format(s): .png
Size(s): 32px
Credit Card Icon Pack →

…and finally … HTML5 Icons

Number of Icons: 10
Format(s): .png & .ai
Size(s): 512px
HTML5 Icons →

Original W3C HTML5 Icons

Format(s): .png & .svg
Size(s): 32px, 64px, 128px, 256px & 512px
Original W3C HTML5 Icons →

You might also like…

The Top 50 Web Development Icon Sets from 2009 →
Top 50 Web Development, Design and Application Icon Sets from 2010 →
50 of the Best Ever Web Development, Design and Application Icon Sets →
50 Social Service and Bookmarking Icon Sets for Bloggers Part 1 → & Part 2 →
30 of the Best Web Development and Design MINI Icon Sets →
15 Uniform Payment Options Icon Sets for Ecommerce Design →
14 Free Mobile Application Development Icon Sets →
8 Free Pictogram Icon Libraries and Collections →
40 Fresh and Free Icon Sets for Web Designers and Bloggers →

Tags: 2009, 2010, android, app, Application, art, best, blog, bloggers, book, collection, designer, dev, developer, Development, ecommerce, form, free, free icon, Free Icons, gui, html, html5, icon, icons, libraries, Mobile, payment, pictogram, psd, Social Bookmark, Social Media, toolkit, vector, web design, web designer, Web Development, wp
Posted in Design, Photoshop

21
Jan
2011

20 Essential Tools and Tips to an Accessible Website

No Comments

Accessibility is extremely important to your website. Simply put, what good does your website’s content do if certain people can’t see it? Sure, your fancy new design with the tiny fonts and low-contrast colors might look slick to you and your friends, but those with poorer eyesight, color blindness, and any other visual hindrance won’t be able to navigate, much less read, your website. You want to—nay, must—make your website accessible if you want the maximum amount of visitors.

But how do you go about making sure your website is accessible? Well, today is your lucky day, because your life is about to get a whole lot easier. Here are 20 tools to an accessible website:

20 Tools and Tips to an Accessible Website

WAVE – Web Accessibility Evaluation Tool

WAVE is a free tool that helps you in the web accessibility evaluation process. Rather than giving you a complex technical report, WAVE displays your original web page with embedded icons and indicators, showing the accessibility of your page.

IDI Web Accessibility Checker

IDI Web Accessibility Checker checks your web pages for conformance with accessibility standards to make sure your content can be accessed by everyone.

Vischeck

Vischeck shows you what your web pages look like to someone who is color blind. You can use Vischeck online with either an image file or running it through your web page, or you can download and use it on your computer.

Colour Contrast Check

Colour Contrast Check lets you pick a foreground and a background color and see if they provide enough of a contrast when someone who has color deficits views it, or when it’s viewed on a black and white screen.

mobiReady – dotMobi Compliance and mobileOK Checker

mobiReady is a testing tool that evaluates your website’s mobile-readiness using industry practices and standards. It gives you a free report that provides both a score (from 1 to 5) and in-depth analysis of your web pages to determine how well your site performs on a mobile device.

Stanford Web Accessibility Checker

Stanford Web Accessibility Checker is a programmatic tool that can analyze your web pages and test for possible access barriers. It can check live code via URL, or you may supply a working file for evaluation. It then produces a report of all accessibility problems for your selected guidelines.

Check My Colours

Check My Colours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide enough of a contrast when viewed by someone with color deficits.

Lynx Viewer

Lynx Viewer lets you see what your web pages will look like when viewed with Lynx, a text-mode web browser. It is also shows how search engines would see your site. In addition to that, it can help determine if your web pages are accessible to people with impaired vision.

Quick Page Accessibility Tester

Quick Page Accessibility Tester is a bookmarklet that you can click on at any time to get a quick analysis of any of your web pages. It highlights definite issues with your page, warns about possible issues and also highlights areas on the page that could benefit from some ARIA enhancements.

GrayBit – Grayscale Conversion Contrast Accessibility Tool

GrayBit – Grayscale Conversion Contrast Accessibility Tool is an online accessibility testing tool that visually converts your full-color web pages into grayscale renditions for the purpose of visually testing the page’s perceived contrast.

Accessibility Color Wheel

Accessibility Color Wheel lets you see if a color pair is good for accessibility. Choose a foreground and background color by pointing the mouse over the wheel or the grey bar and click. If you see an ‘OK’ message then the color pair is good for accessibility. Otherwise, change one or both colors until you get an ‘OK’.

HERA – Accessibility Tester

HERA is a tool for checking the accessibility of your web pages according to the specification of the Web Content Accessibility Guidelines. HERA does a set of tests on your web pages, identifies any automatically detectable errors or checkpoints that are met, and shows which checkpoints need manual verification.

Accessibility Valet

Accessibility Valet displays the markup of your web pages in a normalized form. It highlights valid, deprecated and bogus markup, as well as misplaced elements. Any accessibility warnings are shown in a generated report.

Cynthia Says

Cynthia Says is a web content accessibility validation tool that identifies errors in your design that are related to Section 508 standards and the WCAG guidelines.

TAW

TAW is a tool for the analysis of your web pages, based on the W3C Web Content Accessibility Guidelines 1.0. In addition to the web-based tool, there’s a standalone download option as well.

WebAnywhere

WebAnywhere is a non-visual interface that lets you interact with your web pages in a similar way to screen readers like JAWS or Window-Eyes.

Colour Contrast Analyser

Colour Contrast Analyser is a Firefox extension that lists color combinations used in your web pages. It lays out the colors in a table that summarises the foreground color, background color, luminosity contrast ratio, and the color and brightness difference.

WAT – Web Accessibility Toolbar

WAT is a Internet Explorer toolbar that helps you manually examine your web pages for a variety of accessibility aspects.

Firefox Accessibility Extension

Firefox Accessibility Extension is just what the name says: a Firefox extension that you can use to check your use of structural and styling markup in your web pages that support functional web accessibility. That will make it easier for people with disabilities to view and navigate your web pages.

Accessibility Favelets

Accessibility Favelets is a collection of bookmarklets that help with accessibility when working on your web pages. These are basically little scripts that you save (ie. bookmark in your web browser) and then use to test for accessibility when on one of your web pages.

What Are Your Most Useful Tools?

Over to you: what accessibility tools do you deem essential? Do you have any useful tips for accessibility? What glaring omissions do you know that should be on this list? Feel free to share your useful additions in the comments section below.

You might also like…

50 Free Tools and Apps for Web Designers and Developers →
CSS3 Compatibility Tools, Resources and References for Internet Explorer →
25 Free Color Tools, Apps and Palette Generators →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
Mobile Web and App Development Testing and Emulation Tools →
Useful Web Design Proposal Resources, Tools and Apps →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →

Tags: app, Apps, background, black, book, Bookmarklets, collection, color, CSS, css3, designer, dev, developer, Development, download, elastic, emulation, Firefox, fluid, font, form, forms, framework, free, gui, icon, icons, layout, liquid, Mobile, nav, proposal, reference, resource, Resources, template, templates, testing, text, Tools, ui, validation, web browser, web design, web designer, Web Tools
Posted in Design, Photoshop

19
Jan
2011

50 Free Tools and Apps for Web Designers and Developers

No Comments

Over the past year or so I have bookmarked hundreds of various tools and resources covering all aspects of web & mobile development – There are tools that will improve your work-flow, resources that will clean and validate code, apps that will allow you to collaborate with any number of colleagues, bookmarklets that let you create mockups within your browser, productivity checklists, sites that will track and keep a watchful eye on your sites… and on … and on.

So, having all of these amazing bookmarks, I thought I would share my 50 favorites with you.

I have split the article into the following sub-categories for easier browsing: General Web Development Tools, Web Typography Apps, Browser Tools, Web Site Analysis Apps and, finally, Productivity Apps & Tools.
The apps also don’t include frameworks, Javascript plugins nor template tools, they are all strictly small tools that can help with your development productivity.

Compiling an article about my favorite free web development apps from the past year or so, as you can imagine, was not an easy task, and the chances are that I may have missed a few, so why don’t you tell us about your favorite free development apps within the comment section below. You never know we might collate enough for a part 2 of this post!

Web Development Tools

ProCSSor – Advanced CSS Prettifier

ProCSSor is a useful tool that will 'prettify' and format CSS files on the fly.
ProCSSor – Advanced CSS Prettifier →

ScriptSrc.net

Tired of hunting down the script tag for the latest version of your Javascript Library of choice? ScriptSrc allows you to copy the latest library (jQuery, MooTools, YUI…) script tags.
ScriptSrc.net →

HTMLform.com

With HTMLform.com all you have to do is design your HTML form and you will get a Zip file that can be very easy installed in your website, with everything needed to make it work: a form that can be embedded in any webpage, a small but very potent database to suit your needs, a tool for checking data online and a button for exporting to CSV and Excel formats.
HTMLform.com →

Spritebox

Spritebox is a WYSIWYG tool to quickly and easily create CSS classes and IDs from a single sprite image.
Spritebox →

HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP. It will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant.
HTML Purifier →

Tiny Fluid Grid

Tiny Fluid Grid is a super-simple CSS grid framework generator, inspired by the 1kb Grid, that ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny Fluid Grid →

TABLEIZER!

TABLEIZER! is a quick tool for creating HTML tables from spreadsheet data.
TABLEIZER! →

Try Ruby! (in your browser)

If you haven't as yet tried Ruby, with Try Ruby! you can take the quick and painless Ruby tutorial and then test your knowledge directly in your browser.
Try Ruby! (in your browser) →

Plupload

Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and batch uploads.
Plupload →

Favigen: Favicon Generator

Favigen: Favicon Generator →

Super Conversion Button

A call-to-action is one of the most important parts of any web page, displaying the primary action you want people to take. With this simple tool you can create a beautiful, effective call-to-action button in seconds
Super Conversion Button →

Subfolio

Subfolio is made for creative types to share their work online with speed and elegance – publicly or privately. It’s good for freelancers, studios, agencies, enterprise or even the classroom.
Subfolio →

jsFiddle

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
jsFiddle →

A/B Split Testing Calculator

A/B Split Testing Calculator →

Frame Box – Lightweight online tool for creating mockups

Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly
Frame Box – Lightweight online tool for creating mockups →

App Inventor for Android

To use the Android App Inventor, you do not need to be a professional developer, instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior.
App Inventor for Android →

HTML-Ipsum

HTML Ipsum is a great tool that gives you lorem ipsum snippets with HTML markup to help test your CSS.
HTML-Ipsum →

CSS3 Button Maker

CSS3 Button Maker →

CSS3 Click Chart by Impressive Webs

Each examples on the CSS3 Click Chart visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Click Chart by Impressive Webs →

CSS3 Generator

CSS3 Generator is a useful tool that generates the CSS3 properties for the likes of @fontface, border-radius, multi-column…
CSS3 Generator →

CSS3 Menu

You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The drop-down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3 Menu →

0to255

0to255 is a simple tool that helps web designers find lighter and darker colors based on any color.
0to255 →

Web Typography Tools & Apps

Wordmark

Wordmark is a tool that allows you to preview any word with the fonts already installed on your computer.
Wordmark →

Awesome Fontstacks

With Awesome Fontstacks you can create bundles of matching, free web fonts, with fail-safe font stacks to back them up.
Awesome Fontstacks →

Google Font Directory

With the Google Font Directory you can browse all available fonts, learn about the font designers who created them, and then copy the code required to use them directly on your web page.
Google Font Directory →

Fillerati – Faux Latin is a Dead Language

If you are tired of using Lorem Ipsum, then Fillerati is for you. You can choose text from the authors Jules Verne, H.G. Wells, Lewis Carroll, L. Frank Baum, Edgar Rice Burroughs or Lewis Carroll.
Fillerati – Faux Latin is a Dead Language →

Browser Tools & Apps

Wirify: The Web as Wireframes

Wirify is a simple bookmarklet that will turn any web page into a wireframe mockup with only one click.
Wirify: The Web as Wireframes →

maki

Just drag the maki bookmarklet to your toolbar, go to a page where you're working on the HTML/CSS, and click the bookmark. You'll then be directed to a version of your site where you can upload the mock-up image, adjust the transparency of the overlay, and reload your changes seamlessly.
maki →

Browize – Online Browser Resizer

Browize – Online Browser Resizer →

The HTML5 Test

The HTML5 test – how well does your browser support HTML5? This tool will let you know.
The HTML5 Test →

Support Details

Support Details →

resizeMyBrowser

resizeMyBrowser →

iPad Peek

iPad Peek is a handy app that allows you to view how any website will be rendered on the iPad.
iPad Peek →

Web Site Analysis

Moniitor BETA

Moniitor is a FREE website stat monitoring tool, it will allow you to monitor multiple sites and check for stats such as Pagerank, Alexa Rank, Feedburner Subscribers, Twitter mentions and more…
Moniitor BETA →

Uptime Robot

Uptime Robot monitors your websites by pinging your site every 5 minutes and alerts you if your sites are down.
Uptime Robot →

WooRank

WooRank →

Clue

Clue is a tiny app, from ZURB, that allows you to test your web pages so that you can find out exactly what parts are memorable and will potentially stick in the minds of your users.
Clue →

Productivity Apps & Tools

Wridea.com

Wridea is a free tool that stores your ideas, allows you to manage and organize them, collaborate with your friends and colleagues over your ideas, etc. It provides you with all necessary tools and services for organizing your ideas.
Wridea.com →

Domainr

When you want a short URL or something big, Domainr will find it, fast and helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us.
Domainr →

Thoughtboxes

Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen.
Thoughtboxes →

Create Free Privacy Policy

With GeneratePrivacyPolicy.com you can create professional privacy policies agreements tailored specifically to your website or your business.
Create Free Privacy Policy →

Recurse

Recurse is a simple solution to show clients your spiffy new design. By emulating a website with multiple flat images clients will have a better idea of what the composition will look like ‘in the wild’.
Recurse →

Launchlist

Launchlist is cool tool to help and encourage web designers and developers to check their work before exposing it to the world at large by going through an essential list of web development requirements. When you click 'Submit Report' you will be either given a 'Go For Launch' or, if issues found, 'Not Advisable'.
Launchlist →

TitanPad

TitanPad is the simplest of tools that allows you to collaborate on a document simultaneously. You can either create a 'public' pad or you can create a 'private' pad for your team with a custom URL.
TitanPad →

CeeVee

Not only specific for developers, CeeVee allows you to create a themed professional resume, giving you the option to make it either public or private.
CeeVee →

Billable

If you don't likes the tedious task of invoicing, then you will love Billable. It really doesn't get any simpler than this.
Billable →

Bounce

Bounce is a tiny app that allows anyone to give feedback on the design of any given webpage.
Bounce →

TinEye Reverse Image Search

TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.
TinEye Reverse Image Search →

…and finally…

CopyPasteCharacter.com

CopyPasteCharacter is a very useful tool for copying & pasting those impossible to remember HTML entities.
CopyPasteCharacter.com →

NounProject

The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language. The symbols can be downloaded completely free.
NounProject →

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →

Tags: 2010, android, app, Apps, art, blog, book, Bookmarklets, button, chart, chrome, clean, color, CSS, css3, designer, dev, developer, Development, download, editor, effect, emulation, filter, Firefox, flash, fluid, font, form, forms, framework, free, freelance, Graphic Design, grid, gui, html, html5, icon, ipad, Javascript, jquery, menu, minimal, Mobile, mockup, mootools, nav, navigation, plugin, plugins, proposal, prototype, resource, Resources, resume, seamless, tables, template, testing, text, theme, Tools, tut, tutorial, twitter, typography, ui, Web Apps, web design, web designer, Web Development, Web Tools, wild, wireframe
Posted in Design, Photoshop

17
Jan
2011

Tips for Compromising between Designers and Developers

No Comments

In the real world designers and developers are constantly battling it out over projects. Between two lighthearted developers are the crew who simply make website work while designers add flair and vibrant edges. The two perform very specific yet important jobs which harmoniously combine to create amazing web pages.

Often times, however, bickering can ensue leading to arguing and lost time. All client work from small-scale operations to large design firms is very important and must be treated as such. Below we’ll go over a few tips to help designers and developers reach a middle-ground.

Portrayal of Ideas

One of the biggest problems arises between a misunderstanding of goals and ideas. While designers are interested in sketching and displaying their interests visually, developers are often not so lucky.

It takes time to knock out bits of code and creating a program isn’t an easy task. Communication between the two teams will likely clear up many of these issues. Before even starting on a mockup comp have everybody sit down and go over their objectives for the project. In this way everything is put on the table so everybody is moving forward at the same pace.

Developers may also consider practicing some type of visual communication for programs. Flow charts and graphical diagrams are often the best way to represent what’s going on. It may be worthwhile to practice building programs out of conversation, too.

This isn’t exactly common practice but it does help to strengthen your knowledge as a programmer. Begin by talking out all of the steps needed to build the website you’re looking at, piece by piece. Even write these things down in a list if it helps. These individual pieces will come together in the end to create 1 final web application which can then be passed off to launch.

Carefully Plan Deadlines

Nobody enjoys deadlines but they are a must in business. Especially when working with high-class firms and clientele from all around the world design work must be placed on a schedule.

This is unfortunate for designers since rushed work is almost never good. Time management is a crucial skill to have mastered and apply into every day life. Once you know how much time is available it’s much easier to start right away and plan an easygoing work routine.

The alternative is crunching numbers and pushing your limits the last few nights of a project. This technique can work with developers, although not encouraged, because writing code is mostly logical and doesn’t require high reigns of creativity. Design work can only go for so long before quality begins to seriously degrade.

Group Morale!

Provide enthusiasm and cheer to all of your co-workers. Even though designers and developers may not see eye-to-eye all the time we can all come together and acknowledge the work we do is important.

If everybody is working together to keep others motivated there is no falling behind in the group. All tasks can be finished on time and well before due-date. In this way there’s extra room in the schedule for possible changes, updates, revisions, or anything else.

If it’s possible try building a work plan with your fellow group. Everybody is in on the work together so why not grind out the process together, too? Generally the designer(s) will create a mockup and pass this onto the developers.

From here the coding process begins and each web page is carefully crafted. If there’s any backend work or CMS implementation this would also be addressed post-template design. After the initial layout the designers’ work load shifts to smaller details. These can include page icons or banner graphics.

Ask Questions

Confusion is common amongst a large group, so there’s bound to be questions from some people. Don’t hold back anything you’re unsure of as it’ll ultimately slow down the process.

It’s important to feel comfortable in the working environment and speak openly when you feel the need. Clarifying a small detail up front will get you a direct answer and keep the project train moving. This is much more the case between developers who are working on similar features (frontend/backend Ajax effects).

Not only should fellow team mates be asking questions, but project leaders are imposed to run questions by the clients. If the team is indecisive about certain aspects to the project it would be simpler to contact the consumers directly to figure out what they want. If there is ever a lack of information don’t hold anything back – ask questions when necessary and keep your head moving forward!

Be Respectful of Workspace Time

This is often a no-brainer but doesn’t hurt to be repeated. Each designer and web developer is important to a project and needs to be given time to work. If everybody is hounding on each other and driving the team mad then nobody is productive.

Respect is the name of the game and will get design firms much further in business. Even on a small scale level it’s enormously important to have respect for your partners. Designers and developers each perform a completely separate yet key role in website development.

Make sure all teammates are communicating their ideas openly and honestly. At all times a project work floor should feel fast-paced but relaxed and open. All digital creators can get stressed at times, it’s important to recognize this and release it. Whether a designer or developer just stick to your path and remember everybody is working as a team to reach the same end goal.

You might also like…

Tags: 2010, Ajax, app, Application, art, best, chart, charts, cms, color, Darn Good Read, designer, dev, developer, Development, effect, Effects, form, Graphic Design, gui, icon, icons, layout, minimal, mockup, technique, template, ui, web app, web design, web designer
Posted in Design, Photoshop

Posts Tagged ‘developer’

File Accessing, Managing, and Syncing

Dropbox

SugarSync

2X Client

LiveView

Design Sketching

Adobe Ideas

Doodle Buddy

Note-taking and Task Lists

Evernote

Note Hub

TaskPad HD

Communicating With Clients and Collaborators

Twitter

Twitterrific

Skype

Fring

Creating and Managing Web Content

WordPress

Adobe Photoshop Express

Working on and Testing Projects

PCalc Lite Calculator

MedCommons Prototyper

Finding Work and Useful People

Craigsphone

Design Inspiration and Ideas

FontShuffle

SkyGrid

What Are Your Most Useful Free iPhone and iPad Apps?

You might also like…

You might also like…

20 Tools and Tips to an Accessible Website

What Are Your Most Useful Tools?

You might also like…

Web Development Tools

Web Typography Tools & Apps

Browser Tools & Apps

Web Site Analysis

Productivity Apps & Tools

…and finally…

You might also like…

Portrayal of Ideas

Carefully Plan Deadlines

Group Morale!

Ask Questions

Be Respectful of Workspace Time

You might also like…

related websites

Categories

Archives

Blogroll

Tags