A Web Design Guide (for Non-Designers)

Design is a lot like cooking. You combine a bunch of elements together and the final result either brings out satisfying bliss or prompt disposal into the physical/ digital trash. The first time I designed a website was actually the first time I built a website and it was for a dancer…the exotic kind. I had some experience being a graphic designer so there were some things I did right but also a lot I did wrong.

With that said there are fundamental rules that everyone should follow when designing a website to ensure your client requirements are met and that your website provides a good user experience.

Gather Client Requirements

This can be harder than you may initially think. If your client is an established company, they will more than likely know exactly what they want, from what links and categories should be on the home page to the color scheme. If it’s a person looking to start to a new small business, they might say “Oh, just a simple website that I can post my pics on”. Guess which type was my client…

So this is what you got to do to drag those juicy requirements out:

  • The three main pages of most websites are the Home, About and Contact page. Explain to your client what each page is for and to provide you with the content you will need for each page.
  • You will need to identify special features that are unique to your client’s website. My client needed an image gallery and a way for users to create an account and login. This meant a new page for the gallery and pages for the user creation process and account profile. Let your client send you the content for these pages as well. Some of the content you will be able to fill in yourself so just use your discretion.
  • It’s time to sift through all this content. Identify which pieces of content you feel are crucial to the website, irrelevant and in between. Don’t make any decisions on your own though, discuss with them how you feel about some of the content and see how it could be improved or left out. My client felt she needed to put a lot of “sexy” quotes around her website to entice her customers but we were able to convince her it would probably makes things a little too crowded.
  • Create a Content Hierarchy. Group content you feel is related to each other and create headings for each. Break it down into sub headings, lists and images as necessary; remember the aim is to make all the content you have easy to identify and navigate for the user.
  • Site maps are good for giving a visual representation of how many pages your website will have and if your content hierarchy makes sense. Here is an example of the site map for my website:

Figure 1: Site Map

This is also useful to show to your client before actually designing a webpage, as it allows them to identify any potential problems and make changes easily.

Sketches & Wireframes

Once I had a good idea of the content and pages I would be working with for my website, I knew the best way to begin designing was to put pencil to paper. I started doing simple sketches of each page to figure out how the content would flow from left to right and top to bottom. Sketching is a great way to try out multiple design layouts for your website. Go crazy with it! This is arguably the most fun part of the process and don’t even think about neatness.

For my home page I knew I would need a menu bar, a header image, a section to enter the login info and the footer.

Figure 2: My sketch masterpiece for my “Home” pages and “Create Account” page

Make little notes as you deem necessary on your sketches for any elements you think would be nice.

Once you have landed on a layout you think is good and consistent among all pages it’s time to turn that sketch into a wireframe. To be honest I never did any of this stuff in the beginning, I just went straight to Photoshop and created some designs. Heh. Don’t do this.

Wireframes is basically designing with blocks. You use blocks to identify the different sections of the web page such as paragraphs, headings, images, logos and menus. It’s a good idea to label these blocks as you go along so when you show it to your client he\she will able to easily understand what it is your trying to accomplish. Feel free to replace the blocks with actual content if you deem it necessary.

Figure 3: Wireframe for my home page and general layout, I use two different styles of wire framing here. The “X” boxes represent images.

Wireframes can also be used to illustrate the responsive design for your website i.e. how it will look on different devices. Assigning numbers to the different webpage elements can help your client understand the hierarchy of the content and how it will flow.

For example I would assign:

  1. Menu
  2. Header
  3. Column 1
  4. Column 2
  5. Footer

