Web Design Process

design process web web design web design process web development website design

Web Design Process

SEM 08.21 Komentar

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.

Baca selengkapnya

Mixing Metals & Colors in Interior Decor

colour theory colours colours and metals interior design interiors materials & finishes materials and finishes metals

Mixing Metals & Colors in Interior Decor

SEM 02.46 Komentar

You’ve spent days poring over sample paint colors for your room, but have come no closer to deciding the right shade than when you started. We totally understand. Choosing the perfect color for a room can be difficult and stressful. The wrong color can make a room look completely drab and uninteresting, while the right one can bring it to life. Moreover, colors have been show to impact the moods and thoughts of people. Bright, cheery colors such as orange and yellow have a positive effect on people. Many shades of black or brown, on the other hand, are often associated with depression and negativity.And if that was not difficult enough, some colors look different at different times of the day, depending on the amount and nature of light in the room. Phew!

When choosing wall colors for your room, you also have to make sure that the color matches the various finishes and accessories in that room. Since the current trend is all about incorporating metals in interior design, today seems like a better day than any to find out how to team metallic accessories and lighting fixtures with various shades and colors. And the below infographic from Industville attempts to do exactly that!

In addition to some amazing color ideas for various rooms in a house, it also shows you how to marry those colors with metals so that you have an absolutely stunning home. For instance, did you know that the gorgeous gold tone you’ve been eyeing for a long time could lift your living area to a different level altogether? Yes, that’s right! These subtle, but warm and inviting shades are “in” right now, especially when you pair them with muted reds, crimsons, and navy blues. But don’t use them in your study. The best color for a study would be a nice blue. Blues are generally associated with calm, serenity and intelligence. A strong blue aids in stimulating clear thoughts, while lighter shades help in calming the mind and improving concentration. And if you love pink, you are in great luck! Blush pink/rosy shades work in almost every room, except perhaps your gym or exercise room. And what’s even better is that the color is so versatile that you can match them with a whole lot of metallic shades, including gold and copper.

Baca selengkapnya

Create your own Angry Bird

adobe photoshop angry bird angry birds graphic design illustrator pen tool photoshop vector graphics

Create your own Angry Bird

SEM 09.46 Komentar

Which Angry Bird will you create? 

Following the release of the Angry Birds Movie we thought it might be fun to practice our graphic design skills and make our very own Angry Bird. This tutorial is completed in Illustrator but all the tools and techniques used are also available in Photoshop. The reason I am using Illustrator is that Illustrator is the best program for creating vector graphics using the pen tool. Logos and cartoons are normally made with the pen tool so they are created as vector graphics, allowing them to be resized up or down without loss of quality, therefore this image will be created using the pen tool. If you are not familiar with the pen tool then you can read this guide to using the pen tool before you start.

Now that that is cleared up, let's begin making an Angry Bird!


1. Go to File-> New and create a canvas 700px wide and 500px tall.


2. Go to the layers window and rename the base layer 'Body'. Select the ellipse shape tool and create a circle, set the colour of the circle to red, as we'll be creating the red Angry Bird, and put a 7px black stroke on the circle.

3. Use the direct selection tool to move the top and left anchor points slightly, as seen in the image below.

The Angry Bird's Body

4. Now use the add anchor point tool (within the pen tool) to add 6 anchor points across the top of the body, don’t be too particular about the placement as we will be moving them soon anyway. See the image below.

5. Next select the direct selection tool and drag the 2nd and 4th anchor points upwards and the use the handles on each anchor point until the shape resembles the image below. (If there are no handles on the anchor points it is possible they are straight line anchor points, use the convert anchor point tool and click and drag slightly on each point to convert them to curved line anchor points.)

The infamous 'quiff' of the red angry bird

6. Now open the layers window and click the button circled in the image below and create a new layer, call it 'belly'.

7. Next, while on the belly layer, use the ellipse shape tool to create the rough shape of the belly, colour the shape in white and set the stroke to 0pt. Then zoom in and use the direct selection tool to move the anchor points and their handles into a shape similar to the image below.

8. Open the layers window again and click the new layer button and create a new layer, call it 'eyes'. If it is not the top layer, move it to the top. Use the ellipse tool to create two circles for the eyes, each circle should be white with a 3pt stroke. To overlap one eye over the other as show in the image below, right click on one eye and select move to front.

9. Next create a new layer, call it 'eyeballs'. Use the ellipse tool to create two small black circles without any stroke. Position the eyeballs as shown in the image below.

10. Again create a new layer, call it 'eyebrow' and ensure it is the top layer. Use the Pen tool and click (do not click and drag) one at a time creating new straight line anchor points in the shape shown below remembering to join the last anchor point to the original point.

Getting the mono-brow right is the key to making him look angry

11. The next part of the image is the nose. Create a new layer, call it 'nose' and once again ensure it is the top layer. Use the pen tool to create the rough shape of the nose, remembering to join the last anchor point to the original anchor point. Give the shape a yellow colour and a 3pt stroke. To edit and refine the shape of the nose use the direct selection tool to move the anchor points and their handles around. You may also need to use the convert point tool as the nose shape uses both curved line and straight line anchor points. The image below shows the image alongside the layers used so far to create it.

The angry bird and the layers used so far

