Well-crafted templates to help you build an excellent website.

Using website templates for your website layout might have something of an iffy reputation among web designers and developers, but there are plenty of decent examples out there, crafted by some truly smart designers. For creatives without a web design background, and for web professionals alike, these website templates provide amazing web design inspiration.

• 18 web design tools to speed up your workflow in 2018

To illustrate the point, we've rounded up some good options that might open your eyes to the possibilities that templates have to offer – at least when they're created by people who know what they're doing. 

These web templates are designed for Bootstrap, HTML5, Adobe Muse, WordPress, Tumblr, Jekyll, Perch, SASS, Statamic and Ghost. At a range of price points (including some for free), there should be a template here that's ideal for your website.

01. Benri (WordPress)

If you like free stuff, then Benri's WordPress theme is well worth checking out. It'll cost you $49, but it comes with $91-worth of premium plugins that'll help you quickly build the site of your dreams. It's a multi-purpose responsive theme that comes with Visual Composer, Ultimate VC, LayerSlider and more besides, and if you need to get up and running quickly it features a huge collection of ready-made demo sites that you can install with a single click.

02. Tersus (Muse) 

For a great way to create elegant and professional portfolios, take a look at Tersus for Adobe Muse CC. For just $25 you get a collection of 14 ready-made high quality responsive template designs, many of them with must-have features such as parallax scrolling, full-screen video and dynamic slideshows. There are hundreds of fonts to choose from through Typekit, as well as integration with Wow.js and Animate.css for creating smooth reveal animations.

03. Rhythm (HTML5)

Rhythm is a fully responsive template form single- and multi-page sites, and at just $17 it gives you plenty of features and choice for your money. This Bootstrap-powered HTML5 template features over 50 pre-built demo sites to work with, plus over 40 portfolio pages, with easy-to-customise backgrounds, colour schemes and content as well as parallax sections and deliciously smooth animation.

04. Composer (WordPress)

Composer's not exactly cheap at $60, but you'll get a lot of use out of it. It spoils you for choice from the off, with over 70 ready-made demo sites for you to go to work with, covering just about every web design possibility, and it makes it easy to create your own layouts from scratch.

It features ultra-responsive layouts and WooCommerce integration, comes complete with some free premium plugins, and the developers are always keen to receive suggestions for new designs and features.

05. Flaunt (Muse)

If you're keen on cool hover effects but you're using Adobe Muse and finding it a little difficult to implement them, Flaunt may be the answer to your problems. As well as being a simple and fully responsive template, it bypasses Muse's hover effect restrictions with some custom CSS. 

With over 50 slick hover effects for both images and text to choose from, you'll be able to create stand-out Muse sites without difficulty, and at just $16 Flaunt is a bargain buy, too.

06. Definity (Bootstrap)

A multipurpose single and multi-page template by Ocarine Themes, Definity is built on Bootstrap 3 and comes crammed with stuff. 

It's 100 per cent responsive with cool features such as video backgrounds, hover effects and parallax scrolling, and its modular design makes it easy to move sections of your pages around until you've nailed your layout. Priced at just $29, Definity features multiple website templates and shop layouts.

07. Enfold (WordPress)

Designed to be the most user-friendly WordPress theme ever made, Enfold is a versatile and fully responsive theme suitable for business sites, online stores (with WooCommerce support) and portfolios. 

Its drag and drop template builder is just the thing for creating your own layout, but it also comes with a stack of ready-made demos to inspire you. The regular licence will cost you $59, which includes future updates and six months' support.

08. Porto (HTML5)

The basic HTML5 version of Porto will cost you just $16 and features a stack of homepage styles as well as unlimited header layouts and a style switcher that enables you to customise your site on the fly. 

It's also available in WordPress, Drupal and Magento flavours, with an additional admin version so you can manage your site much more effectively with a swish dashboard and all the widgets and charts you can eat.

09. Maple (WordPress)

