888888.888888.88""Yb..dP"Yb..8888b..Yb..dP.88b.88....db....8b....d8.88..dP""b8..dP"Y8
88__...88__...88__dP.dP...Yb..8I..Yb.YbdP..88Yb88...dPYb...88b..d88.88.dP...`".`Ybo."
88""...88""...88"Yb..Yb...dP..8I..dY..8P...88.Y88..dP__Yb..88YbdP88.88.Yb......o.`Y8b
88.....888888.88..Yb..YbodP..8888Y"..dP....88..Y8.dP""""Yb.88.YY.88.88..YboodP.8bodP'


88b.88.888888.888888.Yb........dP.dP"Yb..88""Yb.88..dP
88Yb88.88__.....88....Yb..db..dP.dP...Yb.88__dP.88odP.
88.Y88.88"".....88.....YbdPYbdP..Yb...dP.88"Yb..88"Yb.
88..Y8.888888...88......YP..YP....YbodP..88..Yb.88..Yb

February 25, 2008

Themery Blogged Title

This is the first post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

When it comes to planning website designs I tend to take the seat-of-the-pants approach, which is to say I mock up some generalities in Photoshop then start building. In some ways I won’t be doing anything different this time round, but I have made an attempt to stop myself and think about things before getting started.

As I write this I haven’t even opened photoshop, or created my theme folder. It would be easy for me to design the site and then create the prep work, but it didn’t work well when I was doing art at school, and it won’t be an honest portrayal if I do it now.

What I have done is to take some of my ideas and, with very rough sketches, try and visualise them, what will work, and most importantly what will clearly not work. In each post I will be looking at one page in my planning process. Today it is feel.

Rought Sketches

You can see from the image that these are very rough sketches but they are useful.

I’ve started with the overall feel (top left). The words that come to mind are clean, minimalist, focus on the content not the amount of content, avoid clutter, white white white, and strong grid.

With the exception of the last one, which is more a definitive design point than an abstract feeling, I have pretty well defined that it will be the opposite of the news / magazine style themes that are currently popular. What I have in mind is an empty page with a post on it. Easier said than done sometimes but that is the starting point.

Any time you decide to focus on a minimalist design you open yourself up to criticism. With very little except text on the page it is very easy for someone to suggest that it is lazy, or simply that your graphics skills must not be up to much.

If we are being honest sometimes those things are true. My graphics skills are not great and I never really could draw very well.

Those criticisms, however, tend to speak more to the critic, than the designer.

In the past I have described great minimalist design as the absolute pinnacle of design. It is the point at which everything you want and need is available, but somehow hidden until you need it. Where nothing exists without purpose, and everything that exists is something you both need and want. To appreciate great minimalism you need to understand it and that means knowing more than the basics. Often it means walking through the full range of design options and out the other side.

Now, I am not aiming to achieve great things with this theme; I would love to produce something truly sublime, but in reality I am just intending to make use of some of the principles. WordPress themes are more than just a design, they are about how you use WordPress itself, how, or whether, you use all of the information at your disposal.

I have chosen to design with a minimalist feel because I know that when I get to the next parts of this series, Navigation, Single Post Content, Archives, Home Page, & Text Devices, I am going to need to think very carefully about the way the information is presented, the way it is accessed and, although I will be looking at all the design elements first, I will need to give thought at the back of my mind to the way I am going to use WordPress itself to connect and control all of the information

Choosing this style means I avoid the need to revolutionise the way sidebars are displayed, and the temptation to pack more and more features in. This will by no means be simple though. I am aiming for subtlety and I think that may be the hardest thing of all.

Tomorrow I will consider the navigational structure.

Quick N Dirty Admin Login Screen
Login screen css?
no comment
page 128
Html 5 Gallery
Html5 image gallery?
6 comments
page 1305
Post Image The Easy Peasy Way
Display first image from post loop wordpress?
26 comments
page 1065
Post Image The Easy Peasy Way
Get image link de medium wordpress?
26 comments
page 1065
Wltc Plugin Competition Live Blogging Plugin
Wordpress liveblogging plugin?
2 comments
page 1258
Html 5 Gallery
Html gallery?
6 comments
page 1305
Using Your Own Url Shortener
Create your own url shortener in php?
4 comments
page 1190
Html 5 Gallery
Html5 photo gallery?
6 comments
page 1305
Updating Code Snippets Here
Fun plugin wordpress?
no comment
page 1338
Write One Plugin Without Repetition Deviation Or Hesitation
Saveadminoptions wordpress?
2 comments
page 27
Updating Code Snippets Here
Wordpress fun themes?
no comment
page 1338
Html 5 Gallery
Html5 photo gallery?
6 comments
page 1305
Fun With Minimalism
Sidebartabs plugin?
no comment
page 248
Using Your Own Url Shortener
Htaccess shorten url?
4 comments
page 1190
Wordpress Chat
Wordpress chat?
3 comments
page 1308
Charcoal Theme Available For Wordpress
Simple charcoal wordpress themes?
2 comments
page 959
New Tabbed Widget Plugin
Tabbedwidget on wp 29?
no comment
page 333
Html 5 Gallery
Html 5 photo gallery?
6 comments
page 1305
Html 5 Gallery
Html 5 photo gallery?
6 comments
page 1305
Post Image The Easy Peasy Way
Wordpress image link anchor tag?
26 comments
page 1065
Fun With Sidebar Tabs Styling
Image under sidebar css wordpress?
2 comments
page 336
Html 5 Gallery
Html 5 photo gallery?
6 comments
page 1305
Dont Mess With My Toot Toot
Wordpress create new post type?
16 comments
page 599
Wordpress Chat
Wordpress chat themes?
3 comments
page 1308
Using Your Own Url Shortener
Url shortener?
4 comments
page 1190
Wpunlimited The Ultimate Wordpress Theme
Wordpress html customisation?
3 comments
page 1141
Quick N Dirty Bookmark Navigation
Dirty bookmarking links?
no comment
page 127
My Experience Of Flexx
Flexx theme review?
4 comments
page 1026
Categories Vs Tags Either Neither Or Both
Both either neither image?
12 comments
page 7
3 Ways To Speed Up Your Blog Without A Cache Plugin
Comment on speed up your blog?
one comment
page 1321
Premium Ithemes Review Photo Gallery
Ithemes reviews?
4 comments
page 226
Wordpress 25 Exif Fields
Wordpress exif plugin?
12 comments
page 230
Adding Settings To Admin Pages
Wordpress addsettingsfield?
3 comments
page 793
  1 query every 1153 seconds, updated 1 seconds ago.
Sunday, 11pm
 __
(__)
   `

 Themery : Blogged – Introduction – WP FUN

[...] 1. What overall feel do I want for my theme?. [...]

Wednesday, 7am
 __
(__)
   `

 Andrew Rickmann

Thanks Jack, I’m glad you liked it.

It helps to have that kind of definition to refer back to at every stage of the process. When I added the navigation for the theme I’m building it felt like there was too much there and it didn’t fit the description. So I scrapped it.

Good luck on your clean out.

Wednesday, 2am
 __
(__)
   `

 Jack

I’m a user of design and simply am engaged by your description of the process herein.

I deal with clients who think of white space as a place to put more stuff … just stuff so that maybe, just maybe, someone reading will find something in the clutter that interests them.

Your definition of minimalism plays well as an explanation that less brings focus, engagement, interaction and the types of activities they really want.

So, I posted this and ran off to clean up my blog! Thanks for the work night! ;-)

Wednesday, 6pm
 __
(__)
   `

 Themery : Blogged – Introduction

[...] 1. What overall feel do I want for my theme?. [...]

Wednesday, 6am
 __
(__)
   `

 Graphic Design Articles

[...] Design Process of making a Wordpress Theme – Submitted by Andrew [...]

Monday, 8pm
 __
(__)
   `

 Andrew Rickmann

Kaspars, it is interesting you should point out the flaws in my navigational structure on this post as tomorrow’s post is all about making good navigation available to the user.

Ptah, I’m glad you find it interesting. It isn’t often that go into this much detail because I’m usually doing it for myself.

Monday, 7pm
 __
(__)
   `

 Ptah Dunbar

great write up on the mockup process, I can learn a lot from you.

I love to hear, read, and write about the experience of how people (and I) go about when creating their projects. It’s all about the user experience!

Monday, 3pm
 __
(__)
   `

 Kaspars

Thanks for the archive links, that was really quick. Previously I simply went to the browser’s address bar and truncated the URL to include only the year. Archive links will definitely make it a lot easier :)

Monday, 3pm
 __
(__)
   `

 Andrew Rickmann

Thanks Kaspars, I just hope the end result is as good as I make it sound.

Monthly Archives added as requested.

Monday, 3pm
 __
(__)
   `

 Kaspars

Andrew, I am really fascinated by your extremely precise and well put definition of a minimalistic design:

the point at which everything you want and need is available, but somehow hidden until you need it. Where nothing exists without purpose, and everything that exists is something you both need and want.

You reveal the very core of the design and this is what many people are even not aware of when trying to make their “design” judgments. Like you said — even a single article on a blank page can have a dozen of reasons for the way elements are organized and laid out.

I am really looking forward to follow your ideas behind every step of this theme design process.

p.s. one suggestion: it is currently really hard to get to your earlier posts on this blog because there is only a category based navigation available. Could you, please, add a monthly archive widget to the sidebar? Cheers!

Monday, 11am
 __
(__)
   `

 $5000 Prize Giveaway Graphic Design Group Writing Project

[...] Design Process of making a Wordpress Theme – Submitted by Andrew Share This submit_url = ‘http://justcreativedesign.com/2008/02/17/5000-dollar-prize-giveaway-graphic-design-group-writing-project/’; Related Articles: [...]