12. Finally, create one more layer - call it "tail" and again use the pen tool to create straight line anchor points to make up the tail shape. Position the layer beneath the body layer for best results. If you wish you can use the ellipse shape to create 2 more shapes for the 'freckles' , or whatever they are, on the body.

The completed angry bird 

TIP: The pen tool can be difficult but remember practice makes perfect so after completing this tutorial perhaps try creating the rest of the angry bird family or other cartoon images.

Baca selengkapnya

Graphic Design History

design history design timeline graphic design graphic design history graphic design timeline graphics

Graphic Design History

SEM 07.33 Komentar

The Graphic Design Timeline - Click to enlarge

The Graphic Design Timeline above ranges from 1830 to the Present Day and outlines 14 different styles throughout the history of graphic design. It is important to note that not every graphic design style is included (there are lots) but all the important and seminal periods of graphic design are touched upon. Click on the timeline to view it full screen.

The timeline includes the following graphic design periods...

• Victorian Graphic Design Style: 1837 - 1901
• Arts & Crafts Graphic Design Style:1880 - 1910
• Art Nouveau Graphic Design Style: 1890 - 1920
• Futurism Graphic Design Style: 1900 - 1930's
• Art Deco Graphic Design Style: 1920 -1940's
• Heroic Realism Graphic Design Style: 1900 - 1940's
• Early Modern Graphic Design Style: 1910 - 1935
• Late Modern Graphic Design Style: 1945 - 1960
• American Kitsch Graphic Design Style: 1950's
• Swiss/International Graphic Design Style: 1940's - 1980's
• Psychedelic Graphic Design Style: 1960's
• Post Modern Graphic Design Style: 1970's - 1980's
• Grunge Graphic Design Style: 2000 - 2010's
• Flat Graphic Design Style: 2010 - Present

At the start of any graphic design project I'm sure you have found yourself wondering what style should I choose? what style do I like? what style will look good for that project? what style can I accomplish with my level of skills? This timeline is designed to be a quick overview guide to help you decide but if you can click on the link to read more about the different graphic design styles and graphic design history .

Baca selengkapnya

Top 5 Web Design Tips

changing face of web design design tips responsive web design tips web web design web design creating websites web tips

Top 5 Web Design Tips

SEM 04.06 Komentar

1.What's The Point?

What's the point of your website? That must be your first decision

Believe it or not there are only 3 types of websites - information, entertainment and transaction.

• Information websites provide information- obvious example is Wikipedia
• Entertainment website provide entertainment- obvious example is YouTube.
• Transaction websites will either buy goods from you and/or sell goods to you - obvious example is eBay.

Every website falls into one or more of these categories. The first thing you need to decide before designing your website is what is  its purpose? Secondly who is it aimed at? Once you have made those decisions you can more easily design your website to meet the demands associated with that website category and that target audience.

2. Mobile Is Bigger Than Desktop*

Internet usage is now greatest on mobile device

It goes without saying nowadays that your website should be responsive but I have found that people tend to create the desktop design and then use media queries to work down to tablet device design and finally mobile design. This is the wrong approach. Why?

*For the first time more people now access the internet using mobile devices than desktops or tablets so it makes sense to prioritise your websites mobile design then scale up using a fluid design and/or media queries.

3. Show The Way

An organised, obvious and functional menu is key to a successful website

Web navigation has many well established and functioning characteristics and you should not stray away from them,; there is no need to reinvent the wheel and if you try it will likely confuse your visitors and spoil their browsing experience. On the flip side, an effective navigation system encourages browsing within the website which can in turn increase revenue.

Your menu is obviously the main navigation device for your website and it should be immediately obvious when the webpage launches, ideally fixed at the top of the page with no surrounding elements to distract from it. This also makes the links easier to click on a mobile device. If the website's style allows it then perhaps add an additional (relevant) icon with each menu link, this creates an immediate association for the visitor with the purpose of the link.

Links within the body text should at least be a different colour than the body text and you should retain the default link underline as without it the links may just look like bold text. Ideally all links should have a hover effect added using CSS and a title attribute using HTML.

4. Nobody Reads

If nobody reads text any more then how do you get your message across

Let's face facts, nobody reads all the text on a website, in fact I don't even know if anyone will read this sentence. What people do is scan the page for what they want, when they do this images, headings, sub-headings and links are what they notice (in that order).

Just checking if you are reading or scanning...

With this knowledge in mind you should provide images and/or icons to go with all key links/points and break any large areas of text into sections, each with a heading and possibly sub headings also like I have tried to do with this article. As a general rule in terms of website text, just get to the point.

5. Optimise, Optimise, Optimise**

There are 3 key areas of your website to be optimised

**I wasn't repeating the word optimise for fun or even for emphasis. I actually want to advise that you optimise 3 keys areas of your website: the layout, the loading speed and the content.

The layout optimisation should focus on utilising one of the recognised web layout techniques such as the F layout or the Z layout. The purpose of which is to direct visitors to the outcome that you want such as clicking on a link, signing up to a newsletter or buying a product. An optimal layout will result in optimal outcomes.

The loading speed can be optimised by removing unnecessary content, minifying you HTML and CSS, keeping slow loading content below the fold, optimising images for web viewing etc. Our tips to improve website loading speed and the Google page speed insights tool is a great help. Faster loading is not just appreciated by your visitors but also the search engines who now factor it into their indexing algorithms.

