My design process

workflow

i

process diagram1
1. Concept development

When I get a project, I like to start with doing background research on the product and customer. It’s essential to identify the purpose of the website. For example, I design this website to land a job.

w

i

process diagram2
2. Wireframe

I usually start with a paper sketch. Best design tool is no design tool. Because sketching can be more efficient, while using design software will just strain your creativity. I then digitalise it in “PENCIL”, which is free software for the website wire framing.

w

i

process diagram3
3. Design in Photoshop

As I mentioned before, Grid and column system is my design approach. After layout my pages in Photoshop, I then slice up my PSD pages and convert them into HTML.

w

i

process diagram4
4. Code in HTML

With more devices come varying screen resolutions, definitions and orientations. It is a trend to make our design flexible. Websites need to be responsive and fluid to their users' screen. I am trying out this 1140 grid on my website. If you are on a go, check out my website on a mobile device.

w

i

process diagram5
5. Style in CSS

As soon I get my HTML pages done. I will throw in fancy CSS styles to fashion my website. I like to keep my site data to minimal size. Therefore I prefer a lot of CSS styling to adding pictures.

w