lewro’s blog - 3.0 - studying web design and development

As I have wrote before I have been collecting ideas for this latest version for a while. I have divided the thinking and developing phase into subsections.

First phase - content

In this phase I have decided what content I want to present such are main sections about, portfolio, photos etc. Then I have decided what subcontent I want to place into the main sections such are obviously blog posts, comments and external stuff like lastfm, flickr, delicious. In these phase I was aware that I am going to need some Wordpress plugins. I was quite sure about most of the one I needed that they exist. I have been using some of them in my previous version as well. I have decided to go with 3 static pages - about, photos, portfolio. These could be dynamic in the next version when my knowledge of PHP will be on better level.

Second phase - order (layout)

This phase started in my head as usually. Some of the layout concepts are still coming from the second version but most of the pages are bringing completely new layouts. After I had ruff idea how the pages going to look like I started to draw the ideas on the paper. Not everything what worked well in my head worked the same way on the paper so I had to move thinks around a bit. When I was quite happy with the result the Photoshop came into play. I have spend so much time designing every single page. If you wonder what are they… home page, post detail page, archive page, my archive page, about, photos, portfolio, search results. The most important think which is used across all pages is the grid I have created specially for this blog. You can see it on the picture bellow.

Third phase - feeling (colour shceme, icons, images, drawings, photos)

Third phase continues in the Photoshop where I implemented the colour scheme I have chosen and icons I have created for it. There have been few variations in same cases. For example the tags icon have been simple arrows at the beginning but later I have changed my mind and created these pink tags to bring more of that drawing feeling. Photos have been chosen based on the popularity on the flickr site and drawings as well.

Fourth phase - typography

I was very sure I want to go with Helvetica Neue for all main headers and Promoted type face section. I just love Helvetica and I am very happy to use it whenever I can. For the rest of the page Trebuchet MS is used so I get some of those curves which goes with the lightens of the whole design.

Fifth phase - html, css stucture

I have been thinking lot ahead before I start actual coding. I have divided blog code into lot more include files for better versatility that it was in my 2nd version. I use more less the same structure for CSS files. Layout, colour, typography. I have only added one more CSS file called Script styles. This one is used in very nice technique which inserts CSS line via JS into the HTML when page loads. This way the tabs I use on the site for example in art section can load closed without flickering the whole content. In terms of HTML I use better indenting so the code is more readable (at least for me).

Sixth phase -behavior

DOM-scription is used very wisely across the site. At this moment mainly for showing and hiding page elements which have already been loaded into the html and in few cases JS generates some elements on the fly which spice up the page but are not necessary so when JS is off they are not available. I plan to increase usage JS but it is not going to be nothing major. Accessibility and web standards are still my major goals.