Optimising content is old news but remains an important activity which still makes lots of companies lots of money. The reality is that it is actually a relatively simple but highly tedious process, so if you got the time then you can save the money. Learn more about SEO here.

You may also be interested in the web design process and our 10 steps to designing and creating a website.

Baca selengkapnya

How To Become A Graphic Designer

careers careers in design design career design skills designer graphic graphic design graphic design career graphic designer graphics photoshop

How To Become A Graphic Designer

SEM 03.49 Komentar

How To Be A Graphic Designer

Graphic designers produce visual design solutions using images and lettering to get across information and communicate a message with high visual impact. Graphic design solutions are required for a wide variety of products and publications, such as websites, advertising, books, magazines, posters, brochures, booklets, magazines, computer games, product packaging, exhibitions and displays, logos, business cards and more. Graphic designers are normally based in a studio or office, but may also spend some time visiting and receiving clients and dealing with printers.

A graphic designer normally works to a brief (set of instructions) set by the client. They develop creative ideas and concepts choosing the appropriate media and style to meet the client's requirements. Graphic design requires creativity, knowledge of industry standard design software and a practiced approach to managing time and costs and meeting deadlines.

The Skills Of A Graphic Designer

A graphic designer may often manage more than one design brief at a time and must allocate the relevant amount of time according to the value of the job. The typical activities of a graphic designer are listed below, use the links to access additional information about an activity.

• Using the graphic design process effectively to maximise project efficiency.

• Meeting clients to discuss the business objectives and requirements of the job.

• Interpreting the client's needs and developing a concept to suit their purpose.

• Estimating the time required to complete the work and providing quotes for clients.

• Developing design briefs by gathering information and data through research.

• Awareness of the different graphic design styles and design principles.

• Thinking creatively and brainstorming to produce new ideas and concepts.

• Developing ideas through drawing and sketching.

• 'Pitching' ideas to managers or clients.

• Working with a wide range of multimedia, like Photoshop, to produce quality designs.

• Proofreading all work to ensure accurate and high-quality work.

• Presenting finalised ideas and concepts to clients.

• Keeping up to date with emerging technologies in new media as most graphic design work is now completed on a computer.

• Working as part of a team with printers, copywriters, photographers, other designers, web developers and marketing specialists.

Graphic Designer Career Path

Graphic designers are normally employed based on the strength of their skills as opposed to their qualifications. However, most professional graphic designers have an ordinary degree or honours degree in graphic design, art or other creative, design based area.

Talent and contacts are the key to getting work as a designer, and you will need to keep an up-to-date portfolio of your work to show to potential employers or clients. Competition for jobs is strong and not all jobs are advertised, so it is a good idea to network and make contacts within the industry, and to approach companies and agencies directly. Unpaid work experience is an opportunity many designers take up in order to help develop their portfolios, make new contacts and impress potential employers. Joining professional bodies such as CSD and D&AD will also give you the opportunity to make contacts in the industry. It is also common practice for designers to create a website to showcase their work.

There is no upper age limit for entry to this occupation. You may be able to enter relevant training through universities or colleges that relax normal academic entrance requirements for suitable mature applicants. Most academic institutions define people aged 23 years or over as mature candidates.

Once a designer has completed their college studies they will still need to keep their skills up to date throughout their career. You may be able to attend short courses, for example in computer packages such as the Adobe Creative Suite, which is the industry standard package for all things design and multimedia related.

Baca selengkapnya

Top 5 Games Design Tips

2d games 3d games design games design games design tips gaming tips

Top 5 Games Design Tips

SEM 09.41 Komentar

Level design image from Scott Petty

The games design tips below are intended to help you improve your overall games design process but are not a replacement for it. So before we get to our top 5 games design tips our first piece of advice is to always, always use the games design process when creating games.

1. Be Original

Game Concepts Should Always Be Original

One of the best thing about games is that there are no limits to what they can be about, where they can be set, the characters involved or the games' missions or objectives. The only limit is your own creativity, so why on earth would you consider starting your project by copying or mimising an existing game?

Sure you can learn from successful games and sure you can create a game in the genre of existing games but you should always have a unique game concept. New characters, stories, settings and missions are what will attract people to play your game in the first place and with literally no limits on what you can choose there is nothing stopping you from doing that.

The random game idea generator activity is a great way to help you get started. It helped us come up with this gem of a game concept for Colossus Cleaner...

"Arnold Schwarzenegger astride a unicorn carrying a mop in the Colosseum of ancient Rome"

It's weird, it's crazy, it's bordering on stupid but ..... it is original.

2. Prepare All Assets First

A selection of game button assets ready to be used in a game

It is always very tempting to jump straight into the actual level design of the game once you have settled on your idea. However this is one of the worst things you can do as it will lead to you wasting more time than you can imagine as you will have to stop and jump back and in and out of the level design process every time you need an asset whether that be a sound, a texture, a mesh, a font etc.

This will also lead to inconsistency in the overall look and feel of the level as if the assets are not all created together they tend to end up being of a different type, scale or style from each other. This will make the game look unprofessional and even difficult to play/understand as players won't recognise one pick up from the next or understand one symbol from another.

The message is simple, plan ahead and take the time to create or gather all sounds, fonts and images (for UI screens), textures and meshes before you even open the level editor or games engine you are using.

Here are a few good places to get your game assets for free....

