Design Post Update

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 Web Design Process

1. The project brief

It is very important to meet with the client, either in person, over the phone or through e-mail or Skype in order to create the project brief for the website or so you can analyse and discuss the brief the client had already created. The brief should be detailed and specific and must be documented and agreed upon in order to allow it to be referred to later in the process. As a web designer you can also state your price and outline a time frame based on the brief. Without a detailed brief these things would not be possible.

2. Identify key requirements

Based on the brief and your discussion with the client, you should first identify the key requirements that the website must meet. Is it an e-commerce website? Does the client require a content management system? Does it require special effects? Factors like these would decide the design approach you take and these should be allocated the most time in your time-frame and they should be the central features around which the site is designed.

3. Research existing websites

If the website is to be a business venture it is important to first assess the competition. Sometimes a client may request that their new site appears higher in search engine rankings than a competitors or that it have extra or additional features therefore it is important to assess what you are up against, so to speak. It is also important to be aware of what the industry standards are for a particular type of website if you are not familiar with them. As a designer constantly browsing, reviewing and analysing new websites is good practice and can provide a source of inspiration for your future designs.

4. Develop the basic website structure

Before you begin the technical design and programming of the website you should first develop ideas for the basic site structure and layout through sketching and drawing. Ideas can be developed quickly and easily in this manner, much quicker than through Dreamweaver or Photoshop, and 'boxing out' the design will make the actual creation of the website a simpler process further down the line. Refer to the web design tips section for guidance in how best to layout your website. At this stage a quick check-in with the client would be recommended before you progress to the next stage.

5. Create the website graphics

Once you have identified the layout and style you want for your site you can begin to create the graphics you will need for the website. This may include the website logo, banner, buttons, image maps, resizing and formatting pictures etc. All these should be designed with consideration to the style and colour scheme of the website. There are a variety of file formats you can use for your graphics, the most common being .gif and .jpg. To help you choose the format which is best for you see the common file formats section. For help and assistance with the creating the graphics you may find our Photoshop and illustrator tutorials useful.

6. Create and program the website

With the layout decided upon and the graphics ready to be put in place you can now begin creating the basic site structure. Begin with the HTML template and use it to create a site master page which will be the starting point for creating all your web pages. Ideally you you should use CSS media queries to make this template responsive. In most cases the majority of your web pages will have the same basic layout so creating a 'master page' first, which can be the template for all other pages, is an approach which will save you time. Once the template is set the graphics and content created earlier can be inserted into the relevant pages easily and quickly completing the website. Once again this would be a good time to get feedback from the client so they can review the design.

7. Refine the website design

Based on the clients feedback and having reflected on the design yourself, make any necessary changes to the website. This may involve subtle changes to the colours, editing or changing images, changing the font style or small layout changes and spacing. Search Engine Optimisation (S.E.O.) should also be part of this process where including certain keywords, tagging images and using meta-tags are all part of the process. For more in depth information see the section on SEO.

8. Website testing and QA

This is a simple task that involves proofreading all the website content, testing all the links and any interactive features of the website. It may also be suitable to get feedback from a select group of people matching the demographic of the website's target audience to test the suitability of the website design and functionality.

9. Launch the website

Getting the website online is the culmination of the process but the old adage of 'build it and they will come' is certainly not applicable to websites. It is vital to index the website in as many search engine directories as possible to ensure visitors can find the website, advertising the site across a variety of media is also useful. On-line advertising through methods like Google Adwords is a recommended approach as well as using social media like Facebook, twitter, Google+ and others will also increase your websites online presence as well as driving traffic to the site.

If you enjoyed this article then perhaps our articles on the graphic, interior, games or furniture design processes may also be of interest.

The Graphic Design Process

