fashionclaire

Overview

In this project, I worked on creating a free WordPress for bloggers, which called fashionclaire

The fashionclaire is a simple, easy to use, user-friendly WordPress theme and is suitable for a fashion magazine, blogging, travel, lifestyle and any other blogs. Fashionclaire have a lot of customization options that are available WordPress Theme Customizer, included fonts, color options. Fashionclaire comes with added custom widgets for author, social media profiles, recent posts, popular posts, sidebar options, copyright option etc

Role

Create Information Architecture so that people can easily find information. WordPress CMS used to manage back end content. Custom WordPress theme design and Development. Responsive design using my own CSS frameworks for targeting multiple device and dimension.

Tools

- Adobe Photoshop
- Adobe XD
- Visual Studio Code

fashionclaire

A few months ago I decided to make a challenge for my self. With this in mind, the challenge was to design and develop a free WordPress theme. The idea was to create an effective and simple theme, with the most important features that WordPress can offer. I decided to get my inspiration from social media and also I tried to make a puzzle with words to create 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.

The Design Process

My first step of the design process is to always wireframe on paper ad design on Adobe XD, Adobe Photoshop or Figma, before getting to the coding. As a result, in the case of Fashionclaire free WordPress blog theme, I list all the elements, components that incorporated into the theme customizer and site which I want to design.

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 should 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?
fashionclaire-wireframes-feautures
Getting down all the components

Color palette of Theme

Below, is the basic color palette. The color for the heading is #151515 and the color for the body is #333333. Also, the color for categories, tags, and links is #aa8c00, and I use for the secondary color.

fashionclaire-WordPress-theme-style-guide-color@2x
The color palette of fashionclaire WordPress Theme

Typography

The base typography which applies in the body and heading, is PT-Serif. This font is a transitional serif typeface with humanistic terminals and it harmonizes across metrics, proportions, weights, and design. Consequently, this font can be used for a blog.

fashionclaire-WordPress-theme-style-guide-typography-style@2x
The basic typography style guide for fashionclaire WordPress theme.

Grid System of 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.

The basic grid system with a max width of 1200px
The basic grid system with a max width of 1200px

Images of Fashionclaire

Every set of images have 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 basic images which are applied in WordPress Theme
The basic images which are applied in WordPress Theme

The wordpress.org directory contains only themes which are considered 100% GPL or GPL compatible. This includes making sure both the code and all of the bundled assets are compatible.

WordPress.org

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

The Basic UI Design Elements

The basic UI Elements of fashionclaire WordPress theme
The basic UI Elements of fashionclaire WordPress theme

Sidebar and Footer Widgets

Footer and widgets ha the same components. The only think that it changes is the background color on the footer (#fafafa), which give a bit different feel to all of these components.

  • Popular Posts.
  • Latest Posts.
  • Search.
  • In addition, you can add your socia 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, Souncloud, Vimeo, Youtube, Snapchat etc).
Widgets for sidebar and footer
Widgets for sidebar and footer

Homepage of Fashionclaire

The design of homepage is simple and minimal while it takes the style of a classic blog. Similarly, consists of the layout of posts, the sidebar and the footer. Also, in the header included a top bar section, which you can add the social media accounts.

Post Component

The layout of desktop and mobile.
The layout of desktop and mobile.

The post is the most important element of the blog and it’s display to help along you to read the content. In fact, the post component is composed by :

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

Page Templates

Among the most important tools in the quest for complete website control are page templates. They allow users to dramatically alter their website’s design and functionality.

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

  • Left Sidebar.
  • Right Sidebar.
  • Without Sidebar.
The page template
The page template

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 fashionclaire gives you the ability to select from 3 different single post templates :

  • Left Sidebar.
  • Right Sidebar.
  • Without Sidebar.
Custom Single Post Template
Custom Single Post Template

Final Design of Fashionclaire

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

The final design of homepage
The final design of homepage

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, for this reason, I focused on the Customizer settings and options of Fashionclaire WordPress blog theme. In fact, the user and the developer easy can make the changes on the theme.

Features of Fashionclaire

  • You can select from 53 total Google fonts, and use them not only for 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 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 color for navigation menu.
  • Choose the color for tag, category, breadcrumb, post navigation, author content, etc..