• www.blendswap.com (meshes)
• www.turbosquid.com (meshes)
• www.3darchive.net (meshes)
• www.textures.com (textures)
• www.dafont.com (fonts)
• www.soundbible.com (sounds)
• www.soundjay.com (sounds)
• www.opengameart.org (all asset types)

3. Detail in Clusters

This room looks full of details and objects at first glance but look closer....

We all want to create realistic and interesting game worlds but the more meshes and foliage and particle effects and lights etc. that we add the more likely the game is to lag. Also it is actually becoming less realistic! 

Even in the real world things tend to cluster; clothes pile up in the corner of your room, letters pile up on the hall stand, coats get draped over the back of the same chair, rubbish gathers at the back door waiting to be put out, one kitchen press seems to hold all the random, unused utensils..... Any of those sound familiar to you?

All the while the circulation paths of our home remain clear and uncluttered no matter how untidy we are. When I say circulation paths I am referring to  hallways and corridors but also common directional paths such as from the living room door to the couch or from the bedroom door to the bed.This information can be used in your level design to make it more realistic but also faster and more efficient. Basically, you should not try to detail the entire level but rather create small areas of high detail which then become focus points for the character as they move through the empty (in comparison) circulation paths.

Tip: In outdoor scenes use tall building, trees or other landmarks as focal points for the player to move towards and look at during otherwise empty grasslands or open areas.

4. Create Reusable Elements

The seats in this dilapidated and derelict building are made up of the same parts but have been use differently 

We have already told you to prepare your assets and create clustered areas of detail in you game and this tip is partly related to those from a mesh point of view. The image above is a good example of what I mean as it shows the same seat in different positions and in different states of disrepair.

This might seem simple and obvious but if you were planning ahead you would have made the parts of the seat as separate meshes to allow you to do this easily put it together in different ways. On the other hand if your weren't thinking ahead and if you just made the entire seat as a single mesh you would then need to go back and make another mesh for the broken seat and another for the one missing one cushion and another for the one with a missing leg and another, and another....

It's not just meshes that can be reused either. Clever programming can save you a lot of time too. How you do this will vary depending on which game engine you use so lets just use a generic example to explain the point. Let's say you are creating a game where you collects coins, a la Mario. Rather than creating 100 separate coins but each with the same programming code you would instead create a coin 'actor' with built in programming code that can then be added and duplicated within the level editor.

This is an obvious example of course but when you break down your game objectives and requirements you will find that the same actions or events are required for multiple different objects or characters. So why would you create more work for yourself? Plan out your game logic to identify these repeat events and then create a single reusable 'actor' for that event.

5. Don't Neglect The Audio

Screenshot from the sound cue editor in Unreal Engine 4

Firstly we must understand that audio is not just the background music in the game. Audio covers a wide range of areas such as...

• Background music
• Characters voices
• Character sound effects (eg. footsteps)
• Weapon sound effects
• Ambient sounds
• User Interface (U.I.) button click sounds
• U.I. background music
• Voice overs/ narration
• Objects/ Pick-ups sound effects

It is very easy to start to create a game without a clear concept of what the game audio will be but by considering game audio at the very beginning of the game’s concept you can then design the other level features to match it and create an overall consistency to the game's atmosphere as opposed to just quickly downloading and importing stock sounds at the end of the project.

With the emergence of Virtual Reality headsets and VR gaming the importance of game audio is becoming more important than ever. The right sounds, in the right place, at the right time will be vital to ensure a fully immersive VR experience for the gamer.

Baca selengkapnya

Create A Website In 10 Easy Steps

create a website design a website how to code websites how to create websites step by step website web web design web design process

Create A Website In 10 Easy Steps

SEM 09.40 Komentar

Creating a website is a complex process but like any process you just need to take it step by step

This article discusses the 10 steps involved in designing and creating a website. While the web design process is a more theory based guide to approaching a web design project, this 10 step guide is more practically focused. Even if you are a total beginner, web design novice or web design student you can use these steps to successfully create your own website.

1. What is the aim of the website..?

All websites can be allocated into just 3 types...

Information:  

These type of websites simply supply information on a specific topic or topics that they hope people will find useful, sometimes just a bio and contact information of a business. The information is usually provided for free (but not always) and you can then monitise the website  through placing ads. This website is an example of an information focused website.

Entertainment: 

These type of websites provide entertainment for the visitor usually through videos, music or games. YouTube a is a prime example of an entertainment focused website. The information is usually provided for free (but not always) and you can then monitise the website  through placing ads.

Transaction: 

The name says it all really! These websites allow you to buy and/or sell goods online. Amazon and eBay are probably the most well known buy & sell focused websites. These websites usually have little or no ads as they make their money from the sales. Any ads are often for their own products.

Once you recognise what the purpose of your website is you should research existing websites of the same type to see what the competition are doing. After your research decide what the key aim of the website is. This may be for the visitor to click on a specific link, to make a sale, to contact you etc. Whatever it is you need to decide. You can have more than one aim for your website but you should still specify the key aim.

2. Plan The Layout (based around the key aim)

The layout of your website will be key to directing the visitor towards the outcome you want to achieve.

Whatever the key aim you decided on in the previous step now is time to plan out how best to achieve it. This might be through make a certain element pop up, be larger than others, be strategically positioned or colored, be animated, be framed etc. It could even be through multiple methods. Whatever you decide, create a sketched layout to display where you intend to place the different elements of the website.

