This week, we are going to talk colors, fonts and wires (or design), and creating the outlines of our website.
Did you miss the first one? You can catch up with Building a website A - Z (part 1).
Creating a color palette
Today, I started where I finished off last week: colors! I took the images I collected on the divesitebuddy pinterest board and moved them into Photoshop to extract all the interesting colors. This way, we can create a general mood for the website.
This color palette is compiled of the following images (they are all on the pinterest board).
<<IMAGE REMOVED DUE TO UNINTENTIONAL COPYRIGHT INFRINGEMENT>>
Typography
Next up is deciding which fonts to use. While there are super awesome fonts for sale, for every occasion something different and handcrafted, we really want to harness the power of Open Source. Not only does this save money, it makes it more flexible, but also, very easy to implement in a website.
As the web works very differently from print (browsers render fonts differently), we need a place where we can be sure that the fonts can be used cross-browser and cross-platform. I find myself coming back to Google webfonts. Google webfonts has grown over the years and supports over 600 font families at the time of this post; certainly enough to find something that will suit divesitebuddy. I am in no way a font or typography expert so that is why after a Google search, I found the following article about great Google font combinations. After looking through them, I set my mind on the next 3 fonts. (Google webfonts bookmark link)
After moving fonts around and testing different combinations of heading / introduction text / body text, I decided to go with a combination of Raleway for the heading (bold type) and Merriweather for the body text. If this doesn't work out, I might switch it around or replace the body text for a more default web font (Helvetica / Arial).
Design
With the default colors in place and a selection of fonts that we are going to use (I downloaded the whole set to my computer to use in the mockups), I started working on the default layout for the website. In the previous blogpost, I mentioned that I probably wouldn't do a full design of the whole website, nevertheless I want to visualize what the website should be like. This way ,I am not limited by a default 960 grid. Even though I have a 960px width as my starting point, I want the design to be more flexible.
For now, I have just thrown in some colors and everything is very rough, just placed in the general position of where I want it to be. Cleaning up will have to be done in the next weeks.
This also means that I don't bother with font size, margins and paddings. I think that when I have the general design in place, I will create a few documents with just the elements. This way, I will have a guide during development, and not have to worry about duplicating the design exactly; I will just use a lot of 'base templates'.
For now, this means that I will have to design and create the following elements:
- form elements (text input, submit button, misc buttons, error / warning messages)
- navigational elements
- default headings (h1 - h6)
- other text elements
- blocks
- pager (if that is going to be used)
- icon set
- rating icon set
- comment section
- user pages (settings, login credential pages etc).
I probably am forgetting elements right now so if you think of any, let me know!
The design still looks empty, but that is because I just started. If you have any tips, inspiration or just want to tell me that I'm doing things wrong, please let me know.
To conclude this week's post, there are colors, there is typography and there is the start of a design. We still have a long way to go, but things will keep getting interesting, I promise!