About a year and a half ago, I posted on my design process. Not a lot has changed since then, but I’ve been asked to help facilitate a class session on HTML, CSS and Design. As always, it’s helpful for me to write about it first, and I figured I might as well put my observations here as well. Most of this will be a direct translation of the slide show I plan to give. It’s supposed to be a super fast overview to generate questions.
One of the biggest changes in the way I work over the last year and a half is I’ve pushed design farther and farther back in the process; after I build the site, usually. This really lets me focus on content and how it will be presented before getting into the often messy design details.
Determine Content
If you are working on your own project, content is easy. If you are designing for someone else, you need to get them to give you the content, or at least tell you about it. Either way, you need to get a firm grip on not only what the content is, but how you will organise it.
Collect and Create Design Ideas
- Pore over project materials
- Browse other websites
- Research other photos, artwork, etc
- Find color palettes
- Collect fonts
- Create sketches – of layouts, colors, design elements, anything.
- Save everything
- Create collages (optional). These can help guide the design process later, and serve as something to talk about with the group in the meantime.
Pick a place to build site
- Can start on your computer
- Use virtual box (google “set up a web server with virtualbox”)
- Or use MAMP or WAMP
- Or skip straight to:
- Get web host + domain name
- Popular options: namecheap, bluehost, dreamhost
Start to Build Site
- Plain HTML or
- PHP or
- XML/XSLT/Cocoon or
- CMS (WordPress, Drupal) or
- One of hundreds of other possibilities or a PHP/Ruby/other language framework
- Dependent on where you will be hosting
- Google for books/tutorials on chosen technologies
Work on Architecture
- Use flowcharts to determine content flow
- Draw up wireframes (on paper or computer)
- Determine navigation, including wording. Avoid jargon.
- Think about both casual and specialist audiences
- Aim for clarity
Design
- Read a lot about design, if it interests you, take a design or art history class or two.
- Find some designs you like (perhaps open source) and figure out why you like them.
- When in doubt, keep it simple.
- When possible, start with bare bones version of site, and build up from there.
Basic Design Principles: Simplicity
- In the beginning, may be best to use KISS design principles.
- Try an image search for “minimalist web design.”
- Simpler is often better than cluttered, let your content shine.
- Start with inside pages, then move to “splash page” if there is time.
With content as complex as this, who needs a cluttered design?
A splash page does not have to be complicated to be beautiful.
Basic Principles: Alignment
- Line things up. This is pretty easy vertically when designing webpages.
- Pay attention to margins, padding, and borders.
- Read about how the CSS box model works to help with alignment.
- Look into grid based CSS frameworks (Like the 960 framework or twitter bootstrap) and try them out. Even if you don’t use them it is a good foundation.
The header is center aligned, while in the body boxes and text are aligned to the same margin.
Basic Principles: Color & Contrast
- Find inspiration in project materials if possible, and look at other sources.
- Look at color websites and save palettes that make you think of your project.
- Pay attention to context – colors will look different depending on where they are.
- Keep in mind colorblindness and contrast sensitivities.
- When in doubt, it’s hard to go wrong with black text and a white background and a splash of one or two other colors.
It can be fun to create palettes from images you are inspired by.
The same gray looks different on a red or blue background.
Red/Green colorblind users won’t be able to distinguish between the two colors on the left.
Basic Principles: Typography
- Choose 2-3 fonts, and use decorative fonts sparingly.
- Use open source fonts that are free to embed. (check out Google Web Fonts and Font Squirrel)
- Choose body fonts for readability, test them at varying sizes and on different computers.
- Check to make sure the fonts support the character sets you need them to – ligatures, foreign languages, etc.
- Don’t put text in images.
Questions?
I might update this post later if I get questions I forgot to address. If you have any questions, feel free to leave a comment.