Copyright information and other useful info
Introduction
What this site is about
This one page article will take you through every stage from the thought process around creating a website, to sketching, wire framing, colour theory, fine details/effects and then in the end evolve into what you see at the start of this page. Every stage have the facts and show studies or work examples related to the topic that is talked about. Almost every stage in the process adds design elements as we slowly progress towards the finish design.
The reader of this page is someone who already have some knowledge about what (X)HTML, CSS and JavaScript is. No coding experience is however needed to learn the content on this site since the article focus on design.
You can read about Cultural differences, our vision, primary shapes, colours, sketching, wireframing, details and effects on this website. You can read the reasoning behind the design decisions for this site.
Cultural differences
Does where we grow up inpact our designs?
Depending on where you grow up in the world the local culture will have an impact on how you relate to colours and forms. If you grow up in the western world you are most likely the follow the objectify/define way of thinking derived from the Greeks. If we in the western world speak about the shape of an object we are most likely going to explain the shape as its own thing. The Asian way of thinking is to relate things to each other. If we take the same shape enology an Asian is most likely going to describe that shape like it looks like this other shape we already know and then explain the differences.
Recommended reading
If you want to read a book that goes in dept on a study between the west and the east and how that impact our way of life you should read the book "The Geography of thought". The book is written by Richard E. Nisbett and have the ISBN number 0-7432-5535-6.
Where I come from
There is more about the different design decisions made on this page in the end of this article, but I just wanted to disclose right away that this article is written by a Norwegian with western view. I have the - greek - abstract - way of thinking about objects and things surrounding me like mentioned in the book.
Our Vision
What does our vision have to do with design?
Our eyes makes up for some really important decisions later on in our quest for world domination with our design. It is important to know what exactly happens when a website is displayed to us on the screen.
Eye anatomy 101
The light hits the front (cornea) of our eyes and is then projected to the back of the eye where the light is analysed by cones and rod cells. The rod cells are the ones responsible for analysing the amount of light and is therefore responsible for our black and white vision. The rods are spaced evenly throughout the back of our eye. The cones on the other hand need a lot more light to operate properly and is responsible for our colour vision. The cones is mostly concentrated in the centre of the back of our eyes.
The information gathered by the cones and rods is transferred to our brain for interpretation by our optical nerve. The signal that arrives to the brain for interpretation is upside down and mirrored before our brain does its wonders. About half of the human brain is used for our vision. This is just a quick layman's overview of how our vision works, for a more in dept article I recommend that you start on the wikipedia article about the eye. There is one colour test in the colour part of this article where you can test your accuracy to spot grey levels of colours.
Field of view
The human eye has a approximate field of view of 95° out, 75° Down, 60° In, 60° Up. A blind spot created by our nose takes up roughly 7.5° in height and 5.5° in width. It is only the centre part of our vision that is capturing colours. The rest of our vision is greyscale but do to our remarkable brain the colours are imagined and based on previous interaction with that object. There is even a study showing that everything we see is stored in cells in the brain and is sometime makes us see things that isn't actually there. To find out more about the storage of images in cells you should watch this clip by
3D vision
The part of our vision that are 3D is the spot of our vision where the vision from the left eye overlap the vision from our right eye.
Our view research
Stand with one eye open and look straight forward. With a pen in your hand draw the outer points of your vision.
New research
There has been done some remarkable studies on how blind people can learn to see with new medical methods. A large part of the treatment is to learn the brain how you can see.
Primative shapes
What is primary shapes?
Primatives is made up by the 6 simple shapes you see in the image above and is very useful to tell a story or emphasise something in design. How simple can you go and still get your message through? There is a reason why books have been printed on white paper for hundreds of years with high contrast to the typography. In the same timeframe we have had both painters and later on photographers who would have been able to add illustrations to the every part of the story. The book have however stayed mostly the same since the beginning.
Simplicity
One of the errors many designers make when they create their new website is using way to much graphic in their design. When you have a finished design you should always think about if you can remove one bit, would the design look better?
Life story
Below is my life story made up with these simple shapes until May 21st 2010. That happened to be my birthday so here is my first 26 years...
Colours
What is a colour?
A colour is a visual perceptual property corresponding in humans to categories like red, blue, green and other colours. All colours have a scale of "gray" in the background that defines what shade the colour is.
Colours on the web
Hex
A colour defined with a hex value uses the value-value-value or value*2-value*2value*2 definition. This is the most common way to define colours on the web. You are restricted to solid colours with this value.
RGB
A colour defined with RGB is defined with red-green-blue values. With the addition of a alpha channel this definition of a colour have become very popular recently as every browser but Internet Explorer supports it. Colours on this website is defined with RGBA values in addition to a hex fallback for Internet Explorer.
HSL
A colour defined with HSL is defined with hue-saturation-luminance values. This definition is rarely used on the web today since it just recently become available for use in newer browser. This might be the most logical way of defining a colour since you can see what colour it is from the hue value. With an alpha channel value added this might be the future for how we define colours on the web.
Colours on tourist websites.
During this course we did a study to see what colours different countries used on their tourism websites. We where interested to see if there was any difference between the colours used in commercial tourism websites and government websites for each country. Another thing we checked was the difference between each country and then at least figure out the most used colours.
The 16 most popular colours are shown in the image on the right. You can read more about this study on its own website.
Sketching
Why bother to sketch?
Sketching is used to roughly narrow out the proportions of the site and the basic functionality. Some people like to draw detailed sketches on paper before the even start thinking about how to transfer the thoughts to a website.
Wireframing
But I already sketched the website..
Wireframing is an important tool on larger websites to test out how content lets the user navigate too the different pages. This is usually done digitally if you already have a sketch. The reason to wireframe is too easly iron out the user experience of your site. This can be done with imagined navigation with and content blocks.
Tools
My favourite wireframing tool by far is a online site called MockingBird. Another tool I find handy is the iPad application iMockup. Most of my websites are ironed out on that application before I start with the online tool. iMockup has even taken over some of my sketching since it is so handy.
Details/Effects
Typography
What font you are going to choose is the most important decision you do when you create something that is meant to be read. That of course require that you create high contrast between the text and the background.
Textures
Textures are used to create more debt in a design or recreate real life objects we already come to love. By using smaller images that overlap we are able to fill large areas. There is a ton of websites on the net that offer finished open source textures you can add to your project in a matter of seconds, but the effect it self is pretty easy to achieve in a image manipulation program. You should create a graphic about 100 x 100 pixels to get more details into the texture. The second thing is that you have to overlap the left and right side and top and bottom side so the texture blends into each other when it is repeated.
Corner effects
Rounded corners and different corner effects have been achieved by adding custom images in each corner with a ton of extra markup to achieve the effect.
Another new tool many web designers are going to use the next year or two is the new border image property in CSS3. This adds unlimited possibilities for edges between blocks of content.
Shadows
Shadows has been used to create debt in our design for decades but has just in the last 2 years become really accessible for designers with the introduction of CSS3. At the time of this writing you can add shadows to text and display them in all modern browsers. If you want to add shadows to box/block elements you still at the time of this writing have to use browser specific implementations. See the examples on the right.
Shadows can be used to create other effects as well. If you pare it up with an alpha specified colouring of the element you are able to as an example creates letterpress effects on elements. This is an effect that has been very popular for the second half of 2009 and so far this year. The effect is achieved by putting multiple shadows on an element, light on the bottom and dark on the top or the other way around.
Explanation
Site demographic
The typical reader of this site is a person interested in learning about design. The site tries to be friendly to people new to the design field, but some acronyms and design specific words outside the regular vocabulary might be in use. If you find a word you're not familiar with please send me an email or google it.
Typography
The two fonts used on this website is Palantino and Helvetica. Palantino is a serif font that I think just pops when the font size is about 15px (0.9em when body font size is 100% - 16px;). The font is available on both Macs and PCs as well as in Linux. The font is called Palantino Linotype on windows.
This typeface works best on larger small chunks of texts like the usage on this site - headers. The version used on this site is the bold version. With usage of the google font embed system the version you need for your browser is automatically downloaded. If for some reason the font embedding fails the site design uses Helvetica as backup.
Background
All the backgrounds except for the white one are based on the texture shown in the grey background parts of this site. The decision to base every background on a texture came down to the idea that the design needed some dept and old school paperish fealing.
Colours
The colour pallet on this site is made around the blue shade used on the background of this section. The different colours is harmony colours of the bleu shade and is primarily flat. As explained in the previous section about the background have some dept due to the textures.
Section headings
Each section on the site has its own navigation section where the user can navigate between the different sections. The idea behind the background for each section is that each content section is ripped apart from each other. The section headings is suppose to visually be one layer inn to the screen in the z-space.
Code
This site -as with any site I make from this point and forward is created using HTML5. The markup is just a lot more semantic than what you are used to with (x)html. On a content heavy site like this the markup gets pretty heave whatever markup language you use.