Ten Tips for New Web Designers

Roberto Blake

1

For those of you who may be less familiar with the details of web design it can feel overwhelming to even approach a web design project. However, web design doesn’t have to be dramatically different in approach than any other creative project—and with the right process in place it can be more manageable.

These 9 tips will help you get started with your new design projects and give you a better sense of clarity so you don’t get bogged down and overwhelmed by the prospect of designing a website. And many of these ideas can be applied to other creative projects as well.

1. Create a Design Brief/Scope of Work

One of the biggest mistakes that designers make, whether working on web design projects or any other type of assignment, is not having a brief early in the process. Having a design brief and knowing what the project is supposed to accomplish and what the expectations are can make all the difference in the way you handle the project and the methods you use in executing it.

2. Create a Comp or Wire-frame

Too often designers jump straight to the computer and a blank slate when beginning their work. The result is typically minutes or even hours of wasted time simply trying to decide what to do next. If you begin the project with a “road map,” it is easy to get straight to the work and be more productive. Consider either using pencil and paper or a mobile app like Adobe Comp CC to develop a basic layout for what the website should be like. You can always continue the work in Adobe Illustrator or Photoshop later on to make something detailed enough to get a client approval.

3. Understand the Structure of the Site First

Having a layout for the site is a good start, but knowing how the internal structure of the pages are going to relate to each other can be even more helpful. When you know how many pages of the site there are, how many different layouts you need, and what the relationship between pages are, it can provide you added clarity. Knowing these things, you can work from the beginning with the end in mind and avoid doubling back to correct your mistakes. Adding new pages or alternate layouts later can also be easier.

4. Gather Assets and Resources Beforehand 

Before you begin work, having any of the necessary logos, photographs, and text copy is ideal. This means that you won’t have already built something only to have to figure out how to make it align with other assets later on. As a result, your website will feel more intentional and consistent and not like you shoe-horned things in as an afterthought. Request these things upfront from your client or employer and emphasize how important they are for you to begin work and complete it in an efficient manner.

5. Focus on Responsive Design

Mobile device experiences matter to us more as consumers than they ever did in the past. Our first experience of a website is often on a mobile device now. Many web designers who are coders do not like Adobe Dreamweaver, however one of the key benefits of Adobe Dreamweaver CC is that it allows you to use a visual design workflow to adjust how your site looks (in real time) on various mobile devices and screen sizes, so you can actually see what an end user will experience instead of guessing.

6. Keep the User Experience In Mind

When designing a website, being consistent and concise is often more important than being clever—and it’s certainly better than being complicated. Don’t get bogged down in functionality, or even the aesthetic form at the expense of a good user experience. A good rule of thumb is to keep the guess work down for the user and make things as simple as possible. The fewer clicks or work someone has to do in order to get what they need, the better.

7. Don’t Ignore the Look and Feel Just for Functionality

Far too often designers overemphasize form or function, without the appropriate balance of both. This is particularly true when it comes to web design. Sometimes there is more “web development” and coding than actual design, resulting in a well-built but completely unappealing site.

Typically, websites are an investment and for them to yield a good return on that investment, users have to be willing to use them. That means that the aesthetic can not be ignored and sacrificed on the alter of good code and functionality, if you want real world users to enjoy the site, and the client to be able to achieve their goals.

8. Optimize Your Websites to be Fast

Time is the thing we tend to value above all else, so make sure you website respects people’s time. Optimize images to load fast and try to keep your code as lightweight as possible. Sometimes ignoring cool trends like parallax scrolling, or animation is the best choice and will help your end users get the experience and results they really need. Speed and smaller file sizes are even more important on mobile websites that consume the user’s data, which may be limited or costly.

9. Test Everything Before Launch

Testing everything before launch is critical to the success of a website. While it is less devastating to have an error on a website than to find a mistake in a finished print job, you should still do all you can to avoid errors. Test your website in multiple browsers and across multiple devices. Try not to take this for granted. Have as many people testing the site as possible so that nothing is overlooked.

10. Backup Everything, Twice

Aside from having the website reside on the live server you should have at least two backups of it as well. Consider having a physical backup as well as cloud backup. You may want to also have a version of the active site that you download each time before doing major revisions. This can help in the event that a change ends up damaging the website in some way. An ounce of prevention, is worth more than a pound of cure.

Let’s recap these tips:

1. Create a design brief or scope of work with the client or employer before starting
2. Create a comp or wire-frame before coding to have a road map for execution
3. Understand the structure of the site and how pages relate to each other
4. Gather assets beforehand, especially anything you need from the client/employer
5. Focus on “responsive design” and how sites work on mobile devices
6. Keep UX (user experience) at the forefront of your mind when designing a site
7. Don’t ignore good design practices and aesthetic just for functionality
8. Optimize your site and images to be as fast as possible
9. Test everything as much as possible before launch
10. Backup your website and assets in two places other than the live server

Here is a quick video of my Top 5 of these tips which adds a bit more context for you.