There are even web design theories on how best to achieve this. The F Layout and the Z Layout  and the Gutenberg Diagram are the 3 most common.

3. Select An Appropriate Style 

Once decided upon a strategic layout for your website and armed with a sketched layout to work from you will next need to decide on an appropriate style for the website. By style I am referring to the colors, fonts and imagery that will be used in the website. It is very important to select a style appropriate for the website and not one based on your favorite colors or fonts as these may not match well with the website's purpose.

Colors...

You should create a colour swatch for your website design project

• Color emphasizes, highlights, and leads the eye to important points or links.
• Colour identifies recurring themes (i.e. titles and subtitles are usually the same colours).
• Conversely, colour can differentiate, such as different colours in pie charts and bar graphs.
• Color symbolizes and triggers emotions and associations.
• Create color schemes at www.paletton.com

Fonts...

With so many fonts to choose from it can be hard to pick one

Legibility and readability refer to how easy a font is to see and also read as a block of text. Sans serif fonts are easy to read than serif fonts and mono-space are very legible but not very readable. For more about sans serif, serif and mono-space read this.

Appropriateness of fonts is similar to appropriateness of colors, choose a font based on it's suitability to the website and not based on your personal preferences. For free fonts go here.

Pairing fonts is a difficult business but in terms of websites the key tips are to never use more than 3 fonts (too cluttered) but never use less than 2 (too boring). Your body text should always be a relatively simple sans serif font while your headings can be any appropriate fonts once they are legible. For more advice on pairing fonts check out http://fontpair.co/

Font size is a very important aspect that must also be taken into consideration. When choosing a font size, one should keep in mind that choosing sizes closer to one another for various levels within your site will output a more professional and elegant webpage. 

Font emphasis is also an important factor as not only will font emphasis aid in search engine optimization, it also alerts viewers to what is important on a page or where the links are located. Search engine spiders look for phrases that are either in bold, highlighted or between header tags. These phrases are deemed as important. One can therefore control keywords by placing them in bold or italics.

TIP: Always use a minimum of 2 and a maximum of 3 fonts in your website

Images...

There are now millions of free images available to web designers 

Professional: Don't even dream of using any out of focus, blurry or just generally amateur photos and don't get me started on clipart, suffice to say it's not a good idea. There are plenty of quality and free stock photos and graphics available at website such as Pixabay, Pexels and FreeImages.

Appropriate: As with the colors and fonts be sure to choose a photo based on it's suitability for the website not just because it is a "nice" photo. Also try to stay clear of the dull, lifeless stock photography which litters corporate websites the world over. The use of icons or graphics instead of photos is now a common practice and allows users to "read" the website more easily and quickly.

4. Gather and Create Website Content

A website is made up of a wide range of content types like text, images, videos and udio

This one is pretty self explanatory. Once you have decided on the style of the website design you want the next step is to get organised by finding or creating all the content you need. When I say content I am referring to text, images, video, audio, custom fonts, files for download etc.

As well as gathering and/or creating the content you will also need to Optimise the content in terms of file names and file types. The file type of audio and video in particular can effect is they will load on a particular browser and also how quickly they do load. Read more on that here. In general MP4 for video and MP3 for audio are your best options.

"An image tells a thousand words" or so they saying goes, however they are also big files which can be slow to load and therefore damage your websites' load speed and user friendliness. Softwares such as Photoshop have specific tools to optimise the size and file type of the image for you. Free alternatives like Gimp and online editors such as Pixlr are also great options.

Depending on the method you choose for the actual creation of the website you may need to store content in order to link it from your website. For images Flickr or Picasa are best, YouTube or Vimeo for videos and Google Drive, One Drive or Drop Box for files.

5. Learn HTML and CSS (the basics at least)

HTML and CSS are the building blocks of all websites

Whatever method you choose to create a website through you will still need to know the basics of HTML and CSS in order to make the most of your website (No matter what you have been told!).

Even WYSIWYG website builders like Wix and Weebly (more on those in a moment) use HTML and CSS in the background and if you want to tweak the design or add custom widgets you will need to know basic HTML and CSS.

We have a nice and simple 10 step guide to learning HTML and another for CSS. You can also visit the W3Schools website for information on specific aspects of HTML or CSS.

6. Create the website (5 methods to choose from)

There are 5 main ways to create a website

So now that you have the basics of HTML and CSS it is time to create the actual website. It may seem silly to say this but if you have flicked through the article straight to this section I really recommend going back to the beginning! So many people jump straight in at this stage and waste a lot of their time because they have not completed the previous steps. Don't say you weren't warned.

With that little rant over, lets look at your options for creating the website.

Programmed from scratch: 

If you have good HTML and CSS skills or perhaps you are really enjoying the W3schools tutorials I recommended earlier then this is an option for you. It is also the most cost effective option but also the most time consuming. Komodo Edit is an excellent free code editor which you can use to make programming your own website a little easier.

Start with a template:

If you want to program the website yourself but need a little bit of a helping hand getting started then perhaps a website template is the way to go, just be sure to get a responsive template to ensure your website is as user friendly as possible. You can choose from an amazing 100 free responsive website templates here. A template is a great idea, especially for new web designers, just be sure to customise it!

Website builders:

Website builders advertise themselves as the easiest and quickest method to create a website. Companies like Wix and Weebly are the best options for this approach and they both offer a starter package where you can get online with a free sub-domain name and free hosting. However, in my opinion, this is not a good option.

