designing web UI

Question

I'm pretty comfortable with the backend side of web development (say, using java spring mvc, or grails), but I really don't know where to start when it comes to client side UI (as in designing pages that look good). OK, I know that there's CSS and I can do just about anything with it, and I know about CSS frameworks like Blueprint.

But how do front end designers actually design pages? Do they use a WYSIWYG editor of some sort? Do they code the whole thing in vim and rely on their magical CSS skills? Do they use something like Photoshop to visualize the page and then translate that to html+css?

I'm hoping for some insight into the way professional developers actually do it, vs. "Go find a site you like, click view source, copy the things you like, repeat"; or "Go to www.freecsstemplates.com and download a template, copy into css directory". Unless that IS the way professional developers design pages, which would be sad.

EDIT:

Hopefully this doesn't get closed. What I'm asking is: Is it normal for people to simply code in notepad or vim or whatever, and just apply css knowledge. Is that the way frontend designers typically work, in industry. Its the way I imagine approaching it. Or do they do something else? I'd like to get better at it but I'd like to know vaguely the right approach.

Answer 1

You raise a good question. There is some mixing of terms (front-end designer, front-end developer, which are very often not the same) which made the answer for me a little less concise that maybe you would prefer (sorry).

Separating the terms out could clarify the answer a bit, as I think of them as quite separate and requiring non-overlapping expertise that are quite often not done by the same person, as both fields require years of experience in order to gain expertise.

For the record, I am a front-end developer and no one in their right mind wants me designing their website. My responsibility is PHP/HTML, CSS and JavaScript. I don't create the Photoshop files; they get handed to me to cut up into HTML/CSS.

Web designers are typically responsible for transforming a client's requirements and branding into a graphical layout (most times, a Photoshop PSD). They're often formally trained in design (line, colour, form). I think understanding principles of design is probably more important that choosing a piece of software in this field and would the first place to start if you haven't already. Since you say, "I really don't know where to start when it comes to client side UI (as in designing pages that look good)," I believe this would be the first logical starting point to gain proficiency in this field.

In terms of workflow/tools, designers typically use software like Balsamiq Mockups or Keynote (http://keynotekungfu.com/) to first generate mockups so clients can approve a UI/layout without getting bogged down in colour choices or textures. These might be very quick sketches meant to inform the design, or they can be very involved wireframes (a separate deliverable in itself), that meticulously map out the page flow, layout and functionality.

Designers also use techniques like mood boards or design tiles to capture the branding and 'look and feel' of a site before committing to a fully-fledged design. Once the client decides on a palette, UI, and layout for the site, the designer then uses Photoshop, or less often, Fireworks or another graphics program, to create a completed design.

In the majority of shops, and in the experience of most professional freelancers I know, the front-end developer (who is usually but not always a different person), then takes the completed PSD and cuts it into working HTML/CSS. What tool in used is a matter of personal preference as well as a subject of animated debate. I like Coda. Others like TextMate or TextWrangler. Not many people in either profession that I'm met use PCs. It is a Mac world. PCs are for the suits, man.

My own workflow as a front-end developer includes:

• Firebug and Chrome's Developer Tools for CSS development.
• Coda for authoring HTML/CSS/JavaScript/PHP. It's a very lightweight IDE that includes a CSS editor, code completion and syntax highlighting for all the above.
• Photoshop for cutting the PSD into HTML.
• The Firefox add-on MeasureIt for taking pixel measurements in the browser.
• The Firefox add-on Pixel Perfect for creating exact pixel matches of the delivered PSD files (designers will be very happy with you for respecting their original designs).
• a Windows VM for testing in IE. I use VMWare Fusion, which is generally good but super processor intensive, but there is also Wine, which is free and other good choices.
• the Firefox add-on Web Developer Toolbar for a variety of tasks (checking how a site looks with JavaScript disabled, theming at the print stylesheet output, checking for accessibility, viewing the semantic structure of a site etc.).
• Firefox add-on ColorZilla for monitoring color, grabbing hex codes from sites (very, very useful)

I've also used Safari's iPad/iPhone view to test the site using a mobile user-agent.

Those are some of the tools I use at least. I'd be interested in other techniques.

Answer 2

No-one has mentioned the most important first step (as far as I'm concerned) - a pencil and paper

Jot down multiple ideas for individual page layouts and overall site structure and it will save you a lot of time once you start in Photoshop or HTML/CSS coding.

Answer 3

I use Photoshop first to visualize. Slice images I can't duplicate with CSS. Fire up any text editor and code away. HTML markup first. CSS second and Javacript (if necessary) last.

Each "big" CSS change I make I'll save and refresh the browser.

Answer 4

Kevin,

Every designer has their own unique skillset and their own preferences - this is why, while there are 'popular' tools like Photoshop, there is no one way to use them and there is no set working method or workflow.

Ultimately, you work with the strengths you might have and do whatever it takes to mitigate the weaknesses.

I personally use Firebug and Chrome developer tools to test and debug, I code CSS on TextMate (but trying out Visualizer) and I recognize a current weakness in graphics design (i.e. creating images of my own). I supplement this by reading internet articles every time I hit a roadblock, and bit by bit you learn the subtleties of CSS - while in theory there shouldn't be all that many, you'll soon discover CSS is laden with quirks, largely due to differences between the browsers (and within them, predominantly IE's many variations).