Sad wolf and it’s not over yet

Today I did mostly illustrations for my 404 pages which I didn’t do, forgot put it to my WordPress bare theme. So I worked on that. I also deployed new theme on Lone Comic Wolf and at the moment I think that I’ll change my host because I didn’t like the loading speed. May be it is inefficiency of my theme but at the moment I doubt because there is nothing complicated in it. Just one custom post type with specific archive and single post. It may be problem with one plug in but at this point I doubt that too because at this site I have more plug-ins installed.

I might try and have a look at my navigation function because at the moment it just might be doing to many requests to database. But in my opinion if it is fast on localhost it should be as fast on remote host.

The other thing that happened to me today was that I got a call from school. I might not have been kicked out yet. Which is probably a good thing. The bad part is that I’ll need to pull a small miracle which I am not sure I can do. Anyway I’ll decide in the morning.

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.