8 Most Significant Steps to Design a Perfect Website Layout

1

8 Most Significant Steps to Design a Perfect
Website Layout

• By
• Jacelyn Richards

2
1. Sketch your thoughts on a paper

• This seems very obvious but I've found too often
  that designers jump straight into Photoshop
  before giving any thought to the problem they are
  trying to solve.
• Design is about solving problems and those
  problems can't be resolved through gradients or
  shadows but through a good layout and a clear
  hierarchy.
• Think about the content, the layout and the
  functionality before starting to drop shadows.

3
2. Sketch a top level framework

• To create a look and feel for a project, the
  first thing I do is come-up with a top level
  framework that solves all the design problems.
• The framework is the UI that surrounds the
  content and helps to perform actions and navigate
  through it. It includes the navigation and
  components like sidebars and bottom bars.
• If you approach your design from this perspective
  you will have a clear understanding of what your
  layout needs will be when designing sections
  beyond the homepage.

4
3. Add a grid to your PSD

• It's as simple as it sounds. Before starting to
  design anything in Photoshop you need a proper
  grid to start with.
• There are no valid excuses for starting without a
  grid, and yes if you don't, I can assure in one
  way or another, the design won't look as good.
• A grid will help you to structure the layout of
  the different sections it will guide you through
  the specific screen size requirements, and help
  you to create responsive templates, to be
  consistent in terms of spacing as well as many
  other design issues.

5
4. Typography

• Exploring different typefaces and colours is part
  of the discovery phase of a project.
• Using more than two different typefaces in a
  website but it really depends on its nature you
  could use more or less.
• Overall choose a font that is easy to read for
  long amount of text and be more playful with
  titles and call to actions.
• Don't be afraid of using big fonts and overall be
  playful and consistent when using typography.

6
5. Color theme

• Throughout the process of choosing a set of
  typefaces to use you should start exploring what
  colours you will use in the UI, backgrounds, and
  text.
• In terms of colours I recommend using a limited
  set of colours and tones for the general user
  interface.
• It's important to apply those consistently across
  the UI depending on the element's functionality.
  Think about the layout of sites like Facebook,
  Twitter, Quora, and Vimeo.
• Besides the UI there shouldn't be any colour
  restriction for illustrations or graphic details
  as long as they don't interfere with the
  functionality of the components.

7
6. Divide the layout

• Each section in your site needs to tell a story.
  It needs a reason and a final outcome for the
  user.
• The layout needs to help the content highlighting
  what are the most important pieces in that story.
  
• In reality there shouldn't be too many call outs
  on a page so everything should drive to that
  final "What can I do here".
• Think about the most simple layout you can
  imagine for a simple purpose and start adding
  components that are necessary. At the end you'll
  be surprise how hard is to keep it simple.

8
7. Sharpen your work

• Besides any aesthetic consideration there are
  some common things that have to be avoided in
  order to create a clean and correct piece of
  work.
• Some things you should be on the lookout for when
  trying to sharpen your work should include
  gradients banding, blurry edges, font rendering
  options (some fonts depending on their size are
  best viewed on a specific render mode), and
  strokes that merge badly with the background.
• These are just few basic examples of issues to
  look for but in reality the list is endless.
• Always look at your design as a whole to see if
  everything works well and then analyse each
  component individually more carefully.

9
8. Clean up your PSDs

• This is (along with the use of a grid) one of the
  most important pieces of advice when designing
  with Photoshop.
• Despite the size of the project and the number of
  designers working on it, you need to keep your
  files clean.
• This will make it easier to export different
  sections, to speed-up the design process and to
  work with shared files with other designers.

10
References

• http//singapore.fortune-softtech.com/8-most-signi
  ficant-steps-design-perfect-website-layout
• http//www.creativebloq.com/web-design/steps-perfe
  ct-website-layout-812625?page1