design three (#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.

This is my first February design.

—–

The big day is here! Welcome to the first Saturday in February (already!) and welcome to the third design in my project. As always, I’m super excited to share with you.

For this design, for the first time, I created a homepage. Mind you, it’s very simple, but it’s still a homepage. That means I have 4 separate pages to show you today: a homepage, a blog index page, a single post page, and a regular page.

I was trying to step out of my comfort zone a little bit with this design, but I can’t decide if I succeeded. There was definitely some experimenting going on + some new tricks.

Here goes.

The Homepage:

Design three homepage

Yes, this is it. There is absolutely no scrolling involved on this homepage. The colour would be coded to always fit however large the window is (unless it’s ridiculously short and very wide at the same time, in which case I’m not sure how to make that work – but people don’t view their windows like that anyway). The site title and description would always be vertically centred (thanks to my new-found knowledge of flexbox, I know this can be done!).

As you can see, I’m a huge fan of big titles lately, with bold sans-serif headings. Love love love.

The Page:

Alright this is where things get complicated and it’s not quite so easy to show. When you first reach the page, you’ve got a full window section, exactly like the homepage. This time, however, you scroll down to view the page content (it says scroll, to avoid confusion).

Once you scroll into the content, the gigantic header turns into a small header + navigation bar that sticks to the top of the window, visible at all times.

Here’s the image (the black bar separates the initial full screen view from the view once you scroll).

Design three page

For this design, I wanted to make sure I didn’t use white as the background colour, but still created a clean looking design. Instead I went with a very light cream colour (stepped way outside of that comfort zone, am I right? Jokes aside though, I’m getting more comfortable with the idea).

As usual, I don’t have a sidebar and there is absolutely nothing to distract from the written content. Picture, if they were added, would likely not be full width, they would be kept the same width as the written content.

The Blog Index:

My favourite, this go around :)

This is where you get to see the real colour palette shine. I was in a fall type of mood (it’s one of my favourite seasons and the natural colours that occur are gorgeous, even though technically it’s because the plants are dying. Let’s forget about that bit and just enjoy the colours, okay?)

As with the regular page, the top green section would take up the entire view, until you scrolled down, at which point the smaller header would stick to the top.

Design 3 index

The idea here was that each category would have its own colour. You’ll see one more colour in the style guide at the end of this post that would work wonderfully for a third category. Of course, this is a nice thought, but wouldn’t work for some people. Either they would need more colour options, or fewer categories. As well, it’s limited to only having one category per post, which isn’t the case for some people (me included). Note to self: make next design compatible with multiple categories per post.

I’m loving the rustic look the fall colours give, and the contrast between the full width images and the whitespace for the excerpts. Initially, I didn’t include that coloured bar above the images. But without it, the images looked… disconnected. With the coloured bar, it’s clear which goes with which.

Single Post:

Here’s another of my favourites, simply because of the image + slightly transparent colour that’s going on when you first click into a post. As with the page and index, the top section takes up the full window when you first click over to the post.

This time, instead of a solid colour, the feature image for the post is in the background, with the transparent colour layer, the post title, and the post meta over top. And the colour for the page is entirely dependent on the category. If I had chosen the other post to make a design mockup of, everything that is orange would instead be the deep rust red.

I love this! (Apparently today I’m loving all sorts of things. Sign of a good day?)

As usually, the scroll text is there as a reminder that there is some real content below. This time, the little header that sticks to the top has the post title as well as the meta information (and the menu, of course).

Design three single

As usual, the comments are simple and match the style. And the footer? It’s simple too. I went for a thicker footer this time around, with a vertical menu. The email optin would always be vertically centred in that space (again, flexbox to the rescue!).

This time around, I was thinking a little more consciously of how I would code each of these aspects in the CSS to make sure I could get them the way I wanted. Must be from doing the coding of design two (www.bobbireyda.com/code-two) last week.

The Style Guide:

I made a mini style guide again for this design, because it helps immensely with the coding (if I decide to code this design).

As I mentioned before, the colours were inspired by fall. As for fonts, the bold sans-serifs are my current favourites for headings, with a contrasting thin (but very readable) font for the body text.

design three style guide

—–

Let me know what you think of the design :) As usual, I’m super open to feedback due to the nature of this project. The next design is coming at you next Saturday!

In other news, if you really like the work I’m doing +  happen to need a website, Aurooba (the other half of PHOENIX|D / genius developer / hilarious individual / my best friend) and I would love to learn about your project + your needs and hook you up with an awesome website. Just send an email over to us@phoenixd.co, and we’ll go from there.