Lone Wolf comic redesign

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.

mockup1panelsSingle

Single comic strip in old format

mockup3panelsSingle

Single comic strip in new format

mockup3PanelsSingleMobile

Mobile version looks the same for both older and newer format except that in older one there is only one panel.

mockupArchive

mobileArchive

This website is not challenging on the design part but it’ll let me explore WordPress in depth.

Blog on a paper – redesign

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.

BOAPMockUp2006BOAPMockUp1004At 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.

Here is the design I will code tomorrow:

MockupA

MockupAArchive

MockupMobile

MockupTitle

MockupTitleMenuActive

Making blog: Intro, wireframes & design

Intro

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.

Wireframes

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.

Front page wireframe

The second one is a post wireframe which is composed of post block and sidebar block keeping the same theme as on front page.

post wireframe

To compose search page I used post page as template. It contains simple search form and results are list of titles of posts.

Search wireframe

 Design

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.

Old Blog on a paper prototype
Old Blog on a paper prototype

Here are six pages of my new planned design:

404 page archive front-page post quote search

This is all for this Monday. Criticism is welcome.