After last quite exhausting week, as I wrote earlier I am an ice hockey junkie, I decided to work on a redesign of my other website I own but I have neglected it for too long. After reanalyzing the needs of Lone Wolf comic website I began doing wireframes. And then proceeded to pixel pushing.
The needs for a web comic are quite simple. Users need to see individual comic strips and to move between them. Archive is probably the most important less visible feature. The third thing which is more useful than necessary are tags for each comic strip. Individual tag may or may not be visible when user browses comic strips but it would be nice to be able to choose only those strips with certain tag. I also decided to create this website as a responsive one as a default so it’ll make coding part more challenging than the design part which is a little bit too easy or too dull.
Due to the previous work, let’s call it beginner’s mistakes, I have comic strips in various sizes in both width and height. So I designed looks for what I shall consider standard 200×600 (height x width) pixels three panel strip and for older strip formats. 200×600 pixels is standard format for desktop, for mobile I decided to flip it to 600×200 pixels.
Single comic strip in old format
Single comic strip in new format
Mobile version looks the same for both older and newer format except that in older one there is only one panel.
This website is not challenging on the design part but it’ll let me explore WordPress in depth.
When I redesigned this blog in September last year I knew it was a temporary solution. I planned it to realign/redesign it when I’ll have time. I didn’t found mood and time until two weeks ago but I wasn’t satisfied with the result. So yesterday I decided to take a look at it today.
My first thought was what purpose has a blog? The answer is fairly simple to broadcast the message in post. So as opposed to current design I wanted to place menus, logo etc. around the content instead of arranging content around logo, menus, sidebar and footer.
At first I gathered all components which I wanted to use. First would be another realignment of current design except without sidebar. Although it works on a lot of blogs I’ve grown to dislike because it is too common. Therefore I tried non-traditional #2 and #3. After that I tried to combine #1 with #2 and #3 which I didn’t like much.
Note: I prefer doing mockups in hand because when I tried using Balsamiq but I wasn’t as efficient and I was always searching for elements.
When it comes to mobile web design I decided to hide menu as a default option. I use at the moment standard hamburger icon. And I am not sure if to show in mobile footer anything more than contact form yet. I will see later. It’s not the best solution at the moment but this particular thing need in my opinion A/B testing.
When I had wireframes I went to do some pixel pushing in Pixelmator. I am well aware that at this time there is no such thing as pixel perfect website no matter how designers try. As a first thing I created boxes according to mock up #2 because I prefer it over #3. The color scheme is similar to current ones. I changed dark greys to dark blues and light grey to light oranges.
I experimented with skeuomorphism because this is a blog on a paper but as always I rejected it. Instead I use white borders between main blocks with flattish looks. But the button in contact form and the hamburger button are not flat unless the menu is active.
Under my display I have index card with three sentences. One of those is Practice, practice, practice. With this motto I decided to go to basics and as I said yesterday I made hundred buttons.
A lot of them are just variations. But what surprised me was the power of white and black compared to times when I used shades of grey to substitute them. I admit that this day was more about practical color theory than it was about buttons. Nevertheless I was working with buttons. For most of them I made flat and not-flat variations to see how bad recent design trend can be.
When I saw flat buttons as I made them I knew that the situation with flat design is worse than I have anticipated. How can a user know what is label and what is button when button doesn’t appear to be visually clickable? I am also not a fan of skeuomorphism but even old notebook keyboards where keys were not divided by flat space but as divider was used a set of skewed edges and that was considered flat or slim. Everyone understood it. These days I am not sure.
At the end of the day I ended up with three files of sum of hundred buttons:
Today was quite opposite day compared to two previous ones. I underestimated how much I can do in a day and I also overestimated the time I’ll watch ice hockey at the Olympics. I know that I have this 60 day project but over the years I’ve grown to love hockey games and even without this project I would watch those games anyway.
Today’s task was to make 20 ribbons and 10 labels for my own asset collection. I decided to do this despite knowing there are thousands collections with ribbon because I will never know what kind of ribbons I’ll need and therefore I’ll always have template at hand. The same goes with templates.
Probably the most important lesson from today is not everything that looks good on paper will look as good when realized. That is probably the first thing we had to understand when we were in engineering school. And it applies for design no matter how petty the task may seem. I like some of those ribbons but most of them don’t look great for my skill level.
Because I like to be hard on myself I will create around 75±25 buttons. Just buttons. Day dedicated to buttons.
I have been on and off blogging on this address for some time, mostly it was off. And I think it is time restart blogging. First of all I want to announce that I will blog every Monday starting today and may be some Thursdays too. On Mondays I will blog mostly about Web. Which means that for next couple of weeks I will publish posts about redesigning my own blog. At the end of this series will be a documented process from wireframes through design and static HTML code to WordPress theme.
This website is only a blog therefor I wireframed three most important pages: front page, post and search page. With this attitude I am probably shooting myself into my leg but this is my regular attitude, thinking in big picture first and finalizing details later.
First wireframe I made is front page. It contains header space, menu and footer which are common for all pages. Front page has three specific features. Most dominant one is an excerpt from Featured article which takes whole width of the page.
Below the excerpt are sidebar on the right side and blog excerpts of older posts on left side.
The second one is a post wireframe which is composed of post block and sidebar block keeping the same theme as on front page.
To compose search page I used post page as template. It contains simple search form and results are list of titles of posts.
Previous designs I did for this blog were more skeuomorphic. But this time I am thinking about something more minimalistic and definitely not skeuomorphic. As an example is one of previous prototypes.
Here are six pages of my new planned design:
This is all for this Monday. Criticism is welcome.