There are six reasons you'll love Maple, say its developers: its bold and unique design; the fact that it's responsive and retina-ready; the way that it features light and dark styles; its parallax header backgrounds; its multi sidebar support; and how super-easy to use it is. 

With 15 layout combinations plus plenty of features and widgets, at $49 it gives you your money's worth.

10. BeTheme (HTML5)

Why settle for one theme when you can have over 210? Described as the most complete, comprehensive and flexible HTML template for business or personal websites, BeTheme is simply crammed with stuff. 

Fully responsive and retina-ready, with all the parallax and smooth scrolling features you'd expect, it's an absolute monster and the biggest headache it'll cause you is trying to choose from the enormous selection of pre-built sites. For $18 you can't go wrong.

11. NOHO (Muse)

Designed with creative professionals in mind, NOHO is built to be easy to edit in Adobe Muse, enabling you to get your agency site or portfolio up and running in record time. 

Its templates come in desktop, tablet and mobile flavours and in multiple layouts, and you'll find ample features such as image sliders, parallax scrolling and CSS rollover effects. The results are clean and eye-catching, and it's yours for just $22.

12. Jupiter (WordPress)

Jupiter confidently describes itself as the world's fastest and lightest WordPress theme ever, and its latest version been completely reviewed and rewritten to deliver lightning-fast pages that won't thrash your CPU or drain your batter.

It uses GPU rendering to deliver smooth parallax scrolling, it features adaptive image resolution to ensure that pictures look great regardless of devices, and it comes with over 85 templates in case you don't have time to build your own pages with its drag and drop interface. It's not cheap at $59, but the results are worth it.

13. Summer (Ghost)

Developer PXThemes specialises in Ghost template and themes, and Summer is one of its most popular offerings. 

For $19 you get a simple and clean template with plenty of options to help your content stand out, including author pages and full screen covers, parallax blog background covers, and Foundation 5 and Disqus integration.

14. Type & Grids (HTML5/Statamic)

Jeremiah Shoaf's seemingly on a mission to free people from complex content management systems, so Type & Grids embraces the notion of the flat-file CMS.

The portfolio and marketing templates are extremely fast, boast a number of variations, and have some very smart typography. They'll work as-is, entirely for free, but Shoaf offers various tiers for pro use, and adds that Type & Grids works nicely with Statamic.

15. Ness (WordPress)

A lot of modern themes concentrate on stark minimalism and type, but Ness is far more interested in imagery, aiming for people wanting to rapidly get a photo blog or magazine up and running. 

Priced at $39, it's Retina-ready and mobile-friendly, and in use feels like high-end photo journal app such as Storehouse.

16. Bootstrap (HTML5)

"Um, hello?", you might be saying, given that Bootstrap's really a framework rather than a template. This is true, but as the examples section showcases, even the Bootstrap defaults look pretty good if you've a design idea in mind that utilises a lot of rich imagery and backgrounds. 

It's just a few tweaks from a beautiful minimal creation – and that's even faster if you peruse Bootswatch's free themes.

Next: more top-class website templates

17. Yuga (Muse)

If you're using Muse and you want plenty of options as well as value for money, look no further than Yuga. Billed as a 6-in-1 creative multipurpose true parallax template, it comes with six themes with plenty of transitions and animation that are easy to implement. 

It has loads of online documentation, including step-by-step editing tutorials, and it's yours for just $20.

18. Avada (WordPress)

Avada ($60) claims to be the best-selling WordPress theme of all, and it certainly has a lot going for it. 

It might be a third-party template, but the underlying framework is flexible enough to enable the crafting of all kinds of design styles, and there are tons of user-friendly tools and options for subsequently fine-tuning the resulting site.

19. Vitality (Bootstrap)

Vitality is billed as a time-saver for anyone wanting to rapidly get a versatile, responsive one-page site live. 

