fashionclaire

Overview

The Fashionclaire is simple, easy to use, user-friendly WordPress theme. It's suitable for a fashion magazine, blogging, lifestyle and any other blogs. The theme has a lot of customization settings that are available WordPress Theme Customizer, including fonts, color options. Also, it comes with custom widgets for the author, social media profiles, recent and popular posts, sidebar and copyright options, etc

Role

Sketching, Information Architecture, Wireframing, Prototyping, Custom WordPress theme design, Development

Tools

Pen & paper, Balsamiq Mockup, Adobe Photoshop, Adobe XD, Visual Studio Code

The challenge

The challenge was to create a user-friendly WordPress theme, with a lot of customization options and build on the needs of users while providing the security of WordPress.

Hight Level Goals

1. Design a responsive fashion blog.
2. Develop a WordPress theme with the latest coding standards.
3. Design and Develop a user-friendly WordPress Customizer for the user.

fashionclaire

A few months ago I decided to make a challenge for my self. The idea was to create an effective and simple WordPress theme, with the most important features that WordPress can offer. I decided to get my inspiration from around the web and after that, I made a quiz with keywords, and finally, I created the name of the theme. So the name came up by the acronyms of words “fashion” and “claire” and finally fashionclaire came out of the world. Fashionclaire is a Free WordPress Blog Theme.

Discovery

First I needed to understand the user, so I used a user-needs statements method, and then I created a persona development. Steve helped me to align the goals of creating the WordPress theme.

Steve Nielses is the persona development
Steve Nielses. The persona development

Steve, is a perfect writer but on the other hand, is a person with no technical skills. He needs to create quickly and confidently his own personal blog. To point out without leaving his comfort zone, in other to spend more time do the things that really matter.

How might we

  • Help Steve to find out his personal blog, to implement his needs?
  • Help him to clearly the specifications of the theme that he wants to use?
  • Encourage him that it is easy to use the WordPress theme, without having any specific technical skills and knowledge?
  • Help Steve to choose his specific requirements for his blog theme?

Ideation

Using sketching, I created low and mid-fidelity wireframes. This helped me a lot to see in action how the main content of the front page looks like.

Sketching

The sketching focused on the front page and more specifically on the desktop and mobile layout.

Sketching the fashionclaire blog theme
Sketching , Fashionclaire Blog Theme

Wireframing

The wireframes gave to me the abillity to modify better the visual hierarchy of the content.

The low-fidellity prototype of the blog theme

Options and Features of Theme

From the beginning, I had some thoughts on the options and features that I should add and use. All things considered :

  • How many fonts can I use and which of them I can finally include?
  • Another one thing, these fonts will be able to support languages such as Latin, Cyrillic?
  • Regardless of my options, what color combination should I make for the user to easily change the colors from the customizer?
  • Although, WordPress theme has a default page, can the user select the template for post and page?
  • In case that the content is long enough in view of mobile, what items should display?
The feautures of the customizer
Getting down all the components

The Design System

I wanted to translate elegant style into colors. The color palette contains the basic colors of black shades color and gold color. Of course the user can change them, easily.

The basic design system
The basic design system
The grid system, images and widgets.
Grid System, images and Widgets.

High Fidelity Prototype of Fashionclaire

Below, is the high fidelity prototype of Fashionclaire Free WordPress Blog Theme.

The High Fidelity Prototype of the Fashionclaire
The High Fidelity Prototype

Digging the WordPress theme

Below are the basic development process and the scales of how I implement the WordPress theme.

Grid System of Theme

Once my style design was done, all I need was to put everything together. I coded the HTML, SCSS, and Javascript and finally turn it into a WordPress theme.

The next step was to create a grid that would work well for the theme requirements. With this intention, the grid in the front-end is fluid and fully responsive with a max-width of 1200px which is based on display property.

Images of Fashionclaire

Every set of images has some specific size and will vary depending on the size of the screen. As a result, all the images have some max and min sizes based on the Grid and the layout of the display.

The navigation is accessible, simple and as a result, the user can up to three-level navigation. The buttons are determined by the primary color. Breadcrumb, tags, categories, and dividers are determined by the secondary color.

Sidebar and Footer Widgets

  • Popular Posts.
  • Latest Posts.
  • Search.
  • In addition, you can add your social media accounts like (Facebook, Twitter, Instagram, Linkedin, Pinterest, Vine, Github, Github, Stack Overflow, Xing, Lastfm, Spotify, Telegram, Foursquare, Yelp, Tripadvisor, Tumblr, Soundcloud, Flickr, 500px, WordPress, Soundcloud, Vimeo, Youtube, Snapchat, etc).

Post Component

The post is the most important element of the blog and it’s displayed to help along you to read the content.

The post compontent in desktop and mobile layout
The post component in desktop and mobile layout

In fact, the post component is composed of:

  • Post thumbnails / Featured image.
  • The title of the post.
  • The date of the post.
  • The number of comments.
  • Terms, like category and tags.
  • Post description (excerpt and content).
  • Call to action.

Page Templates

For instance, do you want to customize the about page? Almost done. Do you want an additional left sidebar only on your blog page? Truly, you can change. Do you want to have a full-width template that is different from the default page template, in your about page? Certainly, you can do that. Hence, the theme comes with three different page templates :

  • Left Sidebar.
  • Right Sidebar.
  • Without Sidebar.
The page template of Fashionclaire
The Page Template of Fashionclaire

Custom Single Post Templates

Custom single post templates allow you to easily select different templates for your posts.

So, do you want to create a custom single post template for your post? No problem. In that case, the theme gives you the ability to select from 3 different single post templates :

  • Left Sidebar.
  • Right Sidebar.
  • Without Sidebar.
The custom single post template
Custom Single Post Template

Customizer Theme Settings

The Customizer has pre-built controls for thinks like text, checkboxes, dropdown selects, radio groups, as well as more complex controls such the color picker and of course the image uploader.

For the most part of the theme is the customizer. So for Fashionclaire Free WordPress Blog, I focused on the Customizer settings and options of the theme. In fact, the user and the developer easily can make changes to the theme.

Features of Fashionclaire

  • You can select from 53 total Google fonts, and use them not only for the title, tagline but also for body and headings.
  • Option to show and hide the excerpt.
  • Add excerpt length.
  • Add, social media accounts in the header and at the same time the choice to appear them in desktop and mobile layout.
  • Option to remove the author content in a single post.
  • Show and hide breadcrumbs in single post, page, and archive.
  • Show and hide related post section (desktop and mobile layout).
  • Display the option or not for “continue reading”.
  • Change the color for body, headings, secondary and background.
  • Choose a color for the navigation menu.
  • Choose the color for a tag, category, breadcrumb, post navigation, author content, etc..

Recap

Creating a free WordPress theme is an idea that I had in my mind for a few months already. My idea was to create a WordPress theme from scratch using the latest coding standards. My first mistake when getting started is that I spent a lot of time to figure out which options need to include in the customizer. I tried to think so much from the creator’s side and from the side of the user. Eventually, I realized that in the end, I will not be satisfied with anything, so I moved on the process and I wrote down all the important customizer settings.

The Theme Review team of WordPress is very strict in security settings and general in security management. From the beginning, I hadn’t given it the importance it needed for security. As a result, I lose a lot of time because the theme after the reviewing goes to the end of the queue. That made me think twice before taking the next step.

Next Steps

The changes are gradually being made to the core of WordPress, but since the style of WordPress themes will be changing due to the Gutenberg editor, I will update the current theme with the latest requirements that provide the Theme review team of WordPress. But upon renewal, this side project of Fashionclaire Free WordPress Blog Theme will remain available on Github.