Responsive Geometry will be a blog about the intersection of code and design. My skills are primarily in front end development and day to day I typically code and interpret designs other people have created. With this project, I am challenging myself to explore skills outside of my typical workflow and one of the ways I will do that is to create the theme design for Responsive Geometry myself.
I’ll be blogging about the theme design process every step of the way and will add links to each related post here as I go.
Here is my initial plan:
Step 1: Actually Publish a Blog
I’ve been brainstorming material for this blog for months, but haven’t published (or actually finished) any of the posts I’ve begun writing because I kept hitting a mental block in terms of how the blog should be structured and what it should look like.
Lest I be plagued by formatting indecision forever, I decided to start by using WordPress’s lovely new Twenty Fifteen Theme. I tweaked a few colors and changed some of the sidebar widgets, but otherwise I am going to let it be so that I can focus on blogging and on the theme design process.
Step 2: Create Project Requirements
Before I make anything, I need to define a clear list of requirements for the theme. Considerations I’ll need to address at this stage include:
- Visual Identity: What kind of look and feel do I want for the theme?
- Search engine optimization: What design elements do I need to incorporate in order to make having great SEO achievable?
- Content: What types of content will I need to account for?
- User experience: What are the user goals for visitors to the site?
- Accessibility: What do I need to do to provide the best experience for all visitors?
- Integrations: Are there connections to other software that I need the site to have?
Step 3: Make Information Architecture Decisions
First I’ll map out the website’s structure in a site map. I’ll ask myself these questions as I produce my site map:
- How will blog posts be organized?
- Are there other sections or pages I need to include?
- What will the hierarchy of content be?
Once I have a solid site map, I’ll build out a few wireframes to define how the content hierarchy will map to the screen and to define how the user will be able to navigate and interact with the content.
Step 4: Design Something
I’m planning to start the visual design process with a lot of brainstorming and sketching. Once I have some solid ideas to work from I’ll design the logo first. Then I’ll work with style tiles to establish color palettes, typography, and other branding elements. From there, I’ll create a full-fledged mockup of the homepage, a standard blog page, and any other layouts I deem necessary. I am planning to design (and code) mobile first to make sure that screen real estate is well considered at all widths.
Step 5: Get Design Feedback, Revise, and Repeat
I’ve enlisted two designers that I trust to critique my designs once I’ve got something to show. Critiques can be soul-shakingly terrifying, but are critical to learning to be a better designer (or developer!).
I am expecting that my trusted designer friends are going to have lots of feedback and that I’m going to revise and revise again until I arrive at a theme design that I’m happy to move forward with. I am giving myself a maximum of three rounds of revisions in an attempt to ensure that there is a defined endpoint for this stage of the process. After all, we are all our own worst clients, right?
Step 6: Build It
Once I get to the build phase I will have the following deliverables to work from:
- Site map
- Wireframes
- Style tiles
- Mobile and full-width mockups of the homepage and a blog post page
My theme will be built for WordPress because it’s a platform that I love developing for and because I believe it is optimized for blogging over other competing content management systems.
Step 7: Create Style Guide
Websites are inherently iterative and in order to prevent future code bloat, formatting inconsistencies, and new sections that don’t quite fit with the theme I’ll put together a style guide at the conclusion of the project. This guide will define the grid, typography, colors, button and image styling, logo usage, etc. for the website. This way, when I return to the theme in the future to make additions to the site or when I create designs for elements outside of the theme (email templates, social media art, etc.) I’ll have a clear set of defined design decisions to work from.
Conclusion
I am 100% positive that this plan for developing a theme for Responsive Geometry will need to be adjusted as I go along. What challenges have you experienced designing for your own projects? Do you have any advice for developers who are working on honing their design skills? Leave your thoughts in the comments!