design four

design four (#design2code1)

In 2015 I’m doing what I like to call The Design 2 + Code 1 Project. Each month I will be designing two WordPress themes, then choosing one of them to code. I will be sharing updates about this project every Saturday.

My first February design is here.

This is my second February design.


Happy Saturday (And Happy Valentine’s Day!)

I took a new approach this week and designed mobile-first. Rather, I should say mobile-only (for now).

The idea behind mobile first design is that when you design for such a small screen first, you only include the necessities, because there isn’t room for anything else. It forces you to think clearly and more strategically about what you include, and why it has to be there.

With mobile first design, you design for small screens first, then adapt them for larger screens, which is said to be easier than trying to fit everything you’ve included in a desktop design onto a comparatively tiny screen.

It’s easier to add stuff than it is to take away.

On that note, this design includes a homepage and portfolio as well as the usual blog index, single post, and regular page.

Remember, these designs are made for mobile screens (my iPhone 5s, in particular). The design would have the same overall style, but different layout, on a larger screen (such as a horizontal iPad or desktop).

The Homepage

This homepage is designed to fill the entire screen, and no more. We’ve got a full screen image with a slightly transparent overlay to darken the image and make the white text more clear.

The site title is at the top, enclosed in a box, with a little description below.

Yes, the copy (actual text) on the designs is very random. You should be used to this by now, coming from me. In this case, the site title is ‘This is White’, for the obvious reason that the text is white.

design four home

Below the description is the menu, labelled with the text ‘where would you like to go?’ I’m not sure how effective/intuitive this is, so I’ve added the helper label ‘click for menu’. I’m not sure this is ideal, but I like testing new things and playing around with concepts. Would you click on the text for the menu, even if the helper label wasn’t there?

Speaking of menus, here’s what would happen when you clicked for the menu:

design four home menu

In my mind, this is kind of animated. The text slides over and the line above extends around. The entire background gradually fades. I won’t lie, this is something I have zero idea how to code. If I choose this design, it’s going to be a lot of learning. I don’t even know if it can be done entirely with css. I expect not.

The Portfolio

I love the idea of full width images. You probably noticed.

design four portfolio

Take note of the header, and the little ghost-style menu icon. This is much more intuitive than the text in the footer (which now says ‘where to next?’). People recognize the hamburger icon – it’s fairly universal.

As another note: currently the colour scheme for this design is simply black and white, plus any colours that occur in the images. It would be very easy to add a highlight colour to the design. The separator lines between the images, for example, could be that colour. One other pages, some of text could be highlighted in the colour (like some of the meta info on the blog index – you can imagine it when we get there).

Here’s an image of both the top and bottom menus open, to see how they function. As well, if you hold you finger over a portfolio element (as if you were going to scroll down), the name of the element would appear, as shown in the image. This is a similar effect to hovering with your mouse on a desktop.

design four portfolio menus

The Page

The page template would be used for for general pages, as well as the portfolio items. For this design, I’ve made it an example portfolio item page (the one with the hover effect from the general portfolio page above, of course). You can see the thumbnail that was used in the general portfolio page is now the image in the header, and the name of the element (design two) shows up in the header.

design four page

Otherwise, the text is very simple, at an easy to read size with very little white space around the edges, to maximize the space of such a small screen.

All images appear full width on your mobile screen.

The Blog Index

There is nothing too crazy happening. The usual header and footer. I’ve only shown one post here, but of course the next posts would appear below the first.

design four blog index

You can see in the meta information that I’ve made sure each post could be filed in multiple categories (as promised!). This is the info that would likely be highlighted with a colour, were it to be added to the colour scheme.

As well, all the categories are listed before the posts begin. I was playing around with the idea of having this hidden behind a label that said something like ‘show categories’, which, when clicked on, would expand the category list. This way, if you have many categories, users aren’t forced to scroll through them every time they view your blog index.

Single Posts

This page is very simple. The feature images is shown in the header, and the post meta information is shown above the post content, in the same style as the categories on the index.

Otherwise, the text is full width, as would any images be.

design four single post

The Style Guide

design four style guide


Thanks so much for sticking around :) I’m excited about this mobile first concept – it’s a totally different way to think about an initial design. I may try and do at least one mobile first design each month.

I’ll let you know which design I’ll be working on coding next Saturday, when I share with you something I’ve learned during the actual coding process.

As usual, I’d love to hear what you think of the design (including that menu style on the homepage as well as in the footers). And until text time, take care :)