Rules of Website Design

10 Commandments of Website Design

What makes a "good" website? Besides content, of course, design principles play a HUGE part in the quality of a website. Design not only catches the readers eye, but it maintains the connection between the reader and the page. When one encounters a poorly designed website, one often loses interest in the message that the website is trying to present.

The rules listed below describe the traits of quality website design:

1. Simplicity is golden

-The most important rule in all of the design characteristics has to be SIMPLICITY. In this definition of the term, one recognizes that simple doesn't mean basic. By keeping your site simplistic, you adhere to the information that the reader needs and you eliminate all excess.

2. Keep it consistent

-Similar to the repetition principle of the "C.R.A.P." acronym, it is essential that your website stay consistent throughout its pages. By using the same color palette and fonts for headings, sub headings, and paragraphs, the readers eye can easily navigate to the information they are seeking.

3. Choose a memorable URL

-A website address is an investment (both literally and figuratively). It is a literal investment because you must pay money for your website to go live at the address of your desire. When you choose a name for a website, you are committing to your brand. 

When choosing a domain name, make sure to:

*Avoid using punctuation- it confuses the visitor ("is that a underscore, or a hyphen?")

*Beware of similar existing website addresses, some are trademarked

*Keep it simple, once again. 

(Starbucks.com vs. WeSellCoffeeAndBagelsAndCakePops.com)

4. Contrast text color with background color

-By contrasting the text color with the background color the eye is better able to read the words without straining. Though this may seem like an obvious guideline, don't forget that this becomes more tricky with brighter colors.

->Just because the colors contrast, doesn't mean it is easy to read.<-

5. Navigation

-Your page should be easy to -> navigate. By having a simple menu bar, as seen in the image below, the user can quickly see which page they are currently on and which page(s) they can explore. This is especially helpful for returning users who know exactly what information they are looking for.

(smashinghub.com)

6. Require minimal user info

-When requiring members to "sign in" or "sign up" to continue, keep the information you initially request from the short and simple. Add an option for users to personalize their profile at another time, so that they aren't immediately turned-off by too many personal questions.

Below is an example from Stikkit.com that asks users for 3 simple pieces of information.

(http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/)

7. Create links in your site, and MAKE SURE THEY WORK

-Have you ever been to a site where the "click here" pages lead you to an error page? It is absolutely ESSENTIAL to avoid this mistake in your website design. By having misguided or broken links, you lose credibility with your viewer. This can result in a loss of trust which can cause a loss of profit consequentially!

8. Have a polished, professional logo

-Companies like Starbucks, Shell, Safeway, and many others all share a trait that makes them recognizable, even from miles away; a logo. By creating a logo for your website, you make it easier for users to recognize your brand and become familiar with it. By posting your logo on the top left of your website, it often becomes the very first thing people see. It is also smart to link your logo back to your home page, just in case users become misguided on the page.

9. Check the pages functionality on the web and mobile version

-Be sure to preview your site any time you make changes to ensure the site looks good when users are browsing from a laptop or computer. Additionally, many people browse the internet from a handheld device, but not all sites offer a mobile-friendly version. This can result in major loss of potential visitors, as many people browse the web on their phone and can become frustrated when the site does not function on a small screen. By creating an app or mobile-version, visitors will stay on your site longer and potentially recommend your site to others because of the ability to browse on-the-go.

