alexa rank cert Design Tutorials and Articles

Most Popular Topics

first person shooter game in ue4
A screen shot from the completed FPS game in UE4

This series aims to guide you through the process of creating a first person shooter game using 10 specifically created tutorials, each focusing on a different aspect of designing and creating the game.

The series was created by Nathan Hill, Dylan McGrath and Philip Evans. The game itself is available for download here

This video series is a follow up and update on our previously created text tutorial series available here.

You can watch all the tutorials in the playlist right here (below) or go to our YouTube channel

Create an FPS game in Unreal Engine (UE4)

Different Furniture Styles
Can You Identify These Different Furniture Styles...?
Furniture design has been a part of the human experience since the beginning of history and as such there are a vast array of furniture styles that have developed over time. Some have faded away and can now be only found as antique furniture but other furniture styles live on through reproductions in that style. The fact that some furniture styles are still reproduced and mimicked is testament to the quality and style of that furniture that it is still in demand today.

It can be very difficult to differentiate between these styles though and you may have heard phrases like a "Queen Anne Chair", a "Shaker Kitchen" or "Bauhaus Nesting Tables" without being able to visualise what that actually looked like. Well that is where this article comes in handy as we will list all the main furniture design styles and outline their identifying features so you can tell your Art Nouveau from your Arts and Crafts!

This article outlines the following furniture design styles ...

Egyptian Furniture

Egyptian Style Furniture
Egyptian Style Furniture

When we think of Egyptian furniture we imagine the intricate gold gilded ornate furniture found in the tombs of the Pharaohs as opposed to the simple chairs, tables and baskets of the ordinary Egyptians.

The identifying features of ancient Egyptian furniture are...

  • beech wood and mahogany 
  • ornate designs using different colors 
  • depicting animals, gods and goddesses 
  • gold gilding and inlays 
  • mosaic designs 
  • mother-of-pearl inlays

Greek Furniture

Greek Style Furniture
Greek Style Furniture

Ancient Greek furniture is possibly still most remembered for the famous klismos chair, shown above.

The identifying features of ancient Greek furniture are... 

  • elegant and tasteful
  • detailed carving and inlays
  • select detailing, not cluttered
  • comfortable rather than decorative

Renaissance Furniture

Renaissance Style Furniture
Renaissance Style Furniture

Along with the other arts, the Italian Renaissance of the fourteenth and fifteenth century marked a rebirth in furniture design, often inspired by the Greco-Roman traditions.

The identifying features of renaissance furniture are... 

  • ornate and opulent
  • form above function
  • gilded designs 
  • floral, vegetable and scrolling ornamentation

Jacobean Furniture

Jacobean Style Furniture
Jacobean Style Furniture

After the Renaissance there was a gradual change to a less ornamented, quieter style of furniture.In general furniture profiles became lower and more rectangular.

The identifying features of Jacobean furniture are...

  • stern, square, and frugal
  • colourful upholstery with tasselled trim
  • straight lines & rigid designs
  • sturdy construction
  • dark finish

Queen Anne Furniture

Queen Anne Style Furniture
Queen Anne Style Furniture

The Queen Anne style is a style with a moderate proportion and graceful appearance. It is named after Queen Anne of England who reigned from 1702-1714.

The identifying features of Queen Anne furniture are...

  • graceful and refined
  • cabriole legs terminating in a pad or drake foot
  • fiddle-back chair backs
  • bat wing shaped drawer pulls
  • cushioned and covered with fabric

Colonial furniture

Colonial Style Furniture
Colonial Style Furniture

These pieces were generally sturdy and heavily carved, many with turned legs and bun feet. In the harsher environment of some of the Colonies these pieces were simpler representatives of their parent styles, befitting the more straightforward and utilitarian life of the settlers.

The identifying features of colonial furniture are...

  • less ornate than European furniture of the same style period
  • combing features of previous styles
  • variety of wood types used
  • chair arms have slight outward curve

Rococo Furniture

Rococo Style Furniture
Rococo Style Furniture

In the eighteenth century, furniture design began to develop rapidly and styles such as Rococo and Neoclassicism were commonplace throughout Western Europe.

The identifying features of Rococo furniture are... 

  • Natural motifs
  • Elaborate carved forms
  • Asymmetry
  • Curved forms are common in Rococo
  • Rocaille carving
  • Acanthus leaf

Shaker furniture

