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.
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:
And the other for static pages:
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.
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.
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.