Just $14 gets you the licence, and the template boasts six sample layouts, three page styles, 10 colour schemes, a PHP contact form, and optional full-page image backgrounds and video background headers.

20. Huge (Tumblr)

This $19 website template by Precrafted is aimed at people wanting a blog that is heavy in imagery and videos. Many elements can be fully customised, and keyboard navigation makes it easy to quickly jump between posts when using traditional keyboard input. 

The design also includes a fixed (but not distracting) menu and options for controlling how photos appear.

21. Red Cap (HTML5)

This one's a single-page HTML5 template, based on Bootstrap, boasting plenty of customisation options and a MailChimp subscription form. 

It's primarily aimed at people wanting to create 'coming soon' landing pages for upcoming projects or products, and for $7 it saves you the hassle of smashing together countdown scripts and the like yourself.

22. Mediator (Jekyll)

Another creation that's heavily focused on content, Mediator is a responsive, minimal template for Jekyll by Dirk Fabisch. It's also available for free.

It has support for featured articles, enables the use of header images, and includes FontAwesome, in order that you can easily work with icon fonts.

23. Oblivion Magazine (Tumblr)

Aimed squarely at journalists and publishers, Oblivion Magazine is a responsive Tumblr template that's crammed with customisation options, features and widgets.

It includes a custom preloader and fancy loading animations, multiple authors, reading time info and SoundCloud player. Made by adraft, it's a steal at $24.

24. Valenti (WordPress)

Where Valenti largely succeeds is in its flexibility and richness. This is a template primarily designed for magazine-oriented sites, and it's packed with options for vibrant home pages, full-background image styles, and parallax. 

Priced at $59, it's also high-res- and mobile-ready, provides alternatives for review ratings, and makes it easy to craft mega-menu navigation.

25. Free Minimal Responsive Theme (Perch)

Perch isn't a product that necessarily lends itself to templates in the traditional sense, but Laura Kalbag created a default some time back, as a starting point. Clift Walker's minimal theme comes from similar thinking, giving you a little extra help to get started. It's a simple, sleek foundation on which to build.

26. Muffin (SASS/Jekyll)

Richard Bray's Muffin is a design-focused frontend web template that uses SASS, Jekyll and Gulp. Aimed at the reasonably tech-savvy, the template includes colour variables, SASS media queries, HTML includes and SVG icons. 

It comes in four 'flavours' based around the kind of website you want to design, and it's free.

27. Lychee (HTML5)

Powered by Twitter's Bootstrap 3 framework, Lychee is designed as a professional portfolio site theme. It produces valid HTML5/CSS3 pages and features over 30 pages, six homepages, 20 portfolio pages and two blog styles, all of them perfectly responsive. 

Excellent parallax effects pair with a clean and professional design, and the whole package will cost you $15. It's also available as a WordPress template.

Related articles:

• Best free WordPress themes
• The best free web fonts
• 50 brilliant design portfolios to inspire you

Explore the world of Layer Styles in Photoshop.

Photoshop is one of the best photo editors around, but it can take a while to get to grips with its extensive toolset. Luckily, there are plenty of Photoshop tutorials to help you navigate it, including this one, which covers working with layers in Photoshop.

• Sign up to Adobe Creative Cloud with our exclusive discount

Arguably the software's single most important feature, layers enable non-destructive editing, where you can make changes to images without having to make them permanently. Think masking on a layer mask rather than erasing parts of your layer forever, or even just duplicating your entire document to another folder while you do something a little risky to it. 

Layer masks fit into this category, too. They’re quick fixes that you can apply to layers to make them stand out from the layers below them. Best of all, anything you apply to your layers – whether it’s a glow, a shadow or even a complete remodel of it via a bevel – doesn’t have to be forever.

How do you create a new layer in Photoshop?

There are two ways to create a new layer in Photoshop:

• Choose Layer > New > Layer
• Click the New Layer button in the Layers panel

