One of the branches of our business is creating Drupal themes. It's not a priority area of our work but we created a few themes and continue our development (you can check them out in Works section on our website). In some aspects creating themes differs from creating exclusive websites. We want to tell you about these points and give a few pieces of advice to beginning designers.
Well, what is the main difference between a theme and exclusive design? We think that the main difference is a real client. For a theme design, we use most typical and popular design elements when for a real client we create an original design reflecting their business. This is the main point in theme design. When we create a design for the exact client, we always have a few things that can help us in a creative process: brand colors, a defined area of business and even personal preferences and wishes of the business owner. Though, the same points can be obstacles too. Creating a theme is different. We should predict what many people like, should create something universal and at the same time unique and noticeable among other themes.
Let's study the main points for creating a design for a Drupal theme.
Choose a category of your theme
As you know, there are some popular categories of themes: corporate, blogs, e-commerce themes and themes for promoting mobile apps. Each of these categories has its own trends. Beginners should better start with a corporate theme. You'll see what regions the page consists of and understand how to build a page. Such themes often have a few pages but some could be a one-page theme.
There are other corporate themes for companies with more specialized business, for example, beauty salons, kids gardens or religious communities. This list goes on; there are plenty of special businesses. If you choose to create such theme you probably won't have many competitors; you can create the most beautiful and functional theme on the market. But you'll have fewer sales/downloads than multipurpose corporate themes have.
Explore themes in a chosen category
Well, you chose a category. What to do next? We think that it's necessary to see what is already on the market. Look through websites with paid and free themes of your category, study which pages and blocks are most common. Pay attention to the design of most popular themes and think why these items are so popular.
If you choose to create a theme for specialized business, do the same. Think what you would like to have on the website if you were an owner of such business. If you have friends who know this business better than you, ask them to tell you more about it.
There is one more helpful thing in a design process - mood board. It's a bunch of pics reflecting a feel of the project. It helps you to choose right colors and shapes and be inspired.
Create wireframes
So, you looked through dozens of Drupal themes, chose a few great examples and defined necessary blocks and pages for your theme. Now you can start with the wireframes. It's not a required stage especially if you don't have a client but create a theme for yourself or for your company. But wireframing has many advantages. Some of them are listed below.
- you have an ability to try many different versions of arrangements of blocks on the page
- you can use the same structure for different designs
- you can save much time on amendments
For instance, if you're planning to create a theme with some particular functionality (e.g. booking for a hotel), wireframes will help you a lot for discussing it with programmers. It's a great tool for communication.
There are many tools for wireframing, from a pen and a sheet of paper to online-services for creating interactive prototypes:
Design it
In this article, we won't tell about choosing colors and basis of composition and typographic. These topics are so rich that they need separate reviews. We should only warn beginning designers to avoid active usage of decorative fonts and patterns. Following trends in web design will help you to create an up-to-date and modern look. There are a few rules below. They will help you to create your first Drupal themes:
- use a modular grid. Using grid isn't always necessary for web design but it's very helpful in creating themes. If you have a bunch of pages with same blocks and elements, the right grid will assist you a lot. The grid is also needed for the responsive design.
- create a responsive theme. It's already been said a lot about it, and you often view websites from your phone or tablet, right? You should create your drafts in three versions: for desktop, tablet, and mobile resolutions. Usually, you don't have to redraw all pages in three versions, just a homepage and some other pages if they contain some special elements. You can find a lot of information about responsive design on the web. It would be better to know what framework will be used for responsive version because different frameworks have slightly different modular grids. Consult with a coder if you are not familiar with theming.
- create Retina-version of your theme. It's not a required element for a good them but the most popular paid themes have this feature. Google for instructions how to prepare a Retina-version of your designs.
- make a typography page and page with all out-of-the-box Drupal elements. Drupal has its own list of elements which require being designed. Ordered and unordered lists, buttons, links, titles and many other things. All of them are listed in the extremely helpful article. You can even start with these two pages and then use your set of elements everywhere through the website. Coder will certainly be grateful to you!
- think about using columns. In modern themes you can see using 2-, 3- and 4-column schemes directly on the front page. Also, you should create basic node pages with one and two sidebars and without them.
- always supplement your theme with notes and comments. If you don't code the theme yourself, let the coder know about things that cannot be displayed on the plain drafts. Use Photoshop Notes tool or provide a text document with theme source files. Use notes for elements that change on hover, etc. Provide links to show css-effects which you would like to use or describe your own ideas. Comment everything as much as possible.
- use iconic fonts. It's more important if you create a universal theme. Popular iconic fonts like Font Awesome or IcoMoon have tons of icons for any occasion. If you create any specialized theme, you can try drawing your own icon set that ideally suits this business. But you should be ready for customer's requests to draw one more icon in the future :)
- and, finally, create a nice presentation for your theme. Depending on the market where you want to promote your theme, you should create a great cover. This way customer has an ability to check out a level of design quality, even before viewing a demo-version of your theme.
Your theme should not only look awesome but work correctly and meet the web-standards. To achieve this goal read another article in our blog: Must-knows and common mistakes in theming.
Good luck in creating themes for Drupal! Remember: if you create a cool theme, many companies will have a great website!
More on the topic