(http://mac.softpedia.com/blog/Amazon-Mobile-iOS-2-3-1-Offers-Delivery-Alerts-308573.shtml)

10. Finally, be creative and have fun with your site!

-The idea of starting your own website can feel daunting. You may be thinking, "How and where do I begin?" Website builders such as Weebly.com or Wix.com offer many design templates free of charge that can get you started. These sites are extremely user-friendly, and allow you to modify your design with a simple few clicks; no html coding knowledge is required. While being creative is key, don't be afraid to take ideas you see on other sites and incorporate them into your own page!

Sources:

http://www.businessnewsdaily.com/167-the-dos-and-donts-for-picking-a-url.html

SmashingHub.com

http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

http://mac.softpedia.com/blog/Amazon-Mobile-iOS-2-3-1-Offers-Delivery-Alerts-308573.shtml

http://www.wcbsprintservices.com/category/logos/

C. R. A. P.

In the design world, what makes the difference between "crap" and C.R.A.P.? First, you must know that C.R.A.P. is an acronym that represents the 4 basic principles of good design. These principles are contrast, repetition, alignment, and proximity.

CONTRAST 

Why is contrast important, you ask? Contrast helps the viewer to focus in on what is important on your website or blog. By contrasting the text color with the background color, the audience is able to easily read and navigate your page.

Beyond color contrast, font styles are also important when deciphering a web site. It is important to be able to recognize headings from paragraphs as well as decipher between clickable links and normal text.

REPETITION

Repetition creates UNITY. Unity is a technique used in branding in order to make the company RECOGNIZABLE. 

In order to do this in a webpage, make sure you have consistency in:

-Colors

-Fonts

-Borders

-Headings

-Text Boxes

-Format

ALIGNMENT

By using rulers and gridlines on website builders such as Weebly.com or Wix.com, you are able to align your material so that it comes off with a clean and sophisticated look. 

Nothing

Should

Be

Placed

Arbitrarily

It->should->have->flow

This isn't always as easy as it looks. Above, we get tips on how to maximize the use of the grids on Wix.com. 

PROXIMITY

It is absolutely VITAL that your web page includes some type of organization via proxemics. Your readers want to be able to easily find the information they are seeking from your page, and by arranging similar material with each other, the reader saves time searching the entire page. 

Sources:

http://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/

http://blog.teamtreehouse.com/how-crap-is-your-site-design

http://2012books.lardbucket.org/books/designing-business-information-systems-apps-websites-and-more/s07-01-c-r-a-p-principles-of-graphic-.html

LinkedIn & InDesign

LinkedIn
When we hear the term "social network", we commonly think of websites such as Facebook, Instagram, Tinder, and Snapchat. 
What do all of these "networks" have in common? (Besides Zuckerberg) 
A: All of these programs are used to share photos, words, and more with friends (and sometimes complete strangers.) 
Many people think that these programs have no important value, and many argue that they can be detrimental to one's professional image. Though this argument is sometimes valid, there is a social networking site that is aimed to help one in their professional careers: LinkedIn.

I have always heard about the site, and decided to check it out for myself. As an avid user of many of the popular social networks, I was interested to see a site designed to help people with employment opportunities. 
Below is a screen shot from a profile on LinkedIn:

This shows the basic profile of a designer named Lauren Bowen. What I like most about LinkedIn was the simplicity and efficiency of the layout. Directly at the top, we see her "current, previous, and education." This makes it easy to see what Lauren is currently pursuing, while still giving us a brief background on her past. In the top right corner we have a service that recognizes who you are viewing and your mutual "links" in order to provide possible matches.

InDesign

Ever dreamed about creating your own book? This simple Adobe program makes it easy for anyone to create anything from a book, article, flyer and many other publications. The software includes a two page spread option as well as cover/back page etc. While organizing your project is easy to do on InDesign, it is helpful to use Photoshop simultaneously in order to more closet edit your images and isolate them from the other images. Once you are satisfied with your image in Photoshop, you can save the image as a PNG file, and easily place it into your InDesign project.

Once you place your image, a guide box will appear. This box will act as a window around your image, dealing with its placement and alignment on your page. When you are happy with the guidelines, you can select "Fitting" then select "Fit Content To Frame". Looking a little blurry? Don't worry! All that is left is the "Overprint Preview", which should instantly clear the image.

The video below explains just how easy it is to create guides for your page!

Starting a website or podcast

Hosting your site: Wix vs. Weebly

Many people don't realize just how easy it is to create a website! There are many different website building sites that allow users to design a page without any knowledge of html "coding" or the symbolic arrangement of statements or instructions in a computer program in which letters, digits, etc are represented as binary numbers. (http://dictionary.reference.com/browse/coding)

Just starting out? Try creating a profile on Weebly.com. In this website builder, you are able to use their templates (such as backgrounds, text boxes, image boxes, etc) OR you have the option to html code. You can use any combination of the two! This website makes it very simple to create your page, by just dragging over the tool that you want on your site. Deejay Tech shows us just how easy fusing coding and the templates is!

Personally, I find Wix.com to be a little more intuitive and more simple for the beginner. My group and I are currently using Wix to create a major guide for the Communication Studies program. Wix's layout contains less icons as Weebly, yet it still offers just as many features. Though they might be harder to track dowb, some of the features it offers are mentioned in the video below.

Podcasts

Podcasts can be made for a variety of reasons. Some people make podcasts for entertainment while others create them for informative or educational purposes. Podcasts require audio only, which can make the editing process smoother than with say a video. When recording a podcast, it is important that you isolate your voice so that you eliminate the chance of undesirable background noise. Though it is fairly easy to edit out unwanted sounds, a clear, uninterrupted recording of the sole sound you want will produce a better result.

Audacity

In a program such as Audacity, the user is able to edit the recorded sound. In this sense, interfering sounds and pauses in speech are EASILY removed with a few clicks of the trimming tool. Each recording is imported into the program, and are easily dragged around to the desired location. In addition to imported sounds, Audacity and other similar programs offer special effect tools so that you can give your podcast or song the right feel.

Effects

In the video below, the audience is able to see how to use features such as:

-Noise Removal- removes background noise

-Normalize- makes sound loud as possible without changing the sound waves

-Compression- reduce fluctuations in voice

-Equalization- bass boost (strengthens voice) treble boost (clears voice)

-Hard Limiter- takes off massive spikes in waves