Website template designs are very popular among modern web developers. Working within a template design can save boatloads of time when under the deadline crunch. Not only this but most source code is created within HTML5/CSS standards and allows for simple customizations.
There are a few techniques which can be utilized to develop the best templates. Designers and developers alike frequently create templates and offer them for free download to the community. Color theory, grid design, layout structure, and content development all play key roles in the creation process. Check out some of the tips below and see how you could integrate these ideas into your work.
The Web Template Market
The demand for websites has grown exponentially over the past 5 years. Businesses are requiring a web presence and many are even losing customers from a lack of digital connection. This is what makes website templates so attractive.
Not only are template designs cheaper and easier to manage but they also require much less maintenance and provide lucrative specs. The community of freelance web designers has grown and the amount of talent available today is phenomenal. Many of these designers are able to make a living selling straight business templates, WordPress templates, and many other pre-built themes.
As we move forward I can only imagine this market will be expanding. The demand for affordable website designs will skyrocket and many customers are happy with a non-unique template. What is important is accessibility, clear-cut source code, and helpful documentation.
Define Layout Areas
In accordance with many website templates it’s common practice to create a small wireframe or mockup beforehand. In this way you can clearly label aspects of the template you want to accentuate (i.e. footer, right sidebar, heading navigation).
Grid design can help with this step. The application of an overlying grid will sort out content proportions evenly. Grids can help to determine how wide to make your primary container, how many columns to run, along with other nifty state properties. Glance over the ideas behind golden ratio in web design and it should be simple to set up a precise template layout.
It may help when coding the layout to set comments into your HTML code. These can be done in a systematic way so that searching through divisions can become much less of a hassle. As an example I’ve included some demo code below to break up primary content from footer content.
<!-- //primary begin --> <div id="primary"> *content here </div> <!-- //primary end --> <!-- //footer begin --> <div id="footer"> *footer content here </div> <!-- //footer end -->
Graphics and Colors
Creation is a multi-step process for the web. Digital graphics have evolved and many new trends are in place come the end of 2010. Try doing a bit of reading on icon design and digital color theory. Application of these skills into website templates will generate unique ideas and powerful trends.
Consider a basic business template set with a logo, stock photos, and some home page content. When creating a website template you are not designing for any single client or project, so the need for generalization is intensified. Generally blues, greys, dark browns and even distant colors such as purple and green will work. Businesses are looking for a confident color scheme to back their products.
A school blog, on the other hand, may have a completely different direction. Perhaps bright colors such as yellow and orange are more prevalent. This is why the planning stages are so important for template design. Try listing out some common attributes and figures backing your idea. Templates are built to work in a multitude of scenarios so they must be flexible yet still hold creativity.
Written Template Copy
All websites are going to contain even a small amount of text. The web is mostly used for the digital transfer of information so unless you’re developing a photo portfolio or video blog, much of your page’s content will be text. This is another important aspect to consider when developing styles. What type of design are you creating and how should typography affect the page layout?
A good way to get started is by coding major typographic elements into the template draft. This can be all page headers, paragraphs, hyperlinks, formatted code blocks, and truly anything you may need. From here it’s much easier to manipulate CSS properties to match design styles.
Flashy text can make or break any good template design. Make sure your heading titles truly stand out. Bold, large font with a complementary color and possibly other frills is essential for
h2 tags. Consider possible underlines, bottom borders, font stacks and the many possibilities with background images.
Paragraph text should also be large and hold just enough room to be noticed. Many visitors will not be reading every paragraph down to the letter, but it is important for these blocks to stand out. Calculate proper line-height arguments so lines of text will have enough spacing in-between to breathe. Bottom margins will also help remove clutter and add vertical spacing to your page.
To really sell a template design you may consider adding features not found standard in most websites. jQuery is a powerful library which can implement dynamic apps on-page with ease. These can include drop-down navigation menus, photo slide-shows, and Ajax-updated news feeds.
Check out a few popular jQuery tricks as you may find some worth installing. A design can look pretty but without functionality no web designer in their right mind would bother. Corporations and clientele expect just as much effort to be drawn into the user experience.
Flash is another alternative when it comes to page widgets. An auto-updating Twitter feed would be well handled through Ajax and Twitter’s API. However with a photo slideshow or portfolio display it may be easier to design a Flash-based script. The only problem here is the lack of mobile support Flash garners, which ultimately isn’t too big of a deal. Overlooking this the addition of Flash-based elements will greatly improve the credibility of any website template.
Targeted Distribution Channels
After you’ve successfully developed a template you have the choice of what to do with it. Many developers will offer the source code under Creative Commons and allow anybody to freely download project files. This is a great option since you may get your name out there while showcasing the type of work you are capable of.
Many designers will start their own template shop or sell to others. Template Monster is the current titan of industry offering well over 25,000 unique template styles from over 6 years online. Not everybody is able to get in to their program for selling templates, though designers who have been in the roster for a while are making a very decent living.
Brightegg is another marketplace which offers rewards to template designers. Though not as popular as the mainstream brands, you can register an account for free and submit template designs for review. When accepted your art will be listed in a template library, organized by tags and user reviews. Template sales can range upwards of $500 for unique purchases, thus the possibility to make a few bucks is much higher.
The alternative is to launch some type of digital cart or online blog. From there you should be able to list your template’s design, features, and offer screenshots with download links. This option is by far quicker than trying to sell off templates elsewhere, though a bit of marketing is required to reach any audience.
Website templates have shown a great rise on the scene over the past couple of years. Major template resellers have been raking in profits from simple designs and now is the most profitable time to sell. Businesses all around the world are looking for a stronger web presence at cheaper costs.
These tips include just a few of the trends following the market. Check through other design networks to see what web designers have been doing in regards to recent designs. Templates can be found through the countless web design blogs online along with counter-culture communities such as Designmoo.