Web Design, Layout, and C.R.A.P. Basics

We all came back to class on Thursday after a nice, week-long hiatus from class. Evidently, our professor is one of those who has a soul and knows that attending a night class on Halloween is not desirable. The class after that was cancelled as well, so my classmates and I had ample time to complete our intros and outros for our podcasts.

On Thursday, we listened to each duo's MP3 files and voted on our favorite to be chosen as the class's official podcast intro and outro. Ours was not chosen but my partner and I are pretty happy with what we managed to produce. Take a listen, and if you are an XX fan you will probably appreciate this:

This week we will be discussing all things web design. This includes layout tips and C.R.A.P. basics. 

Layout

An optimal layout can have many aspects, but simplicity is always key. When there is too much information stimulating our brains at one time, we give up on trying to decode the web page's message.

Simple does not mean plain and boring. A simple web page has few conflicting elements that vie for your attention. Elements include: 

• number/size of images
• font size/style
• background pattern/color
• number of videos/gifs
• amount of text

For example, if you have three images that stand out, you may want to tone down the amount of text and choose a background that does not distract from the important information.

This brings me to my next point: emphasize what is important, and deemphasize what is not important. This may seem intuitive, but there are plenty of websites out there where it is unclear what the point of their existence is.

For more web layout tips, check out Design Shack 10 Rock Solid Website Layout Examples

Do not fret if you feel that you have no design expertise. Inspiration is easy to find, and airing on the simple side will always be beneficial. 

One technique is choosing an image as the background and having simplistic text in the center. Another technique is using mostly black and white and using color to highlight the important message. Also, having multiple images, some with text inside and some without, and no background color or text outside of the images is a great way to incorporate variety while keeping it simple. 

For sources of inspiration, check out websites like Smashing Magazine Original and Innovative Web Layouts.

C.R.A.P. Basics

Contrary to its name, C.R.A.P. basics are valuable. I will outline what each letter of this acronym stands for.

Contrast

This is pretty obvious. Contrast refers to two elements being opposite of each other. This could mean having large text and small text, lots of busy images with a plain background, or having three images varying in size. 

Repetition

Repetition is like uniformity. With repetition, a pattern is consistent throughout the entire webpage. For example, one font could be used for all body text while another font could be used for all headlining text.

Alignment

Alignment is similar to repetition; every element should flow in a pattern, with nothing placed arbitrarily. Much can be communicated through alignment. Elements that are similar should be aligned with one another. For example, all titles within a page should be aligned while all subtitles should be aligned.

Proximity

Proximity refers to the distance between two objects. This goes along with alignment in the sense that similar elements are both aligned and close to one another. In order to prevent confusion, items that are different should be placed far apart from one another. For example, if there are images that coincide with certain sections of text, these should be close in proximity.

That concludes this week's blog post! Stay tuned for next week's; sadly, it will be my last.