Template Collection – A Great Way to Scale Up Your Design Skills
Collectibles are any time favorites. No matter what you like to collect for professional or personal use, inculcating this habit of creating repositories is always rewarding – sooner or later. It could be a collection of stamps, music albums, books, toys that you have been doing since childhood, or a collection of handy tools, tips, online resources that you have been doing throughout your professional career. So, there are two types of interests – personal and professional.
The professional objective is very clear. You want to develop a master list of web references, help files, quick notes, online tools, downloadable software that you can apply to your regular work. It is like creating a personal library of essential things that you maintain to strengthen your knowledge base, ideas, and experience. It is of great help indeed.
Search is Unlimited because Knowledge has No Limits
I still remember the days when I started collecting design templates; CMS based themes and PSD icons to develop my first ever blog. I prepared a list of more than hundred free and paid design templates if not less, and experimented with them to get the maximum output. The exercise was long but so encouraging, and full of fun! It even helped me give my best whenever I had to suggest suitable templates to my clients and colleagues.
You won’t believe I still rummage a lot of sites and blogs that list premium as well as free website builders, CMS based templates, web templates, ecommerce templates, PSD templates and more. Template Monster is one of the popular sites for web templates that you can follow to introduce new design elements in your kit. If you want hands-on experience with new website creation, simple drag-and-drop website builders like IM Creator can be really useful.
Fig: Categories of Web Templates
If web hosting is a primary concern to start with, there are free website hosting services like Hostt.com that can kickstart your project with no prior investment. Of course, for advanced services, you may not mind paying them a few dollars a year and then enjoy premium features at an affordable rate.
It is amazing when you see graphic and web designers around you are so creative that they bring in fresh design concepts and technologies every other day. It is altogether a great learning episode that enhances your design skills, creativity and nurtures your thought process.
Fig: Learning the Design Cycle
How to Start with Template Collection
1. Choose Your Domain of Interest First
Do you want to categorize your choice of templates based on a specific domain, or just want to collect them randomly? For example, you may be interested to collect only business and service related design templates for corporate use or pick from other verticals such as Fashion, Beauty, Food, Apparels, Sports, Real Estate, Computer, Photography, Health, Travel and more. If you are a beginner, why don’t you start with templates across the verticals for at least a couple of years and then go for specialization? It is important you get a holistic idea of various theme based designs during initial years.
2. Categorize Design Templates based on Their Commercial Usage
Design templates are of different types for different reasons. You need to know what they are, where they fit in, and how to make the best use of them. Let’s make it simple and clear. Primarily, there are four major types of templates that you can refer. These are Web Templates, CMS based Templates, Ecommerce Templates and Flash and Media Templates. It is up to your interest level and technical ability whether you want to specialize in any one or all of them.
Web Templates – Web templates can be classified into Landing Page Templates, PSD Templates, Newsletter Templates, Designer-ready Templates, Lead Generation Templates, Photo Gallery Templates, Responsive Templates and HTML5 Templates. You need to consult at least three to five widely used template selling websites and dive into each category of templates every week to know what new is there for you. This is a time-consuming exercise, but once you get a hang of it, it is easy to continue.
CMS based Templates – WordPress, Drupal, and Joomla – these three are the widely used CMSs across the web world, so their templates are. A beginner can start downloading free WordPress templates as WordPress configuration is the easiest to learn and practice. Users with prior exposure to advanced web technologies can download free Drupal and Joomla templates.
Ecommerce Templates – Magento, OpenCart, VirtueMart, osCommerce, ZenCart, Prestashop, WooCommerce, CS-Cart, Shopify – there are a bunch of ecommerce platforms and their corresponding templates for you to look at. Watching their demo sites will give you a very good understanding of design etiquettes, shopping cart related features, functionalities, and UI specifications. Most of these templates are not readily available for free download, so you can view live demo and read technical descriptions to understand the ‘How’ part of the themes. At the most, you may download a free sample of a particular ecommerce template with limited features and accessibility and then move on. Once you become a pro from a practitioner purchasing premium theme makes sense.
Flash and Media Templates – This is one of its kinds that makes everybody expect the unexpected ones. Yes, just browsing through a list of flash templates itself is a gala experience. Spend some leisure time with them and you will feel the freshness. Motion graphics, those too with vibrant colors, styles, and breathtaking concepts, are worth gold in flash templates. Even if you are not a flash designer, just watching the motion graphics and following the way they have been conceptualized will help you enhance your creativity to a great extent.
3. Identify Design Elements of Your Interest
It is not that you have to note each and every element of a design template and implement them one by one during execution. It is humanly impossible to remember and apply thousands of design elements to your work, and then again scale up with time. You have to have a list of common points in every design matter that you analyze. Here is a list of some common design components you may explore to understand their variety of usage. Consider them as important metrics for analyzing differences between any two templates.
-
Home Page Layout:
- How each of the home page components has been placed on a template and why so?
- How many segments have been used to formulate the home page?
- How each of the call-to-action buttons has been positioned and why so?
- How to make the best use of Footer area?
- Is the main content area box shaped, round or of different shape altogether?
- Is the whole content area floating on a transparent background?
Fig: A Sample Home Page Layout
There are so many things to experiment and apply new in order to get the best layout for your site that works. Apply some intelligence and you will see results forthcoming.
-
Top Menu Navigation Bar:
- Does the top menu bar follow a minimalistic design?
- Is there a visible menu bar in the header section or the menu bar appears only on scroll?
- How are all the sub-menus placed under main menu, in drop-down order or, all in a single frame?
-
Slideshow Panel:
- Is it a full width display or configured as per the available content area?
- How do the slides move and pause on mouse hover?
- How are the buttons, texts and images used in a slide?
-
Color and Aesthetics:
- How does the color vary with the theme of a website or a newsletter?
- What are the background color combinations that commensurate with logo, icons, image areas, buttons, header fonts and body texts?
- How do the color effects vary based on the major texts to be highlighted?
-
Image Area:
- How many image areas are to be demarcated for optimum results?
- Are the images conceptual or factual or just business oriented?
- What are the sources of those images? Can they be created by in-house team or to be purchased?
-
Content Placement:
- What are the prominent places in a page that give maximum visibility and click-through?
- How much texts to be accommodated in a paragraph that gives better response from users?
- What are the font types suitable for heading tags and normal texts?
- How do spaces among heading tags, texts, images, videos, buttons affect readability?
-
Use of Bullets and Icons:
- Are the icons hand-crafted or they have been sourced from ready-to-use lists?
- What is that special in a bullet or an icon that makes other components of a page stand apart?
- Can the existing icons be modified or the new icons can be created if source files are available?
These are only a few checklists among many. You may unearth more with time.
4. Read Documentation and Practice Locally
Every design template, be it of a landing page or a CMS, comes with a descriptive documentation that helps you install and configure a template in no time. A good documentation provides you every bit of information that gets you going right from the scratch.
Fig: A Sample Design Documentation
Image courtesy: Product Documentation User manual
You just need to follow the steps methodically and inculcate the habit of configuring templates as many ways as you can. It is pretty simple. For a landing page template, or a CMS template, all that you need to do is to install a free version of a template, host it on a local server and then study the standard configurations well. Once you start tweaking them you will learn more about the workarounds and their reasons behind. This is a great lesson indeed which will help you become a pro with time. Of course, you need to have a basic knowledge of using graphic tools such as Photoshop, InDesign, Illustrator and other popular web technologies such as HTML5 and CSS3. Knowledge in programming languages like PHP, Java is always an added advantage.
If it is a PSD template you want to test, just look out for the graphic design source files (for example, Home Page PSD, Subpage PSDs) and then learn how they have been used for a set of standard page elements such as Contact Form, Icons, Text area and News feed. With raw source files you can actually do a lot than you think.
Ecommerce and flash templates, in comparison are more complex in nature and therefore demand more technical abilities. Reading documentations therefore, work only if you know the core technology and can modify code as per your understanding.
5. Build a Healthy List of Templates
This is where most of the designers fall short. You cannot build a comprehensive list unless you have an urge to do it. It is not a weekly or monthly project that you undertake for a certain period of time and then suddenly stop it. Rather, it is a continuous exploration and experimentation that develop your skills with time – slowly but steadily. This demands patience, perseverance, and an honest effort.
However, if you are still not sure how to start, I can definitely share a few links of free stuff here. Why don’t you create a similar kind of lists today once you are done with my post?
I. A good collection of free HTML5 and CSS3 templates
II. 35 best free bootstrap templates of 2015
III. 50 Free PSD templates for UI design
IV. 50+ Best Free Responsive WordPress themes
The list is endless once you start searching them in Google. Take a notepad, write down what special you have noticed in a template today and why, and then revise the entire list once in a month. This ensures that you don’t miss out on the new things during implementation.
6. Follow Best of the Best Designers
There is nothing like following the masters to become a master yourself one day. Let’s make this job simpler for you. If you are on Twitter, just follow these 75 of the best designers and you will get quick updates whenever there have something new thing to offer. You may also consider taking a help of Photoshop tutorials or learn something new from the design experts. Most of the times, you will find these resources free for-ever.
Last but not the least, share your templates with your friends and peers. Ask them to exchange design ideas and resources with you and others, so that all of you can build a healthy environment for learning new things in collaboration. It is inspiring as well as rewarding. If you organize a ‘Template Contest’ and ask your friends to participate in it, it is real fun. This will not only motivate you to increase your collections, but also gives you an access to best of the collections that you could not have collected all alone.
Author’s Bio: William Johnson belongs to the most creative field of digital media, Web design. Currently he is obsessed with the latest trends in eCommerce development, online marketing, Magento eCommerce and lots more. William also runs free consultation programs on web designing tips, Internet marketing trends and more for his set of readers. He suggests you visit Big Eye Deers to learn more about how to design eCommerce websites. To William, creativity comes with new challenges and he loves to take them on. Follow him at Google+ &Twitter.
