Welcome to the fifth part of Inspired Magazine’s mini-series on the process of designing a website (check out Part 1, Part 2, Part 3 & Part 4). The design of a website is generally considered to be the largest portion of the web development process – and it involves a great deal of time and work, but as you’ve seen it makes up only 1 part of this complete 8 part series. So, while you shouldn’t minimize the role design plays in your own development structure, understand that the other parts involved are equally important.

The design phase of the process of building a website involves taking your wireframes and laying on top colors, imagery, and other elements. At the end of this step you’ll have a visual representation (JPG, PSD, image) of what your final site will look like. In using the metaphor of a website as a building – your wireframe is your blue print – your design are the final sketches an interior designer lays out featuring the wall colors, carpet, etc.

Web Design & Photoshop

iNoobs: Process of Designing a Website | Part 5 DesignGenerally speaking – for a web developer photoshop is too much. But you should know photoshop. It is THE standard for the actual DESIGN of a website. And, although you won’t use 95% of it’s bells and whistles, it is one of the fastest tools to help you get your job done and those extras are always there when and if you need them.

There are plenty of people out there that don’t use Photoshop, they instead use Gimp, or Fireworks, or Corel Draw, but Photoshop is the standard and in the long run, because it is the standard simply staying in the eco-system will save you time.

Steal Other People’s Designs

iNoobs: Process of Designing a Website | Part 5 DesignFor the purpose of this article I’ll assume you’re new to website design, as the topic of the design of websites deserves it’s own series (and there are already plenty of on and off-line magazine dedicated to this topic). However, no matter at what level you’re at – or how long you do web development – it is an valuable skill, and free resource to simply look at what others have done and steal it!

Okay, don’t steal it directly, but in looking at others’ sites – analyze what you do or don’t like about them, and include relevant elements in your own site.

And even as you progress – there are going to be more talented designers than you (or in the very least, those whose style you envy) – so look to these individuals and websites for inspiration.

Be Hyper Critical

I had an art teacher that once told me – “If you want to be a great artist, you have to have a big ego!” She yelled that at us from the front of her classroom more than once. “You have to be willing to scream and know that you’re the best!”

As I’ve gotten older I’ve come to appreciate this more and more. Squeaky wheels do get grease. But so do great wheels. And let’s face it – most of us don’t want to be the a$$h0l3s that scream and yell they’re the best. One of the beautiful things about the web is that your work WILL get seen – and it can get seen by millions – from all over the world (if you’re lucky).

There are far too many people in our field that claim to be great designers and they aren’t self-aware enough to view their work critically. I have had countless designers send their resumes/portfolios or worked alongside designers that SUCK – they can’t effectively communicate a message, use the wrong tools, or plainly create something that is unattractive. Many of these people had worked at major ad/marketing agencies or were somewhat professionally successful (keywords being HAD and SOMEWHAT). So don’t be that person, just create an attractive design that meets your or your clients goals, and never stop growing/learning.

Tips for Setting Up Your Designs

  • Use Photoshop – since it is the defacto tool it will save you time, it is a very robust tool.
  • Use Layers & Groups & Keep Your Files Organized – You may have a tendency to sloppily create your designs using many cluttered layers. Instead, keep things organized. As you code and crop and cut up your design for final production – or as someone else needs to do that for you – it will save countless hours and questions if you stay organized now. Structure your files from top to bottom – those things on the top of the design are at the top of the layers menu.
  • Don’t Compress Anything – Always keep the images you import at the highest resolution and don’t compress anything – not until it’s time to start actually building the site.
  • Use Real Content When Possible – Remember the above steps?! It’s time to use your own imagery, copy, logos, etc. to save time and get to the end as quickly as possible use your actual content.
  • Your Wireframes Will Match Your Designs – If you’ve created 2 wireframes (home page and internal page) you should have 2 final designs.
  • Reuse When Possible – Many time your header (the very top of your site) and the footer, will be exactly the same so within your photoshop files, reuse those layers/groups in a new file.
  • Text is IMPORTANT – Understand the supreme importancw of text, it’s use in the designed elements of the site, it’s use in normal content.
  • Think Width & Height – Understand your site will be viewed on different screens, devices, etc. Think about what happens to the design during scrolling (left/right/side-to-side)
  • Imagery Makes or Breaks a Site – A great logo and unbelievable image can provide just the palate and feel a site needs!
  • Refer Back to Your Plan/Sitemap – Do each of these designs meet your goals? Is it communicating the message you want it to communicate?

Get designing! For many, this is perhaps one of the most fun parts of the whole process. Turn on some music – pop in your head phones, and start playing with colors, fonts, and images!

If you have any questions, and I feel like this step more than many deserves them – please feel free to leave a comment and I will respond promptly!