Shaker Style Furniture
Shaker Style Furniture

The Shaker style was produced by the religious group the United Society of Believers in self-contained communities in the United States.

The identifying features of shaker furniture are...

  • simple, utilitarian style 
  • straight tapered legs
  • woven chair seats
  • and mushroom-shaped wooden knobs
  • rectilinear and attenuated forms
  • restrained ornamentation

Back to Top

Victorian furniture

Victorian Style Furniture
Victorian Style Furniture

The Victorian style draws its influence from previous Gothic forms. It is named for Queen Victoria of England who reigned from 1837-1901 and was the first furniture style of mass production.

The identifying features of Victorian furniture are...

  • heavy proportions
  • dark finish
  • elaborate carving and ornamentation.
  • somber appearance
  • balloon-shaped chair backs

Arts & Crafts furniture

Arts and Crafts Style Furniture
Arts and Crafts Style Furniture

Arts & Crafts furniture is simple, with straight lines and little ornamentation.The terms Mission and Craftsmen can also used to describe Arts and Crafts furniture.

The identifying features of Arts & Crafts furniture are... 

  • rectilinear design
  • simple, straight construction
  • exposed joinery
  • using medium or dark stained oak
  • bail handles with rectangular back plate

Art Nouveau Furniture

Art Nouveau Style Furniture
Art Nouveau Style Furniture

The name "Art Nouveau" is French for 'new art', and it emerged in the late 19th century in Paris. The style was said to be influenced strongly by the lithographs of Czech artist Alphonse Mucha, whose flat imagery with strong curved lines was seen as a move away from the academic art of the time.

The identifying features of Arts Nouveau furniture are...  

  • intricately detailed
  • lines and curves used as ornamentation
  • inlays and veneers also used
  • hard woods and iron commonly used
  • strong yet slim furniture pieces
Back to Top

Bauhaus Furniture

Bauhaus Style Furniture

The Bauhaus school was founded by Walter Gropius in Weimar in 1919. In spite of its name, and the fact that its founder was an architect, the Bauhaus was founded with the idea of creating a 'total' work of art in which all arts, including furniture would eventually be brought together.

The identifying features of Bauhaus furniture are...  

  • minimalist & non-ornamental
  • hand crafted but appears mass produced
  • organic and natural materials
  • mainly black in color
  • smooth and rounded shapes

Art Deco Furniture

Art Deco Style Furniture
Art Deco Style Furniture

The Art Deco movement began in Paris in the 1920s and it represented elegance, glamour, functionality and modernity. Art deco's linear symmetry was a distinct departure from the flowing asymmetrical organic curves of its predecessor style Art Nouveau.

The identifying features of Art Deco furniture are...

  • practical and simple designs
  • founded on mathematical geometric shapes
  • triangular shapes, chevron patterns, stepped forms, sweeping curves and sunburst motifs
  • new materials such as aluminum, stainless steel, plastics and lacquer
  • exotic materials like shark-skin and zebra-skin.

Modern Furniture

Modern Style Furniture
Modern Style Furniture

The forms of modern furniture sought newness, originality, technical innovation, and ultimately conveyed the present and the future, rather than what had gone before it as revival styles had done. This interest in new and innovative materials and methods produced a certain blending of the disciplines of technology and art.

The identifying features of Modern furniture are...

  • new materials included laminated plywood and fibreglass
  • continued use of steel, moulded plywood and plastics
  • simple and geometric shapes
  •  regular use of polished metal
  • style considered pioneering, even shocking

Scandinavian Furniture

Scandinavian Style Furniture
Scandinavian Style Furniture

Simplicity and function are the guiding principles that have shaped the design sensibilities of Nordic Europe.

The identifying features of Scandinavian furniture are...

  • natural materials, mainly wood
  • favour neutral colour palettes
  • clean, simple lines 
  • optimal function out of every part of the piece
  • robust and fuss-free
Back to Top

Click on the demo link below to test the smooth scrolling effect

I recently added a smooth scrolling effect to this website (test here if you want a demo). It is set to trend in 2017 after all.

During my research in preparation to best implement this effect I was surprised at the variety of code options on offer and even more surprised by the fact most of them didn't work! So with that rant over, I'm writing this short post to save you the time that other websites wasted on me.

Below is the full and exact code you need to add into the 'head' section of your website in order to achieve a smooth scrolling effect for all 'anchor' links on your website.