Website builders always seem to result in very rigid web designs, the free domain name is not a full domain and they tend to overcharge you for a full domain name. You often need to upgrade to a paid account to go to a custom domain too and the monthly or yearly pricing structure is usually quite expensive. Bandwidth restriction, custom ads and storage space are other things that often need to be paid to unlock. In summary, this wouldn't be a choice I'd recommend.

Content Management Systems: (Recommended Option)

CMS for short, content management systems are similar to, and often confused with, website builders. The difference being a CMS website design and structure is often created by a web designer first before being handed over to a client who only has access to a front end to make basic updates.

However, especially if you have learned some HTML and CSS, you can take charge and create the website design and structure yourself using systems like Blogger and Wordpress. Which one is better is constantly being debated online with my personal preference being Blogger (read why). Whichever you choose this is a great option which offers you templates to get started, widgets to drag and drop in while still having access to the HTML and CSS to make advanced or specific changes and tweaks.

Hire a web designer:

If you don't have the time to learn how to build a website, need to have complex functions or a very specific look... and you have a budget, then you will want to outsource the work.

Be careful who you hire, though. A poorly developed website can cost you money, drive away customers, and hurt your reputation. Following a few basic steps will increase your odds of hiring a creative, technically savvy, and cost-effective design firm or freelancer.

7. Purchase a Domain Name (and hosting)

Select your domain name carefully

Depending on the method you chose to create the website you may also need hosting space for the website but all methods require teh purchase of a domain name. There a far too many domain name sellers to list and too many good ones to compare so what I generally advise is buy local.

Choose a company from your own country as if anything goes wrong you only need to make a local call instead of a national one and smaller companies can often deal with any issues you have more efficiently.

If you can afford it, I would also recommend purchasing a national and an international domain name extension to maximise the impact your website has in search engines in your own country.

8. Launch the website

Once the website is created and you have a place to put it and an address where people can go to view it then you are ready to go online. If you used a website builder or a CMS you may have already been online so there is not too much to say here.

Most web hosting platforms will have their own instructions and methods to upload the files to launch the website so I will not go into that either. I'll just say congratulations!

9. Perform SEO

Search Engine Optimisation is key to having a successful website

It may seem silly to be performing Search Engine Optimisation after you launch your website but realistically you need to anlayze your websites' online performance through Google's Search Console (webmaster tools) and Google Analytics before making any tweaks to your websites content.

SEO is a tedious task and requires attention to detail, a selecetive use of language and the optimistaion of all web content. You can read our top 10 SEO tips to help make it a little easier.

10. Market the website

"Build it and they will come" does not apply to websites! They must be marketed

Once SEO has been performed you should see an increase in traffic to your website but you will also need to market and promote the website through other methods to maintain and more importantly increase traffic.

The use of social media platforms is the most cost effective method of advertising your website to a large audience but don't try to use every single social media method as you simply won't have the time and an out of date or inactive account will only put people off. You will be better off choosing 3 or 4 methods and being as active as possible on those platforms to build your audience and keep them engaged. I would recommend Facebook, Twitter and then 1 or 2 others.

If you are regularly creating new content for your website, through a blog for example, then sending email newsletters is also a good way to remind people about your website and encourage them to return to access the new content. Mailchimp is definitely the market leader in this area.

Finally, you can always try to get other people to do it for you! By using share buttons or similar on your website you will encourage visitors to share your content with their contacts. It's a great method if it works but relies on you providing quality content otherwise it will not be shared. Addthis is an excellent option to easily integrate social sharing into your website.

Baca selengkapnya

Graphic Design Styles

design genres design styles graphic design graphic design styles graphic design types graphic styles graphics

Graphic Design Styles

SEM 09.31 1 Komentar

Which Graphic Design Style Is Right For Your Project?

At the start of any graphic design project, you wonder what style should I choose? what style do I like? what style is best for the topic? what style will I feel comfortable with? Whether you're designing a single image or a full house style / company brand the style you use will be dependant on the what is most appropriate for it.

The following list of graphic design styles is not a definitive list but rather a selection of some of the most common or popular graphic design styles, more styles exist and more are being created all the time. You should use this list to gain a basic understanding of common graphic design styles and what is involved in each of them, how they differ and how to create them.

Victorian Style Graphic Design:

Samples of Victorian Style Graphic Design

The Victorian era of Britain was the period of Queen Victoria’s reign which ran from 1837 to 1901 and was a time of strong moral and religious beliefs. The Victorians loved complex and ornate objects and this influence filtered through to all areas of design including architecture, furniture, interiors, fashion, typography and commercial art. 

The Victorian style was deeply influenced by their nostalgia for objects from the past. The Victorian design style almost always filled the entire page with images and type. Typical design elements of early Victorian style were the use of outer decorative borders and elaborate typography. Symmetry was also used heavily in layout and design.

Later Victorian style tended to use the decorative borders less but still used ornate type and romantic imagery. Typography through the Victorian era generally appeared in a curve or wave and was commonly encompassed in a banner.

To Recap, the main characteristics of the Victorian graphic design style are...

• decorative outer borders
• elaborate typography
• symmetry
• highly ornate and 'busy' imagery
• very few straight lines or edges

Back To Top

Arts & Crafts Style Graphic Design:

