Design Post Update

Common Mistakes New Graphic Designers Make - And How To Avoid Them

Solution:

Stick to the basic rule of  always try to use a minimum of 2 fonts and a maximum of 3. You can also get help pairing fonts at websites such as fontpair.co or typ.io

Solution:

It's obvious really isn't it, you need to make or take your own images. Or at least edit them to suit.

Solution:

Don’t be scared to leave white space around your elements and give them more room to be recognized and acknowledged. People tend to scan images and text first before deciding whether or not to focus on it for longer so by giving the important elements of a design some space they can help draw a viewer in for a further look.

Design Overkill

Solution:

Try to set out specific guidelines at the outset of the project with your client to help keep you in line. Even if the client gives you free reign over "artistic styling" it is still important to do what's best for them. 

Conclusion

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.

You can do a lot with text in Photoshop through both simple and advanced techniques

Photoshop was and still is primarily a photo editing software and always will be but it does have a wide range of text editing tools and capabilities that often go untapped or unnoticed by us. The tips below will help you to make the most of text in Photoshop.

Box Over Point

Always create a text box rather than a text point. Click and drag when using the text tool to create a text box. This gives you more control and options when positioning and formatting the text.

Diagonal Text

You can have text going horizontally or vertically. If you want to put it diagonally, type it horizontally first then use Edit > Transform > Rotate.

Divide and Conquer

Give separate pieces of text, such as paragraphs, a text box of their own. This will maximise your editing opportunities if you want to make major revisions or changes later. This is especially true with posters, magazines or CD/DVD covers.

Quick Access

To return into a text box double click on the ‘T’ beside the text layer. This is the easiest, fastest and most fool proof method. You may think to just double click on the box in the canvas but you need to be using the text tool first to do this while with the other method you don't.

Colouring In

To change the colour of text you must enter into the text box, highlight it and then choose a colour from the text colour picker at the top of the screen, not the colour picker on your tool bar. You never use the paint bucket or paint brush as this will force rasterisation of the layer. A layer style > colour overall will also work but takes longer to add and to edit.

Don't Rasterize

Never rasterize text unless it is totally necessary, read any pop ups that appear and if it says you must rasterize the text cancel it unless you had intended it. The text will no longer be an actual text layer once rasterized so If you rasterize text you will lose all the text editing capabilities like changing the font style or using text warps.

Text Warp

When using text warp you should reduce the text box to snugly fit the text. This is because the text warp actually warps the text box and not the text directly, so a snugger text box gives you more control with the text warp.

Styles before Filters

Layer styles can be applied to text without rasterizing it but filters from the filter gallery cannot be applied to text without rasterizing it.

Customising Letters

To edit the shape of text by editing anchor points you first need to convert it to a shape. To do this, select the layer, go to layer> type> convert to shape. This will turn the text into a shape layer. You can then edit the individual anchor points using the direct selection tool.

Images as Text

You can use the horizontal or vertical type mask tool to “cut” text from an image. It works by selecting part of the image in the shape of the text you have typed. This can be a nice effect to have an image running through your text as opposed to a flat colour or gradient. This tool works like normal text but after you have typed the text you will then need to use the move tool to move the selection to the canvas or canvas area you want it on.

Character and Paragraph

The Character and Paragraph windows give you additional text editing options such as line height, letter spacing, text height, font weight, alignment and much more. Good text is very important in design, spend time working on it and experimenting with the different options that can be achieved.

1. Avoid Image Overload...

We are now bombarded with more images and information than ever and our brain simply can't process it all

We are now exposed to more information than ever before through TV, radio, emails, text messages, snap-chats, skype calls, viber etc. There are screens everywhere we look and it is simply impossible for us to process and remember everything we see. But we do remember some things of course.

As a designer, the question is how can you make your designs memorable? The answer is simple...no really it is simple! Complex visuals with multiple images or areas of focus distract the eye from each other and actually prevent people from taking in any message at all. On the flip side, simple images/visuals with a single focal point and a consistent design style can be processed more easily and are therefore more likely to transit their message to the viewer. All the design tips which follow also have simplicity at their core.

So before you start a design project, identify the key requirements and focus on translating the single most important message. For example in a movie poster make sure the viewer walks away remembering the movie's name, if they remember that they can look it up online to find on when it's out, where it's on etc.

2. Grab Attention...

Did I Catch You Looking...?

Made you Look! Good, I was trying to. The first tip was to keep your designs simple and have a single focus so that they will be more easily remembered but that will of course only work if you can get people to look at it ion the first place.

There are actually 7 different image types that are proven to grab attention, make sure your designs main image contains one of them. The first one is obvious (I've used it above) and that's sexy. The others include Funny, Surreal, Iconic, Shocking, Bright (vividly so) and, the hardest to achieve, Original. Read more about Attention Grabbing Techniques.

3. Get Vector Friendly...

This image is made up of layers of flat colour tones and vector shapes

Vector images are another great way to keep an image simple, as you can use them to reduce an image down to it's most basic form and yet (if done correctly) it will still be instantly recognisable by the viewer. In fact, a vector image will be more recognisable and memorable than a photo as they are less common and therefore stand out as being original.

Once mastered, the vector tools in Photoshop or Illustrator are also a really quick way to block out a designs structure and form which can help you visualise the final design more easily. In graphic design projects where an image might be reused in a variety of situations like a advertisement which can appear on anything from the side of a bus to pop up on a mobile website then vector images also have an extra advantage as they can scale up and down without losing quality or pixelating.

4. Forget Colour*

Black and white images are more powerful due to the contrast

A lot of designers make the mistake of starting a project by adding colour to their design in the form of a gradient background or by inserting their main feature, often a colour photograph. Although it would seem to make sense to get the main features of a design in place early it can actually slow you down in the long run.

*Working in just black and white at the start of a project allows you to focus on the composition and layout of the design without the distraction of trying to choose and match colours as you go. Think about any design template you see, they are all in black and white and focused on structure. Here and here for example.

If the composition in a design is poor the viewer will not be drawn in to look at it no matter how nice the colour scheme is. A good composition also allows you to structure the design to ensure the key message is in focus compared to the other elements which may surround it.

5. Have Principles...

This image uses 2 of the 5 design principles