Now that you know how to create a new layer in Photoshop, we're going to look at how you can use them, focussing specifically on Layer Styles. Just like other layers, Layer styles can be stacked, and by using the Fill, you can reduce their Opacity without changing the Opacity of the layer that they’re applied to.  

Remember, when you’re finished, if you wish, you can use the Rasterize Layer Style option to set it permanently – destructively, if you like. Let’s dive into how you use layer styles on a simple digital illustration, which is made up of a number of layers of selections, created with the Pen tool. 

01. Make the most of bevel and emboss option 

You can access bevel and emboss options by clicking Layer>Layer Style>Bevel & Emboss. You can also choose other layer styles from this window. 

Bevel and Emboss are shaping tools for giving your objects subtle contour and volume. They apply natural-looking highlight and shade to your selections, and you can even go as far as to pick a specific style and smoothness of the effect. 

Depth determines how dramatic the effect you’re applying is, and creates more or less light and shade. Size will determine how big the effect looks on the object, while then the Soften slider creates a rounded finish to the bevel.

The Angle option will help you to align the light from a specific direction, and Global Light will enable you to have all objects with layer styles following the same light direction. Use the Contour feature to alter the texture of the bevel itself.

Highlight and Shadow Mode are two sliders for completely controlling the light and shade, from how severe it is to how it hits the object. Use Overlay for both for subtlety, and use Screen and Multiply respectively for a more severe effect, for example. 

02. Multiple ways of working with overlays

There are so many ways to fill a selection with colour, but Gradient, Pattern and Color Overlay in Layer styles are three of the most reliable. These colours will fill the object whether you move it or not, and you can even change the Overlay’s Opacity and Blend mode. 

You can alter the direction that you wish for the gradient or pattern to follow, by using the Angle icon. The Gradient box should be used for selections of colour, in a similar way to how you might clip a layer to another layer as a clipping mask. Overlays are capable of altering the Opacity or Blend mode to react in different ways. 

03. Apply a drop shadow to your art

When working with layers in Photoshop, the Drop Shadow is one of the most versatile Layer Styles that you’ll come across. It’s not only used for the obvious, fuzzy black space  behind objects, but it can be used for an almost unnoticeable way to make an object stand out in a painting.

Distance can help position your shadow a little further away, and the Spread slider can control the density of your shadow. The size will determine how big it appears; reduce it right down to have a completely hard edge.

Blend mode and Color are what determine how your drop shadow reacts with the layers below. Choosing a dark colour and Multiply will create a shadow effect, while a light colour and Screen will introduce more of a glow effect. 

And just like with the Bevel & Emboss section, Contour can help you to change the actual texture of the shadow, when combined with Noise. This isn’t commonly used, but is still worth experimenting with nevertheless. 

04. Alter the intensity of light with the Glow layer styles

The Inner and Outer Glow layer styles are two of the most popular available for controlling light or shine. They’re mostly used just with a bright white colour, but this doesn’t mean you can’t apply them to other colours.

Pick a colour and gradient with the options available. Using a gradient can be useful if you only want the glow to appear over some of the object. 

Opacity and Noise can help to define exactly how bright and clear the glow itself looks. Change the Blend mode too to alter the way the glow looks against the colours behind it   

The Elements box will help you to set a Choke and Size. This controls the intensity of the glow to a degree; the smaller these numbers are, often the more realistic it looks. 

05. Emphasise an object's appearance with a Stroke

Perhaps the simplest layer style of all, the Stroke option is just a basic outline around the inside, outside or centre of your object. Change the colour and blend mode, and use it to make some selections stand out a lot more than others. 

If you choose the inside option for the Position, the stroke will likely have sharper edges; if you choose Outside, the stroke will curl around pointy edges in your selection. Centre is the midpoint of these two styles. 

The Size slider is the most important when it comes to Stroke. Use it to determine whether you want a thick, obvious line around your selection, or a hairline stroke to just subtly highlight a selection.