Samples of Arts and Crafts Style Graphic Design

The Arts and Crafts movement was an international movement in decorative and fine arts that began in Britain and then flourished in Europe and North America between 1880 and 1910, later re-emerging in Japan in the 1920s. It stood for traditional craftsmanship using simple forms, and often featured medieval, romantic, or folk styles of decoration with heavy use of textures and illustrated initials.

Arts & Crafts advocated economic and social reform and was essentially anti-industrial. It had a strong influence on the arts in Europe until it was replaced by Art Nouveau and Art Deco before being eventually displaced by Modernism in the 1930s.

To Recap, the main characteristics of the Arts & Crafts graphic design style are... 

• reused traditional/older style features
• simple forms
• illustrated typography
• lots of textures

Back To Top

Art Nouveau Style Graphic Design:

Sample of Art Nouveau Style Graphic Design

Art Nouveau is a style of decorative art, architecture, and design prominent in western Europe and the USA from about 1890 until about 1920 and was characterised by intricate linear designs and flowing curves based on natural forms and an 'earthy' colour palette.

These identifiable flat, outlined illustrations and hand-drawn typefaces leads to Art Nouveau sometimes being confused with Art Deco, but there is a clear distinction between the two. Art Nouveau looks hand drawn and prefers natural lines and shapes to the highly geometric shapes that define the Art Deco style.

To Recap, the main characteristics of the Art Nouveau graphic design style are... 

• intricate hand drawn style
• linear based designs
• use of natural forms
• regularly features female form

Back To Top

Futurism Style Graphic Design:

Samples of Futurism Style Graphic Design

Futurism was not only an art movement but also a social movement that developed in Italy in the early 20th century. Although it was largely an Italian phenomenon, there were parallel movements in Russia, England and elsewhere. It emphasized speed, technology, youth, and violence, and objects such as the car, the aeroplane, and the industrial city. It was a movement that particularly despised not just certain aspects of classical antiquity, but everything that was not totally new - the antithesis of Arts & Crafts 

The painters of Futurism were particularly successful and they often broke light and color down into a series of dots or geometric forms through a process called divisionism. Futurism influenced many modern art movements of the 20th century which in turn influenced the development of contemporary graphic design.

To Recap, the main characteristics of the Futurism graphic design style are... 

• eclectic style
• featuring or using new technology
• offset text
• some cubist influences
• no traditional features

Back To Top

Art Deco Style Graphic Design:

Samples of Art Deco Style Graphic Design

Art Deco had it's heyday in the 1920's and 30's but, as a term, it was not coined until 1925. Art Deco uses sharp, aero-dynamic shapes, Egyptian zigzags, motion lines and, in more modern times, an airbrushed / grainy look. Perfect examples of the Art Deco graphic design style can be found in period comic books, old car show posters, book covers and movie posters.

These images are defined by geometric shapes, bold curves, strong vertical lines, aerodynamic forms, motion lines, airbrushing and sunbursts  Unlike the Early Modern style, Art Deco highly exercises its use of illustrations and graphic representations of everyday objects. But these features do not do justice to the spirit of the Art Deco style which was bold, positive, industrial and often futuristic and one which emerged from a world rising from the ashes of WW1.

The Art Deco style itself has also seen a rebirth in recent years, having become increasingly popular over the last decade.

To Recap, the main characteristics of the Art Deco graphic design style are... 

• bold geometric shapes
• use of motion lines and sunbursts
• high contrast in colours
• flat (in terms of depth)

Back To Top

Heroic Realism Style Graphic Design:

Samples of Heroic Realism Style Graphic Design

Heroic realism is a term which describes art and graphic design used as propaganda. Examples include the Socialist realism style associated with Communist regimes, and the very similar art style associated with Fascism. Its characteristics are easily identifiable from the name; realism and the depiction of figures as ideal types, heroes or symbols, often with explicit rejection of modernism.

Heroic realism designs were used to propagate the revolution in the Soviet Union during Lenin's time. Both socialist art and Nazi art were explicitly ordered to be heroic and romantic, and were in consequence idealistic rather than realistic in form and style.

To Recap, the main characteristics of the Heroic Realism graphic design style are...

• realistic imagery 
• usually featuring one person
• promoting an ideal
• strong message in the text
• clear, bold font

Back To Top

Early Modern Style Graphic Design:

Samples of Early Modern Style Graphic Design

Early modernism was a time when artists and designers broke from tradition to create a new style of design which would influence all artists and designers around the world. Early modern artists were described as new or experimental, as they changed the way others saw design and art.

Following on from some of the ideals of the Italian Futurists the Bauhaus was creating a new design philosophy, putting a design's function before its form and rebelling against tradition in preference of anything new and different. This style became known as "modern" and was the start of the rebelling against tradition that has carried through time influencing all the other art and design styles of the world.

To Recap, the main characteristics of the Early Modern graphic design style are...

• geometrically based
• minimalistic approach
• clean type
• more photos, less illustrations

Back To Top

American Kitsch Style Graphic Design:

Samples of American Kitsch Style Graphic Design

The Art Deco influence of rounded streamlined forms and enthusiasm for modern ideas continued to inspire design of all kinds for many years after the 1930s and American Kitsch design of the 1950s took futuristic styles even further with dramatic curves and space-age forms. Kitsch design was also characterized by its script fonts, informal shapes, and cartoon-like illustrations.