If you want to learn more about how it works or for any troubleshooting you can read more below.

The Code...

How it Works...


Most of the scrolling magic happens offsite which is why the link to the jQuery library is necessary.
Some websites will say you should downloadand host the jQuery library yourself rather than use a CDN (Content Delivery Network) link but many users may already have downloaded jQuery from Google or Microsoft when visiting another site.

As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

jQuery is a fast, small, and feature-rich JavaScript library, and the smooth scrolling effect is just one of many effects in the library. This jQuery link must come before the other code as it needs to load before the scrolling effect will work.

The script which follows the jQuery library link then does the following...

  • waits for the page to load
  • adds the smooth scrolling effect to all links on the page (to be activated onclick)
  • checks to see if variable 'hash' has a value
  • if 'hash' has a value, it disables the default anchor link behaviour (usually jump to the link)
  • stores the variable
  • activates the scrolling effect on the link
  • gives you option to set scrolling time in milliseconds
  • finally it adds # to the end of the url


  • Check that you have copied all the code (Sometimes it's the most obvious thing that we get wrong!)
  • Make sure all the code is in the 'head' section of your webpage, between <head> and </head>
  • The code needs to be pasted into the head section of every webpage that you want the effect to work on. Unless using a CMS like Blogger or Wordpress, in that case just paste into the site template
  • Ensure the jQuery library link is before the rest of the code.
  • Check that your browser or antivirus is not blocking javascript from running.
  • jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page.

web design trends 2017
What web design trends will merge in 2017? Find out here.

2017 is here and it’s bringing more technological breakthroughs and surprising web design trends than the world has ever seen. With each passing day, the modern world hits a new record for digital advancement. The future of web design looks bright for those ready to embrace positive changes.

In this article we shine some light on the web design trends that we think will be big in 2017, so here they are, our tips for the big web design trends of 2017 ...


We think haptic technology will be a big deal in 2017
The mobile-first approach has been around for a few years now, but with mobile-phones now officially named as the primary devices used for browsing the web, more companies are realising the importance of having a site that effectively delivers content on a smaller screen. Furthermore, engaging users on mobile devices is becoming more difficult as the 'scroll' and 'swipe' design approach  used in many apps has led to users having a very short attention span when using their mobile device. This is where haptic technology comes in.

There are three sensory systems related to sense of touch in humans: cutaneous, kinesthetic and haptic. All perceptions mediated by cutaneous and/or kinesthetic sensibility are referred to as tactual perception.

The sense of touch may be classified as passive and active, and the term "haptic" is often associated with active touch to communicate or recognize objects.

Haptic communication recreates the sense of touch by applying forces, vibrations, or motions to the user through their mobile device.  Currently the Samsung Anycall Haptic enables users to feel clicks, vibrations and other tactile input. In all, it provides the user with 22 kinds of touch sensations in response to various user actions.

But how does all this relate to web design? Well, for example a strong vibration could be activated to discourage users when exiting a website or app. On the flip side a relaxing, pulsing sensation could be output from a meditation app on your mobile device. There are, of course, numerous other possibilities and I think 2017 is the year when we will see haptic technology emerge as a major feature in web and app design for mobile devices.

Back To Top


This website utilises big text and big images to dominate the screen
Images, Text and Video are all set to be big in 2017, and I mean that literally.

With the rise in mobile usage, users are reading less, scrolling more and browsing quicker so designers are having to go big to grab attention.

Full screen background images were popular in 2016 and we also saw the introduction of full screen video backgrounds too on websites such as pay-pal, more on that later though. This trend is expected to continue and become more widespread in 2017 as websites try to get their point across quickly and visually.

Large custom typography is also set to be used more to create personality, evoke emotion and set tone. As device resolutions become sharper and type becomes more easy to read on-screen, companies will look to push the limits of typography even further in 2017 to appeal to their target audience.

So expect to see an increase in over-sized and full screen type this year, hopefully it'll be of the beautiful, unique and hand-rendered type and not the bold, blocky and in your face type. We'll have more on the benefits of a custom approach later.

Back To Top


This website makes good use of space in 2 ways!

The right amount of empty space can make or break a design. Whether it is white space, a background color or image, “empty” space in a design can have a huge effect on the content that is there. if done correctly it will draw the user to the content you want them to focus on, and as mentioned earlier this is not easy nowadays!

Think about it from the user perspective. They will likely be drawn immediately to the open part of the design (whether they think about it consciously or not). From there, the eye will hop to the more populated part of the design. This simple two step process grabs users’ attention and almost shows them where to look. 

Open space is an extension of minimal styles
For this reason we think exaggerated use of space is one of those design trends that will be utilised a lot in 2017. Open space is an extension of minimal styles that have been popular for some time but, this year, rather than a symmetrical outline with space all around, web designs will balance images and text with space in a more asymmetrical format.

This simple balancing act is also visually interesting and great for making a strong impact, another reason we think it'll trend in 2017.

Back To Top


Expect to see more illustrations like this in 2017

As discussed above, the rise of mobile device and UI patterns now places UX as the most important aspect of design, meaning that many sites now look and work in similar ways. This is fine for users as they now know, instinctively, how to navigate around a website that they have never visited but it's not fine for a company who wants to stand out from the crowd.

In order for a brand to really stand out and strike a connection with it’s audience, while still using a design users can manage, they’ll need carefully considered and completely bespoke visuals which are more representative of who they really are. We can see this being a big web design trend in 2017 and is one that we really look forward to seeing.

Original illustrations are fantastic, versatile mediums for creating playful and friendly visuals which add an element of fun to a site. 

Talented illustrators are able to create illustrations which are full of personality and tailored to match the tone of the brand, something which brands will be striving for more than an ever in 2017.

A custom, purpose taken photograph is the main feature of this website

With a unique style of illustration established, brands are then able to roll that out through their entire identity, for use in large header images, custom iconography and beautifully animated visuals. Dropbox, is a great example of a brand who uses illustration to create beautiful, friendly and totally unique visuals which are full of character to appeal to their users.

This demand for originality will hopefully lead to the death of the dreaded stock imagery that we see everyday across the web and lead to a rise in more authentic photography in 2017. Brands and designers will now be thinking more carefully about the imagery they use on site, hiring professional photographers to take their shots which frame them in the way they want to be seen.

Unfortunately, it’ll probably be a long time before much of the cheesy stock photography completely disappears, but expect to see it disappear a little in 2017.

Back To Top


This website utilises a full screen video background to epic effect

One trend that grew quickly the past year is video content and we expect to see it grow further in 2017 especially as video content is now increasingly cost-effective to produce, with apps that enable quick and easy live video recording and professional-grade productions. The combination of decreasing costs of video and growing popularity of this medium is the perfect storm for video to overtake written content as king in 2017.

They say a picture paints a thousand words, but a video does that tenfold,

Video, although by no means new, is long-established and versatile medium, useful for story-telling, marketing and vlogging alike, and has several advantages over traditional photography. Where static imagery is flat and motionless, video is altogether more dynamic, using sound and movement to appeal to the senses and hold attention for longer.

Watch the video image above for a few seconds and see how encapsulating it can be. Much like with animation, a moving image on a page instantly captures the users attention, drawing them in so brands are able to get across their carefully constructed narrative and message.

Video is quickly taking over the internet, and the above reasons are testament to how successful it is as a means for content delivery. As well as using video for marketing purposes, it’s becoming more widespread in social media, with the recent releases of live-streaming services Periscope, and Meerkat illustrating the demand people have to not only view video content, but produce their own.

The benefits of video outlined above are reason enough for brands to want to incorporate it, but they are also great reasons for any freelance web designer to start using more video as a feature in their designs.

Back To Top


Top Web Design Trends for 2017
Unique and personalised online user experiences are increasing sought after
It’s no secret that responsive web design has taken the web dev community by storm. In 2017, however, we think responsive design will reach a whole new level. Instead of simply adapting based on device, websites will adapt based on each user to give them an entirely custom experience. For example a website’s content, color scheme, font sizes, and spacing could respond to accommodate a user based on their age.

If you're a marketer today you probably know that targeted emails are effective. But what happens when someone clicks through that targeted email only to end up on a static, generic website? The natural progression of personalized emails should lead to a personalized website, but limitations in technology and strategy have delayed this realization so far. There are signs, however, that the time for more personalization across the online experience has come.

A 2013 Monetate/eConsultancy Study found that in-house marketers who are personalizing their web experiences see on average a 19% uplift in sales.

When it comes to shopping online, experiences tend to fall into two categories: The almost seamless experience offered by major retailers such as Amazon or the clunky too-many clicks to checkout experience that is common among small shops. In 2017 a third could emerge, a fully cutomised web experience to suit your exact and specific needs and desires - now doesn't that sound great!

Back To Top


Web Design Trends for 2017

Consumers are drawn to systems like Siri, Cortana and Alexa, who respond to voice commands and spoken questions. Voice search developments have made this the preferred search method for many consumers, who now ask their devices questions such as “Where are the nearest shops to me?” In 2017 businesses must consider these voice searches when creating content for their websites by making it more conversational and using natural phrases instead of generic keywords.

But it's not just the content creators that need to pay attention, the web developers and programmers have a bit of homework to do too. Although there are not a lot of studies and data currently available on the subject,you can be sure that users are likely to use different language when creating a search query by speaking, rather than typing.

Here are a few simple steps that web developers can take to ensure that their websites are making the most of their potential voice search opportunities...

  • Schema is a markup language that works alongside HTML to provide information to search engines and other services that want to use the data that you provide to learn about your website. The information that you provide through schema already has an affect on your search optimization, but becomes even more important when targeting users that are using voice search. The more information that you are able to provide to search engines, the better that they will be able to understand the content on your website and connect relevant to voice searches that are performed by users.
  • A website might provide search engines with a large number of feeds that provide data and information to help them properly categorize their listings. For instance, XML sitemaps and location data are integral for helping Google to crawl the entirety of your website and help to provide information that can help your business to rank in local search engine pages. Ensure that you are providing all data that is relevant to your company in the feeds so that search engines can correctly classify and detect when your content is appropriate for voice commands and search.
  • Often, users that are using voice search are looking for very quick answers to their question. They want to know the answer and have it read back to them as quickly as possible. For this reason, you should try to ensure that the answers to common questions that users might have about your company, product, or industry are answered clearly on your pages. Frequently Asked Questions pages are an excellent way to provide quick, relevant answers to questions that voice searchers might have.

Back To Top


Design Trends for 2017
css animation loading icons
As browsers and languages become more advanced, we’re seeing more websites move away from the use of static imagery and finding new ways to engage users and be unique in their approach to communicating. Animation is one of the main ways to do this and having seen many brands start the trend in 2016 we think 2017 is going to see that trend grow further.

Animations  can come in all different shapes, sizes and styles; and can serve different purposes. For example animations can range from tiny loading-devices (see above) which entertains the user while waiting for content to load, to an interesting hover-state used as a UX device to show a user they’re hovering over a link.

They can also be used on a much larger scale, as rich, full-screen animations, which can integrated to work with scrolling, navigation or be used as the focal point of the entire site. Animation is another useful mechanic for brand’s to create meaningful micro-interactions between themselves and their users.

With such a broad array of internet capable devices ‘the fold’ is now harder to define, as users are viewing content of screens of all different sizes and resolutions. Scrolling, once reserved for getting from top of a page to the bottom, is being used in more creative capacities to deliver content online. Apple is a high profile brand making great use of scroll within their site.

Animated scrolling (as used on this website) and parallax scrolling are versatile mechanics which, when executed well, can work great with all varieties of content delivery. It works with video based content, where large full screen videos play and pause as the user scrolls, as well as static content, which can animate, move, or change depending on the users input.

With content creation happening at a far greater pace than ever seen before, and companies finding more innovative solutions for delivering their content to users, we expect the clever use of scroll and parallax effects to be big in 2017.

So web animation has many applications, but if abused, or executed badly can be disastrous to usability. However, as with most developments, we expect that as more designers experiment and gain feedback from users, it’ll be something which gets better and better, adding more functionality and additional levels of interaction.

Back To Top


There are 100’s of ‘trends’ going on in any creativity industry at any one time, and it’s hard to pin-point every single one, but we believe that the above are some of the more core ones to be focusing on in 2017 and beyond.

As with all trends, the above points have come about for good reason; as creatives and clever-thinkers across the globe have all learnt and borrowed from one another to form similar patterns which we see emerge online today. Not all of these trends may be relevant to you and your content, but it’s always beneficial to know what’s happening in the industry and to see where you’re able to improve in order to develop and progress.

With all this said, they should only be used sparingly, and carefully, to enhance the user’s experience and not detract from it. No-one wants to wait forever for content to load because of unnecessary design 'features' holding it up.

Learn A New Skill For The New Year
Learn A New Skill For The New Year
Giving things up for new year is a common practice but also a very difficult one that most people break after just a few weeks. So this year make your resolution be to learn something new, to up-skill, to re-skill; here's a few good reasons why ...

  • A new skill to put you ahead of other job candidates
  • A new skill for a change in career, 
  • A new skill to enhance your studies 
  • Or just a new skill for fun! 

But what skill should I choose? Well, design skills are one of the most adaptable and sought after skills around as they show you to be creative and innovative but also logical and organised. So here are the top 5 design areas for you to up-skill in...

Web Design:

More and more business is being done online everyday and because of this every business from your local coffee shop to the multinational corporations has a website. This means there is a growing demand for web designers to create, update, moderate and redesign all these websites. To get in on the action, you will need to learn HTML5, CSS3 and at least a little JavaScript. These programming skills will be further enhanced with knowledge of SEO (Search Engine Optimisation) and design skills like the ability to use Photoshop. Using the web design process is also an essential skill that is unfortunately overlooked by many web developers who call themselves "designers".

Graphic Design:

Sample Poster

A lot of people group the ability the use Photoshop and being a graphic design together as if they were the same thing... they are not! Photoshop is a great software and the Adobe Creative Suite of which it is part is certainly the industry standard for graphic designers but there is a lot more to graphic design that using software, after all, graphic design still existed before computers! Back then, just like for modern graphic designers, the graphic design process, an understanding of colour theorytypography and composition were all keys skills. Some more modern techniques such as the use of attention grabbing techniques in your imagery and the use of the most powerful words in your typography will further enhance your skill base.

Games Design:

Games design with Unreal Engine

The games design process can be completed by just one person but that person would need to be highly skilled in many different areas of the design process and production stages and have a lot of time on their hands! For these reasons computer games, much like anything else, are designed and built by a team of people each with their own specific set of relevant skills. See which role would interest you most or dabble in a little bit of each before focussing on one area to learn. Start your journey here.

Interior Design:

An example of the Urban Interior design style
 Interior design is another misunderstood craft with numerous people claiming to be interior designers simply because they have "an eye for it". The interior design process, when done properly, is a complex task which requires multiple skills and the knowledge of key areas such as interior design styles, colour theory, room layout techniques and an awareness of a multitude of materials and finishes for walls, floors and furniture. Perspective drawing skills and the ability to create presentation boards for potential clients are also valuable skills for any professional interior designer.

Furniture Design:

The most practical and hands on of our top 5 skills for the new year is furniture design. Like all the others understanding the process is key and the furniture design process should be your starting point. After that a look into furniture design history will give you an understanding of traditional and contemporary furniture styles. An awareness of the available and industry standard furniture materials is also a must which will be complemented by a knowledge of the different furniture joinery techniques when you go to build your design prototypes.
Game Design Concept Board
Sample Game Design Concept Board
This article will focus on the development of a concept board (also know as a presentation board) for a game, however the same approach can be applied for the design of any type of design project in areas like architecture, 3D modelling, product design, interior design etc. So whatever design project you are pitching or presenting then you can follow these steps to ensure you create a great concept board design. To prepare even better you might also like to read our article on design presentation boards which gives a good insight into the theories and techniques to creating a great concept/presentation board. For now though, we are focused on the practical, so let's get started!

The Concept:

It may sound obvious but the first thing you need to do when creating a concept board is to create the concept and write it down! Of course everyone does this but not everyone does it correctly. Your concept board should have details of all areas of your proposed project design and therefore your concept/idea needs to be fully developed with all decisions finalized so you don't have to edit your concept board after you thought you were finished or even worse, leave something out that you should have displayed. For example, for a computer game concept board your idea should include....
  • The full story/plot of the game to set the scene.
  • Where and when the game is set and details about how it looks eg. abandoned water mill in the valley between two snow covered mountains ranges
  • Who are the game players/enemies and what do they look like 
  • What objects/vehicles will be involved in the game
  • What is the main game objective eg. kill enemies, score points, survive, collect objects, solve puzzles etc.
Just a reminder to write all these things down as our memories are not as good as we like to think!


Concept Board Research
A selection of images on the concept theme which could be used in the concept board
There are two stages of research that need to be completed - I call these general and specific research.

The first stage, general, involves researching existing concept boards to help you gain an understanding of what a concept board is, what it can look like, the variety of possible style and layouts etc.

The second stage of research, which I call specific research, is where you will search for images of the things which you described in your concept board. You will later use these images to create a single image "collage". This might not make sense yet but basically, we will use a combination of multiple images (all edited from their original state) to form a single image which, along with some text will explain your idea is a way that is visually interesting and informative.

Blocking Out:

Concept Board Layout and Composition
"Blocking out" is a graphic design layout technique
"Blocking Out" is a graphic design technique used to quickly mock up the composition or layout of a design in a software package using only blocks to represent different areas or aspects of the design. The colour of the blocks does not matter so it is best to keep them in shades of grey to allow you to focus on their shape, scale and position within the design. If it helps you can also add text into each block to remind you what it is for.

In the sample image above the top-right represent where the title and story text will go. The vertical block in the center represents a lighthouse on a rock (the horizontal block it is on). The large horizontal block taking up a third of the canvas represents the ocean while the blank white space in the background is the sky. Finally, the 3 circles represents areas for explanatory text to go. Can you visualize it yet?

It may seem a strange way to start a concept board design but it has many advantages...

  • Helps you quickly and easily arrange a suitable layout of the content you need to include
  • You can easily add, remove, scale and rotate elements within the layout.
  • Creates all the main layers that you will need
  • You can focus on layout without the distraction of actual images or colour
  • Helps you to visualize the final design before you have any images in place

Breaking The Ice:

Getting started with your Concept Board
Add in the images you want in a "rough and ready" way just to get started
Once you know the composition/layout you want to achieve, roughly at least, the next stage is to get all the pieces of the puzzle on the one canvas. It is a common mistake to edit each part separately, trying to get them all perfect and then bring them together at the end only to realise the colours/resolution/style don't match.

Breaking the ice simply means getting started. The best way to start is to put all the images you think you will need onto the canvas, ideally overlapping them on your "blocking out" layout.

As these elements will eventually all be viewed together it is important that you edit them all together so you can easily judge their scale, colour, resolution and style proportionate to one another. It also removes any confusion about the potential complexity of bringing images together properly, which would arise if you have edited each one separately.

Finally, it forces you to start. It can be hard to imagine how a design will look when it is completely finished and people often stop themselves from starting or judge their designs too soon. This leads to hesitation, time wasting and unnecessary editing. Once you break the ice and put all the pieces of the puzzle in place it will be much easier to finish, after all you wouldn't try to do a jigsaw without having all the pieces there!

Blending Images:

Concept Board Image Collage
Try to make your separate images look like part of one large image
Blending images refers to the process of editing all the imported images so that they appear as a single image, like in this Photoshop tutorial. This is possibly the most difficult stage of the process but if you take the right approach to it then it can be made much easier. I would recommend the following steps to blending the images together to form a single scene.....
  1. Remove all the background/unneeded content from each individual image
  2. Scale, position and layer the images as you want them
  3. Use filters/effects/layers styles to ensure the images are all of the same graphic design styles
  4. Edit the images hue/saturation so that they are all of similar colouration
  5. If images over lap or meet in a non exact way, such as waves crashing over rocks, use the clone stamp tool or a semi opaque eraser tool to help them blend together more realistically

Adding Text:

Concept Board Text
Keep the text to a minimum and utilise headings for each section
Probably the most obvious step in the process. The heading says it all really - add text. The advice I can give you is short and simple.
  • is a great place to get place to get interesting and unique font.
  • Make sure any fonts you choose are still legible (easy to read)
  • Make sure the colour of the text contrasts with the images behind it, possibly use semi transparent layers to help with this. (see image above)
  • Use headings for each section
  • Only include important information - the less text the better
  • Try out these Photoshop text tips


Sample Game Design Concept Board
Add detailed content and additional images to complete the effect
This step should be completed after you have reflected on your progress so far, evaluating the look of the design and checking that all required content is in place. Take note of all the changes you want to make - this will be your final "to do" list. You might also consider making use of some of the design principles to make your concept board more aesthetic.

So tips to consider when optimising your concept board are...

  • Print off the design, it will look different when printed than on the screen and will give you a better idea of scale and colour.
  • Show it to others and ask for feedback - you don't have to agree with them but their opinions may spark an idea for you or may identify something you overlooked.
  • Try to have a foreground, middle ground and background to your image. This helps draw people into it.
  • Whatever you do, don't clutter it by adding in too many images or too much text. The simpler the better.
  • Consider these presentation board tips.

Some More Sample Concept Boards...

Click on any of the sample concept boards below to view full size...

Support Us