The Color and Fill Type options are there to choose the important details. Again, use a gradient if you only want a partial stroke around your object.

This article originally appeared in ImagineFX magazine issue 161; subscribe here. 

Read more:

• The 10 commandments of Photoshop etiquette
• 5 best laptops for Photoshop
• The 60 best free Photoshop brushes

Improve your coding practices for faster mobile performance, and more.

If you’ve ever worked at a large company, you'll have probably encountered a situation where crucial information about how something works has gone missing – so this month we take a look at Slab, a new tool that provides a home for all your important info so it doesn’t get lost. 

There’s also a resource from Google engineering manager Addy Osmani, which provides great advice on improving mobile performance by doing smarter things with JavaScript, a really fun creative coding tool and much more. 

01. Slab

Slab’s purpose is to solve the problem of information-recording within organisations. In this Medium post the founder describes a scenario in which his company was acquired, and his team was tasked with integrating their product into the existing infrastructure of the parent organisation, but they struggled to find anyone who could tell them how. Eventually they tracked down the engineer who built it, who pointed them to a long-lost Google Doc that everyone had forgotten about. 

Without a proper home for the crucial information about how things work, this happens a lot, especially when staff move on and companies grow rapidly. Slab is designed to organise information about your company's working processes efficiently and keep everyone up-to-date, and it integrates with all your other tools such as Slack and GitHub. 

02. The Cost of JavaScript

This must-see resource from Google Chrome engineering manager Addy Osmani has some important data about how much JavaScript slows down your site on mobiles, as well as some techniques for reducing the bloat. He tells us that JavaScript is the most expensive resource we send to phones because it has the most potential to delay interactivity. And he says we should all be seeking to minimise its use by auditing and trimming JavaScript bundles, only loading code needed for the current page, embracing performance budgets, and looking for other ways to get the job done where possible. 

03. Lighthouse

How well is your site doing in terms of performance, accessibility and best practices? This Google tool will tell you. It runs audits on any URL you feed into it and generates a report that explains why each audit is important, and what you can do to improve any aspects that are failing. As well as performance and accessibility, it can audit for SEO and Progressive Web App best practices. You can run it from Chrome DevTools, from the command line or as a Node module. 

04. Pts

If you’ve ever been tempted to try your hand at creative coding, this could be a great place to start – Pts is a JavaScript library that makes it easy to code animations, data visualisations and fun web-based toys. With a single line of code you can draw something that follows the mouse pointer around the canvas, and from there you rapidly progress to creating more complex interactions. There are plenty of guides and documentation to teach you how to use it, so you won’t be flying solo. Check out the demos at the bottom of the homepage to see what’s possible. 

05. My Browser

Getting browser information from users for bug-fixing purposes can be slow and frustrating, so front-end developer and designer Andy Bell built this great tool to make it easy to get all the pertinent data. Instead of dealing with vague bug reports, you can send the user the URL of this tool, and a report on their system is automatically generated when they visit the site. They can then share the report URL with you so you can see their exact browser version, viewport size, operating system and other useful info. The creator has made sure that data is properly anonymised so users don’t have to worry about their privacy. You can read more about it here.

06. Dyslexie font

The designers of this font disregarded the principles of type design, and instead used the characteristics of dyslexia to create a font that is easier for dyslexic people to read. It's designed to minimise the effects of common reading errors – for example, letters are heavier at the bottom  to help prevent them from being perceived as being upside-down; the openings of letters are enlarged so that they are more easily recognised; and capital letters and punctuation marks are bold to emphasise breaks and endings of phrases. It's received great feedback from users, so it’s a good option if you want to make your site more accessible.

07. Notist

The team behind Perch CMS have created Notist, a place to create a public speaking portfolio so you can display slides, links, feedback, tweets, photos and everything connected to your talks. You can add a future schedule so that people can see where your next talk is, and have a resources section for conference organisers so they can download your headshots and other materials without needing to contact you. It’s free for casual use, and there’s a Pro account for regular speakers. It’s also a great place to browse and discover interesting talks. 