Kitsch is a German word meaning "in bad taste". In design, kitsch had been used to describe art or design that is pretentious, vulgar and displays a complete lack of sophistication. On the other hand, the idea that something is so bad that it’s good is how "kitsch" became a term ironically embraced by the American designers using that style.

To Recap, the main characteristics of the American Kitsch graphic design style are...

• contrasting imagery and fonts
• bold, vibrant colours
• aerodynamic shapes
• people in dramatic poses

Back To Top

Late Modern Style Graphic Design:

Samples of Late Modern Style Graphic Design

Late modernism encompasses the overall production of most recent art made between the aftermath of World War II and the early years of the 21st century. The terminology often points to similarities between late modernism and post-modernism although there are differences while the predominant term for artwork produced since the 1950's is Contemporary Art.

Known for, distorted geometric shapes, and informal layouts. The only aspect of this style that isn't informal is the type, which was devoid of decoration.

To Recap, the main characteristics of the Late Modern graphic design style are...

• distorted geometric shapes
• informal structural layout
• plain, simple, non decorative type

Back To Top

Swiss/International Style Graphic Design:

Samples of Swiss Style Graphic Design

Often referred to as the International Typographic Style or the International Style, the style of design that originated in Switzerland in the 1940s was the basis of much of the development of graphic design during the mid to late 20th century. Led by designers at the Zurich School of Arts and Krafts and the Basel School of Design, the style favoured simplicity, legibility and objectivity.

Of the many contributions to develop from the two schools were the use of, sans-serif typography, grids and asymmetrical layouts. Also stressed was the combination of typography and photography as a means of visual communication. The primary influential works were developed as posters, which were seen to be the most effective means of communication.

To Recap, the main characteristics of the International graphic design style are...

• use of negative space
• very 'clean' and simple
• sans serif fonts favoured
• asymmetrical layouts

Back To Top

 Psychedelic Style Graphic Design:

Samples of  Psychedelic Style Graphic Design

The psychedelic movement began in the mid 1960’s and had an effect on many aspects of popular culture. This included style of dress, art, literature and philosophy. The name “psychedelic” refers to drugs that were popular with the youth culture of the time. Posters for rock concerts tried to visually express the feeling of tripping out. The visual motifs of psychedelic art include Art Nouveau-inspired curvilinear shapes, illegible hand-drawn type, and intense optical colour vibration inspired by the pop art movement.

Use of abstracted curvilinear shapes, clashing colours, hard-to-read fonts. Rarely used in today’s designs, the trippy posters of the 60's are the most easily recognizable contribution of the Psychedelic style.

To Recap, the main characteristics of the Psychedelic graphic design style are...

• influenced by the prevalence of hallucinatory drugs 
• featuring abstract swirls of intense color 
• curvilinear calligraphy reminiscent of Art Nouveau. 
• intense optical colour vibration

Back To Top

Post-Modern Style Graphic Design:

Samples of Post Modern Style Graphic Design

Post-modernism didn't have much impact on graphic design until the middle of the 1980's. Initially, many designers thought it was just undisciplined self-indulgence. A hodgepodge of styles, with no unifying ideals or formal vocabularies, dreamed up by students in the new graduate programs. But in fact it was a new way of thinking about design, one that instigated a new way of designing. This mixed up style is characterized by a tilted axis, collage-like illustrations, overlying figures, and impulsive decoration. This style has been used in varying degrees since its first uses and, if used correctly, can give projects a unique expression.

They created works beginning in the 1970s without any set adherence to rational order and formal organization. They also seemed to entirely pay no attention to traditional conventions such as legibility. Yet, while post-modern design did not consist of one unified graphic style, the movement was an expressive and playful time for designers who searched for more and more ways to go against the system.

To Recap, the main characteristics of the Post Modern graphic design style are...

• collage like illustrations
• overlapping elements
• impulsive and playful
• tilted axis

Back To Top

Grunge Style Graphic Design:

Samples of Grunge Style Graphic Design

A recent design evolution, this emerged post millennium and is easily recognized by its extensive use of distressed textures, unrefined edges, and a seemingly nonsensical approach to layout.

In such grunge designs dirty stains, torn images, 'broken' icons and creased pieces of paper are as popular as hand-drawn elements and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.

To Recap, the main characteristics of the Grunge graphic design style are...

• Dirty textures and background images
• irregular lines and frames
• coffee rings, spilled out liquids and dirty stains
• torn paper and dirty edges
• hand-written elements

Back To Top

Flat Style Graphic Design:

Samples of Flat Style Graphic Design

Flat design is a current design style and trend, minimalist in nature, it was initially used in graphical user interfaces such as websites, web applications and mobile apps. The flat design style is now also commonly seen in graphical materials as posters, arts, guide documents, publishing products.

Flat design is primarily influenced by the International Typographic Style (also known as Swiss Style), Text User Interface, Modernism, and the styles emerging from Bauhaus. The International Typographic style is often considered the most substantial influence on flat design and is regarded as the starting point of flat design, although the flat design style itself would not make an appearance until the dawn of the digital age

To Recap, the main characteristics of the Flat graphic design style are...

• minimalist
• no depth
• neutral tones
• straight lines
• use of negative space

Back To Top

Quick Overview...

The Graphic Design Timeline - Click to enlarge

Back To Top

Baca selengkapnya