Theme 1: Design Plan

As discussed in my Needs analyses for my WordPress themes, the first theme I’m working on is intended to be useful for a small to medium-sized public library that is looking for the following things in a website:

  • an online space for community updates (more than likely through a blog format)
  • emphasis on a calendar of current events
  • a place for other current events/announcements
  • easy-to-find hours
  • incorporation of images into blog posts
  • clean and minimal (while still fun) design

Using the work I did last summer on the group project redesign of the Sutton Free Library’s website as a base for my mockup, I created some starting points for the design of my first WordPress theme.

1. Wireframes

I began by creating the following wireframes to lay out the general structure of the theme. These were created with a free trial of Balsamiq.

One is for blog posts:

Wireframe of blog posts for theme 1

And the other for static pages:

Wireframe of static pages for theme 1

My approach here was to follow a grid pattern while making consious decisions about the areas (such as the header, sidebar, main content, footer, etc.) that would be easily translatable to the structure of a WordPress theme.

2. Desktop Mockup

Using this wireframe, I recreated the a more detailed version of the design in Photoshop. Though I chose an initial color scheme to start my design, I hope to be able to incorporate the user option of defining custom colors through WordPress’s visual interface in the Customization dashboard.

Mockup for large screen views of theme 1

I made some alterations from the original Wireframe during this process, though these were all mostly minor changes. I’ve been interested in flat design lately, so that was a major inspiration in creating this Photoshop mockup.

All icons will be imported using Font Awesome.

3. Mobile Mockup

Next, I made the mobile mockup in Photoshop. I think I was able to translate the major components of the desktop/larger screen design into a mobile layout that I plan on making fully responsive.

Mockup for mobile views of theme 1

Knowing exactly how I want the larger screen version to translate to smaller screens such as mobile or tablet devices will be really useful, since it will allow me to begin my coding process at the smallest screen size before modifying it for larger ones.

A note on JavaScript, and next week:

Working on these wireframes and Photoshop mockups took up a considerable amount of my time this week, but I also finished up Codecademy’s JavaScript tutorial. This took a good deal of time, too; the first half of the tutorial covered a lot of the basics of the language, and the second half had some really great (though time-consuming) exercises and real-world examples — from creating choose-your-own adventure stories, to making a functioning cash register program. Next week I plan on continuing my JavaScript studies by looking at the jQuery library, as well as by reading selections from JavaScript: The Good Parts.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.