Blog Post #7 - Beautiful Web Design

The content of this blog post was inspired by, re-interpreted and often ripped off from the text 'the principles of beautiful web design'.

Chapter 1 - Layout and Composition

Digital Mash

Before actually designing anything, the first thing you should do is think about the content of the site. What will the function of this site be? The book outlined points to think about and to research before actually drawing up any compositions.

• What is your goal in developing a web site?
• What information do you wish to provide online?
• Who is the target audience?
• Who are your competitors and do they have web sites?

I believe these are the general thoughts that should be crossing your mind before starting the design. But designing a site is not a one-dimensional task. The content is probably the most important aspect, but the design must be good as well. The content must be clear and reach people effectively, while the design has to keep their interest. If these two elements are in working order, the web site can then be considered 'good'. Much like graphic design, principles must fall into place for it to be aesthetically pleasing. These principles should be ingrained into everyone by now; rule of thirds, balance (symmetrical and asymmetrical), unity, proximity, emphasis, contrast, proportion, etc. Not only should these principles be practiced, but the medium must be addressed as well. Screen resolution should fit the majority without hindering the minority.

Chapter 2 - Color

Kuler

Color is an important part of any website. When used effectively, color can compliment a concept for a web site, as well as help make it look appealing. Choosing the right scheme is very important, and its good to go with colors that match your content. The way to pick colors is to remember color relationships. Analogous, complimentary, these are palettes that have been tried and tested to work. The major thing to keep in mind when applying colors is contrast. Make sure your colors don't have similar contrast when overlapping or being in close proximity because this can cause color vibration or difficult to read areas. When in doubt, turn off the color to your monitor in preferences and look at the design. If two colors are similar shades of gray or disappear within each other, they should probably be re-examined. Its good to use similar color themes throughout your pages to help unify the design

Chapter 3 - Texture

CG Textures

Texture, much like color, can give your site a distinctive style or feel to it. Texture is not just limited to some random woodgrain or metal effect either. Remember, points, lines and shapes can also be used to create textures. Usually people utilize these by repeating them as a pattern for a background. This helps separate the space of your web site and breaks up the information into distinctive areas. Texture can also be created through lights and darks. Everyone is probably familiar with the popular look for buttons and banners now, with their glossy/shiny textures. These can help life a site from two-dimensions to three-dimensions because of shading. Its important to remember to choose textures that represent and compliment your content.

Chapter 4 - Typography

J.R.Velasco

Fonts can be the more simple task when creating a web site since web safe fonts are already supplied to everyone by using the font-family property in CSS. However, typography has room to be adventurous and exciting as long as its well-chosen and executed. Along with all the terms and definitions taught in a typography class, how type is displayed on a screen is very important. Things to consider are horizontal spacing and vertical spacing. A lot of content can quickly become overwhelming to read and needs more spacing between lines.

Typography doesn't just cover the type treatment, but what is marked-up in the HTML. Special characters need to be marked up to have the proper display when viewing.

Chapter 5 - Imagery

Flickr

Imagery can be a very strong element on any web page and tend to command a lot of focus and attention. A few things you should ask yourself before posting a picture is: is it relevant, is it interesting and is it appealing? Pictures should lend themselves to the color scheme and style.

Basically, getting images comes down to three options. Shoot it yourself, purchase stock footage or hire a professional photographer. Whatever the choice, its important to have high quality images to work with. Using clip art is an alternative to photographs, but should still be of high quality. This means taking pixelated graphics and tracing them out in illustrator. Though high quality images tend to run high in storage space, saving them out for web devices can cut down their size without sacrificing too much quality. For more complex images, the JPG format is recommended, for the simplier images, the GIF format is recommended. Choosing images themselves can really be just half the battle, there are a few options when deciding how an image will be displayed. Mostly, images can be fitted with various borders and other elements to help break them up with other sections and spaces.

Blog #6 - Checklist of 10 Things to Always Remeber

Here's a top 10 checklist of concepts and ideas to keep in mind while designing a successful website that may be over-looked.

10. Padding and Margins will count towards your total width. This will always be a problem with people when trying to float items in their style sheets, they add padding or margin and suddenly the design messes up. Always remember that padding + margin + width = total width that you've defined for a body of text/graphic.

9. Citation vs. Address. This can be difficult sometimes, determining the proper usage of both of these tags. There's a bit of a gray area, but usually one ends up being more right than the other. Just remembering the definition can be helpful for this situation; address is used for contact information for the author or maintainer, citation is used to identify a reference.

8. Font-color. It doesn't exist. Don't use it.

7. Acronyms and Abbreviations. These will sneak up on you a lot when marking up a lot of text in HTML. Make sure you scan through the text multiple times before moving on to something else.

6. Inheritance. Always check in Firebug for this one. It'll tell you every single property that the selected area is inheriting and from where. This will save you a lot of guessing when trying to pinpoint font sizes, line length, etc.

5. Alt for IMG, Title for everything else. Easy way to remember when creating an alternative bit of text for something else is Alt has 3 letters just like the IMG tag.

4. Break to clear the background. Floating elements and the container background stops just before all those floating elements? You didn't clear it.

3. Check your spelling. A lot of code errors can be attributed towards simple spelling mistakes. Always check spelling in both your CSS and HTML when something goes wrong. It could be from either side. Validating can help fix this problem, but not always, especially with file names.

2. Validation. Don't just validate your HTML, validate your CSS as well. This will help you find simple spelling mistakes a lot of the time and should be done before you post anything as a final.

1. Cincinnati Bearcats are awesome. Even just thinking about how awesome the Bearcats are will make your coding/designing that much more awesome. I will help out by wearing a Bearcats shirt as often as possible to help out everyone else focus on the awesomeness.

(the real) 1. Display: Block;. Changes inline elements to block level elements, mostly helpful for when you want to click on a box for a link instead of the actual text. This is also the only way to make image replacement work properly. Simply putting this in your anchor tag for whichever link you're working on will make everything that much easier.