As earlier requested, and as I promised, I have now collected a few pictures and photos from my design process of webdesignbook.net. I won’t go in depth in the phases, but if you haven’t already read my earlier post, My web designing workflow, I suggest you read that, and then watch this post again - trust me, it will make much more sense!
Phase 1 - planning
I had a lot of ideas and goals in my head before i started sketching and I figured that my main goal was to get rid of the dark, »closed« look, and get much more whitespace - more focus on the content - more web 2.0.
Phase 2 - sketching
The sketching part - i made tons of rough sketches, but I have picked out a few images to show you:
These were the small sketches, and after having something i liked in small size i started sketching it a bit bigger …
… and I quickly came up with these:
Phase 3 - photoshopping with contrasts
Drawing up the sketches in photoshop didn’t take a long time, but the time went with choosing distances between elements, font sizes and - of course - the contrasts in colors between objects. This were my results:
Phase 4 - colours
I went for the »breaking colors«-type color theme. I chose a green to stay for static highlights - like links and menu indicator - and a deep red for hovers.
Phase 5, 6 …
Did the layout in XHTML and CSS and integrated it with WordPress (Please note me if you want a detailed walkthrough of that as well)
The end
See the design live here
19 comments
sesstreets Says:
Very nice dude.
22/04-2006 | 22:55
moistspot Says:
A detailed walkthrough of integrating a design into Wordpress would be very beneficial to many readers.
23/04-2006 | 0:18
The undersigned Says:
sesstreets: Thanks :)
moistspot: it would be a good idea, and I might take it up for one of the themes I’ve done, or if i make a new theme - but it would only be a walkthrough for people who’s into (x)HTML and CSS.
23/04-2006 | 1:10
neuro Says:
I’ve bene working without paper for a long time.
Now I can see the results of thinking before coding
26/04-2006 | 23:42
The undersigned Says:
Neuro> I used to start out by coding and playing around as well, but I’ve found out that doing a bit of work before you play around pays off in the end :)
30/04-2006 | 19:19
The undersigned » Blog Archive » WordPress theming guide Says:
[…] When the theme is done, I will write a guide taking you through the process of integrating a design into WordPress, »From xhtml to WordPress«, as I’ve previously promised (here and here). […]
02/05-2006 | 22:48
The undersigned » Blog Archive » From XHTML/CSS to WordPress Says:
[…] As I’ve promised earlier (here and here), I would write an article of how to make a WordPress theme, and I will give my best shot, through this article, to show you the process from a finished template to a finished WordPress theme. […]
03/05-2006 | 19:41
AlbanyWiFi.com » Blog Archive » From XHTML/CSS to WordPress Says:
[…] As I’ve promised earlier (here and here), I would write an article of how to make a WordPress theme, and I will give my best shot, through this article, to show you the process from a finished template to a finished WordPress theme. […]
04/05-2006 | 17:01
The undersigned » Blog Archive » Webdesign mockup using Photoshop Says:
[…] Don’t read this article as a tutorial from idea to final product, but start by reading these two articles, and you will find out that the mockuping is only a phase in the designing process: My web designing workflow My web designing workflow - part 2 […]
23/05-2006 | 12:15
Fresh » lo faccio per i clienti… Says:
[…] nella speranza che un giorno ci si renda conto del lavoro che c’è dietro un sito. ognuno ha un proprio metodo e stile di lavoro ma resta il fatto che non si tratta mai di tirare due righe su un foglio, buttare un po’ di colori a caso in photoshop e frullare tutto in flash… Thomas Silkjær un designer danese ha postato sul proprio sito tre interessanti articoli sul workflow nella costruzione di un sito: prima parte (solo testo) seconda parte (testo + foto) terza parte (mano a photoshop!) […]
23/05-2006 | 12:28
Photoshop Weblog » Webdesign Workflow Says:
[…] Photoshop wird natürlich auch im Webdesign verwendet. Jeder hat dabei seinen eigenen Weg. Eine Vorgehensweise zeigen die Artikel My web designing workflow Teil 1 und Teil 2 sowie der Beitrag Webdesign-Mockup auf theundersigned.net. Schreibe einen Kommentar! […]
06/09-2006 | 8:55
9rules submission | The undersigned Says:
[…] If you liked my articles about my web designing workflow (part one - part two), you might want to read April Zero’s shot at a similar article as well. […]
20/09-2006 | 13:53
» How to make a WordPress theme! Says:
[…] “As I’ve promised earlier (here and here), I would write an article of how to make a WordPress theme, and I will give my best shot, through this article, to show you the process from a finished template to a finished WordPress theme.” […]
28/09-2006 | 2:24
Ralf Says:
Hi, thanks for the quick overview of the webdesign phases. I’m starting normally with phase 3, picking things together within Photoshop, trying to develop a layout. This way, erveryting is quite timeconsuming and sometimes I end up beginning from scratch again. I will try to follow these rules, testing if it will work with me. I will give a feedback on my experiences.
21/03-2007 | 9:50
wordpress theme design tutorial | Loose Your Yeast Infection Today! Says:
[…] June 8, 2007wordpress theme design tutorial As I’ve promised earlier (here and here), I would write an article of how to make a WordPress theme, and I will give my best shot, through this article, to show you the process from a finished template to a finished WordPress theme. […]
09/06-2007 | 1:32
John Says:
Thanks for this 2nd part - it is an eye opener to see others work as layed out here.
You’ve done a great job by putting it online.
Much appreciated.
John
www.xpertdesigns.net
03/08-2007 | 7:01
David Says:
Hey, thanks so much for letting us know your workflow. I am just getting into this, and it is great to know how others work.
On a side note, I LOVE how the pictures display on this page! What did you use for this? It is very slick.
Thanks!
11/11-2007 | 23:00
luljeta Says:
i like to design my mages
17/01-2008 | 9:47
Dedicated Web Hosting Says:
Moonquake is your solution for affordable search engine optimization (SEO) Services, Web Hosting, Web Designing, Programming, Development, Internet Marketing, Internet Solutions, Link Building, Search Engine Marketing Services (SEM). For More detail visit at here:
http://www.moonquake.us
10/07-2008 | 12:51
Leave a Reply