The Graphic Design Process is a series of steps that a designer takes when working on a graphic design project; put simply it is a more graphic design focused version of the general design process. The details of each stage will differ depending on the type of design but the approach should always be the same. It is vital to stick to the process during a design as skipping a stage, completing stages out of order of not using the process at all will result in a lower quality outcome, an outcome the client is not happy with or even worse no outcome at all.

The diagram above outlines the basic stages of the graphic design process and below each stage is explained in more detail.

1. Analyse The Brief

Each design project will begin when a client delivers the designer with a brief. The brief will outline what the client wants although as the client will likely have no design experience it is important for the designer to carefully analyse all details given by the client and if necessary to make further enquiries about the needs of the client.

2. Identify Key Requirements

Based on the analysis of the brief you must identify the most important parts/key requirements. Ask yourself, what requirements must I fulfil? For example when designing a poster for an event, the simple act of including the time, date and venue are much more important than any other aspect as a poster without the necessary details is useless. It is therefore important to identify and prioritise the key requirements of the brief. The graphic design style most appropriate to the brief should also be identified at this point.

3. Research Existing Designs

Research is important to identify possible design styles and ideas which may also suit the needs of your client. These samples can be used when meeting with the client to identify the style of image/design which they prefer. For students research will also help to familiarise yourself with industry standard designs and the quality of design which is required.

4. Generate Ideas

Coming up with an idea for the design, a slogan for a campaign, an image for a poster, a name for a website etc. can be difficult. However, by focusing on fulfilling the key requirements of the brief and allowing your research to inspire you it is possible to generate original designs for your project. Brainstorming is often used where a lack of ideas is a problem. Free writing is a type of brainstorming which simply involves relaxing your mind and writing down any and all ideas you have as quickly as possible without really thinking. Having your research around you can help when doing this. It may seem very simple but generally people have numerous ideas but they tend to dismiss them before writing them down, considering them down and allowing them to be developed into viable design solutions. For help and assistance visit our article on idea generation.

5. Develop Ideas

It is good practice not to settle on simply one idea but rather to choose 2 or 3 of your best ideas and develop them through simple sketches, drawings, colour scheme test pages and font style sheets. These steps all help to develop your ideas and highlight which one has the most potential for success. Sketching will also help to identify possible layouts/compositions that can be used.

6. Produce The Design

Once an idea has been selected and sufficiently developed it is time to begin producing/creating the design. It is important to note that this is commonly the stage that overeager student designers begin at and without stating the obvious this should never be done. Depending on the type of design different softwares or materials will be used to create the design but regardless of the means of production it is important that the previous stages are not forgotten and that the key requirements are fulfilled. For help and assistance with the graphic design production stage you may find our Photoshop tutorials useful.

7. Test The Design

This is a quick and simple stage of the process but one that is often overlooked. For printed designs testing simply involves printing the design to ensure the resolution and colours are of good quality, that no clipping of important details occur and that text is readable and without errors. For website design this stage will involve checking that all features are functional, that links are working and that page loading speeds are acceptable.

8. Place The Design Insitu

For printed designs this will involve placing the poster/logo/sign/banner etc. in its intended position and ensuring that text is readable from an acceptable distant, images are clear and that the colours do not clash with or blend into their surroundings. For websites this will involve publishing the website online and rechecking all features and functions. For other types of designs, such as architecture or interior design, a programme such as Photoshop can be used to digitally place the design into its intended environment.

9. Evaluate The Design:

Before presenting your final design to the client it is vital that you evaluate it without bias. The easiest way to do this is simply return to stage 2 where you identified the key requirements of the brief and see if you have successfully fulfilled them. It may also be useful to get the opinion of others at this stage if you fear you will be unable to objectively evaluate your own design.

10. Redesign:

This step is only necessary if, after evaluation, you feel you have not successfully met the key requirements of the design brief. This stage involves returning to the beginning of the process and returning through each step correcting the errors which led to the key requirements not been fulfilled.


If you enjoyed this article then perhaps our articles on the web, interior, games or furniture design processes may also be of interest.