Tuesday 11 October 2016

Pixel Perfect Principles


Pixel perfect principles are the sort of 'rules' when designing something on any of photoshop, illustrator and so on. These are the basics to start from, making sure that your basics are correct. 
Your primary consideration should always be your users, ie: the target audience. Age will greatly affect how you design your work, be it with text, style, detail, colour etc.. 

The main Principles are: 

  • Environment
  • Accessibility
  • Copy
  • Colour and Shape
  • Visual Hierarchy
  • Typography
  • Motion
  • Testing
  • Prototyping
  • Taking a Break!



  • Environment - The environment consists of the 'literal' environment of the product. For example the difference in designing the layout of a television and a mobile phone will be very different.

  • Accessibility - Accessibility refers to how accessible it is to users not in the sense of having a disability by how easy and reliant it is to use. Things such as people with colour blindness and dyslexia should be taken into consideration. Things like simple wording and straight forward wording could be of great use to all types of people, sweet and simple.
Take this example of google. The top is how the logo actually is, and the bottom is how colourblind people see it. So making things more eligible to read instead of complex designs would be more appropriate.


  • Copy - When it comes to copy, this refers to that what you say is as important as the design itself. So here the wording is vert important, being in a positive tons and welcoming approach rather than just boring text. This will invite the reader to continue reading and feel a sense of emotion when reading the text. Look at the example below, the left is the boring text and the right is the best way to write text.

  • Colour and Shape -  Colours and shapes have become tied to specific meanings, feelings, warnings and so on. This makes it important to use appropriate colours and shapes in the particular type of design you will be creating. For example, green and ticks are seen as good whereas red and crosses are seen as bad or wrong.

  • Visual Hierarchy - This is all about how the text is going to be laid out. Think how you would like yourself and others to see it, in what order, what type of colours and go by that. You could grab someone's attention by using high contrast and large bold type, or lower contrast and smaller, lighter type to push items to the back.

  • Typography - This should be high on your priorities. This is the information itself. You should make the size and spacing comfortable for the reader to read without squinting or getting discouraged to read it with long lines or bad font. Treat type with the respect it deserves.

  • Motion - Motion is important to be used if you want to give a direction to the reader. For example you want the user to click on a specific button, you could add motion to it to attract the readers attention and curiosity.

  • Testing - Nothing beats testing on the desired device. For example if you are designing a logo, check how it looks on phones, laptops, computers, even maybe on TV for commercials. This is important to note details that you might want to change. Testing is very important.

  • Prototyping - Prototyping could be different things such as doing a detailed version of your project, or simple sketches of the possible outcome. These will help give you direction in your project for the best possibility.

  • Taking a Break! -  This is very very important. Breaks are essential to you to recover and relax to be able to focus when starting again. This also helps to solve a design problem. By having a break and going back, you might look at things differently, notice something you want to change or think of something new and better.



REFERENCE: http://cdn.ustwo.com/PPP/PP3.pdf







No comments:

Post a Comment