My Design Process

Since most people not in the industry have so little to do with making websites, and I’ve gotten some good questions about what exactly I do to make ones like in my portfolio, I thought it would be a good thing to make into a blog post!

The steps most web designers I’ve met go through with a client are as follows:

  • Initial meeting: determination of needs and wants from the clients; explanation of capabilities, prices, and estimates from the designer/developer. Transfer of important information – logo/brand guidelines, target audience, color palette requirements, content (or at least what content is needed) etc.
  • Moodboards (somewhat optional): assemble research results into a collage. This can include competitors’ designs, designs targeted at the same target audience, or things that the designer finds visually applicable, like desired style treatment of buttons, colors, photography, or text. Usually it’s a good idea to run this by the client to make sure they’re in agreement about what they had in mind.

    Example moodboard
  • Wireframes: usually developed in parallel with the moodboard, wireframes just show the structure of the page. Although many designers draw them on the computer, they’re really just like sketches on paper to show the boxes of the site: put logo here, nav here, content paragraphs here, picture here. Like a floorplan of a house, they don’t show what the house will look like, just where the rooms are. This then gets reviewed and (hopefully) approved by the client.

    Example wireframe.
  • Comps: once the rest of the work has been done, making a comp should be pretty much like stretching the content of the moodboard over the structure of the wireframe. It generally doesn’t work like that, but Project Managers are famous (at least in some places) for saying “I’ll have the designers just make a screenshot of this page and we’ll have it to you tomorrow.” What clients and PMs sometimes forget is that it’s not a “screenshot” that can be snapped, but rather more like a “painting” of the website that has to be painstakingly drawn and crafted. I would say a design of a page can take a minimum of 4 hours of active work, but usually takes more like 8-16 hours to get all the styles created, and I usually find that sleeping on a design helps me improve its quality. Then it takes more hours to make further designs for the internal pages. Usually we create one page and run it by the client, then take the feedback and apply it to that and to a second page before running it by them again. If they need changes to the design at this point or subsequent revisions, it adds more hours on.
    All the parts that went into this one button via Layer Styles. Sometimes layer styles can be reproduced using CSS code, other times they must be created by images.

    Unused design comp.
  • Development: until this point, the design has been nothing more than static pictures. The developer then takes the Photoshop files and makes them into usable websites with clickable buttons and selectable text, and whatever other nifty things the site needs. This involves HTML and CSS, and slicing the images of buttons and patterns into bite-size graphics that can be repeated and used dynamically. It also includes using real programming/scripting languages like PHP, C#, JavaScript, AJAX, and whatever other acronyms are popular this year. Sometimes it involves Content Management Systems (most sites of any size use these). WordPress (like what this site uses) and DotNetNuke (which runs the sites in my portfolio – Schum Law, Snackstick, IGBA, and Globalinx) are both CMS’s that I use – they allow a developer to set up a site but someone totally unfamiliar with HTML to update the site and add content. It’s sort of like using templates in MS PowerPoint – someone knowledgeable in the technology set up the styles, colors, layout, etc, but any random user can put content in.

    What my end of the WordPress CMS looks like for writing articles.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>