Any application that can create shapes can be used to do wire framing for example:

  • https://wireframe.cc/# — A Free online resource that gives you the basic tools you need to build your wireframe. Very useful tool, only thing is you will have to get the premium version to export it into other formats.
  • Keynote and PowerPoint — Normally used to create stunning presentations, the options available allow you to create some quick and easy wireframe designs.
  • Balsamiq Mockups — Is made for wire framing, the application of choice for many professional web designers.
  • Microsoft Visio — Not free, but great for professional grade mock-ups for users at any experience level.
  • Adobe Photoshop — And of course, the familiar Photoshop, equally effective at putting together designs quickly and easily.
  • Proto.io — quick and easy interactive mock-ups for mobile applications.

Choosing a Color Scheme

So now that you have your wireframe, you’re going to want to select a color scheme for your website. I understand that this can be tricky to get right. My website’s main background color was dark grey with shocking pink accents with white text. It actually wasn’t all that bad but because I hadn’t done the pre-work of creating a proper layout using wireframes, it didn’t come together as best it could.

Seeing as how this is a guide for non-designers, it would be a good idea to learn some color theory. Colors have many different meanings across the globe and that should play a role in how you want your visitor to feel when they come to your website. Some colors complement each other well while others will clash, the link below will give you insight into to how to go about choosing a color scheme:

http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

On the flip side, your client could want you to build the website using the color scheme of their company logo, which may or may not be good news depending on if the logo is actually good. If it isn’t, try to gently explain how using some other neutral colors might facilitate a better experience.

I have a few personal rules that I follow when it comes on to design that you can adopt for yourself:

  • Rule of Three — I generally don’t use more than 3 variations of an element for consistency. No More than 3 Fonts, 3 Font Sizes, 3 Colors (variations of the same color is fine). This rule is bendable but I fine more or less sticking to this gives me something clean to look at.
  • Alignment and Spacing — We as humans love symmetry; it’s how we define beauty. Do your best to keep spacing between headings, paragraphs, links and images as consistent as possible. Sticking to consistent alignment of your website elements will also go along way for readability and navigation. Some people may not actively talk about these things but it can bother them on a sub-conscious level and lead them away from your website in the future.
  • Dark Color Schemes Vs Light Color Schemes — Quite simply if the site visitor is going to be reading a lot, stick to white backgrounds or very light colors with dark text on top. If the website is more media oriented i.e. images, music, videos, darker color schemes can definitely work to set the right mood.

The typical website width is 980px, this can be as high as 1230px when it comes on to responsive web design but that’s a topic onto itself. Even after knowing all this, it is still sometimes difficult for me to come up with color schemes for my websites. There is a saying “Good artists copy, great artists steal”. Now in no way am I saying to plagiarize, but taking inspiration from elsewhere can be a BIG help.

My go to websites for inspiration are:

Slice & Dice

Well! After your design gets approved its time to cut up the different images you will be using on your website:

  • Adobe Photoshop — Gives you the tools you need to cut up images precisely for your needs…if you can afford it.
  • Gimp — A free alternative to Photoshop. It may not be as robust but it will definitely get the job done.

The standard resolution for web images is 72dpi and below I will list the standard formats that are used:

  • JPEGS — Are commonly used for images with millions of colors such as photographs. They do not however allow for transparent pixels. Transparent backgrounds always default to white.
  • GIFs — Allow for images of up to 256 colors and are more appropriate for logos and icons with solid colors. They do however allow transparent pixels.
  • PNGs — Work like GIFs but allow for 16 million color images. Some older browsers do not support PNGs but they allow you to make more complex design decisions.

I would recommend using as little images as possible while staying true to your design when putting your website together. If you can use the styling elements that CSS provides to get the same effect, do it! This will make your site faster and more responsive in the long run.

An example of this is before CSS3, if we wanted to create gradients, we would have to boot up photoshop and create the gradient, cut a strip from that and have it repeat on a X or Y-axis. Now we have CSS commands like background: linear-gradient(red, yellow); which will create our gradients quickly and easily. More on that here.

You only really need to slice up images for very custom features, like if you created a icon in Photoshop, or a specific pattern that you want to use on your website but the choice is yours in the end.


Originally published at www.webunition.net on May 15, 2015.