08. StyleURL

StyleURL generates a URL that you can use to preview CSS changes on a live site – it automatically loads your CSS changes into the existing site, so you can see what your changes look like and also share them with others. StyleURLs are saved in a Gist in GitHub so that you and others can easily update them later. 

09. Flexible Typesetting by Tim Brown

Tim Brown is head of typography at Adobe and in this book, which Ethan Marcotte describes as “an absolute delight to read”, he explores how we can seek to set online type successfully, while navigating the difficulties that arise when we don't know exactly how our text will appear. Rather than choosing parameters for text, we design our websites to do that for us depending on the conditions in which our work is being consumed – this book guides you through that thorny process.

10. Moceen

This simple app makes it easy to create an image of your app or site being displayed on a device of your choice. There's a selection of several mobile and desktop devices – pick one, and then upload the screenshot of your site to immediately create an image of it on the device that you can share with clients or use on your website. 

Related articles:

• Beware the cutting edge of web design
• 5 techniques to help you find your ‘flow state’
• Agile development: why and how to use it in your web and app workflow

But there's a new elephant in the room...

It's been 10 years since Evernote hit the scene. Throughout the last decade, the mobile note-taking app has been there to help us record ideas and remember what we're doing. 

To celebrate its anniversary, Evernote released a rebrand and new logo design earlier this week, after partnering with DesignStudio to bring its vision to life. This involved a long, hard exploration of what the Evernote brand meant and stood for, to create a design that signalled change – without reducing brand recognition.

On Evernote's Medium post about the overhaul, it's interesting to see the team acknowledge that there's more to a rebrand than simply changing a logo. The new design (above) is a polished – yet contrasting – version of the previous iteration (below) and gives a good indication of the concept underlying the design: this is a brand that’s rooted in heritage, but has expanded into new areas. 

A purer colour palette, refined shape and more sophisticated font can all be found in the new logo. To keep the redesign focused, the teams kept a number of questions in mind at every strep of the rebrand. Namely: is it distinct? Does it embody the DNA of the brand? And is it better than what they already have? These considerations also influenced the new typography, textures and photography on the Evernote app and site.

No design element went left unchallenged during the rebrand process. At one stage, even the familiar Evernote elephant mascot, Mads, almost got the chop in favour of a different logomark altogether.

"Throughout the process of evolving our brand, we have looked to our past for inspiration for our future," explains Evernote CEO Chris O'Neill. "We started as a place to remember everything, and that will never go away." 

"But bringing ideas to action and helping people to work together have become equally important to our customers, and therefore equally important in the products and experiences we build. Our brand now reflects our broader purpose and is a public declaration of our excitement and optimism for Evernote’s future."

The rebrand isn't over yet though. Evernote's redesign is set to change and evolve along with the company, but you can watch the first step towards the new look in the video below.

Related articles:

• New Burberry logo is stripped of knighthood
• Help design the new Firefox logo
• The best logos of all time

Creatives reveal the hidden gems in their hometowns.

Time to increase your employability.

If you want to stay competitive in today's workforce, you'll need to constantly be educating yourself. And unlimited knowledge is exactly what you'll get with SitePoint Premium Courses: Lifetime Subscription.

With this subscription, you get premium access to a massive collection of courses, e-books, tutorials, and more on all different kinds of topics. Whether your interest lies in blockchain technology, JavaScript coding, web design, or project management, you'll find training opportunities to learn important skills. Increase your employability in the workforce, and become a better employee at your existing job. 

Enjoy unlimited downloads, and get immediate access to new content when it becomes available – new stuff is added every month. Try SitePoint Premium Courses: Lifetime Subscription for just $39.99 (£31.47).

Related articles:

• Customise sites with these responsive WordPress themes
• 28 outstanding examples of CSS
• Why you really do have time for creative side projects