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.

Blog Post #5 - Bad Minimalism

The website I decided to review for bad minimalist design is Gold Bear Hotel. Their approach to minimalist design falls flat in just about every area that minimalism should excel at in order to make a successful website.

The first falter is the layout itself. Their choice of arrangement, alignment and composition has no defining structure. Pictures and text don't line up to each other which does not give the site a cohesive feel. Unfortunately, this is not a problem that just effects the layout of one page, it continues throughout the entire website.

The type treatment is right out of the birth of the internet. Drop shadows are misused and only served to make a poorly-colored text even harder to read. The typography also isn't varied enough to actually make anything look interesting. The logo itself also showcases some bad typography, the 'Goldener Baer' placement needs to be rethought.

What little photography there is, does not look appealing. All the photographs are small and unaltered to give them their best colors and contrasts. The result is a rather dull, unstimulating view of their hotel when the photographs should showcase their hotel. The repeating background picture tends to conflict with some of the black text it resides behind. A better choice would be to set a white or lighter background behind the text, which would also give the site more structure.

On a more minor note, the site also has the perplexing tendency to put borders around buttons. This choice seems to just be redundant and unnecessary considering buttons already have their edges bordered out. The borders are completely unneeded and should be removed.

Minimalist design relies on each element being strong because each one is that much more important than if it was a different style of design. Unfortunately, the elements here are not strong and site collapses into bad design.

Blog Post #4

I chose to pick a minimalistic site because its a style that has to accomplish all the things a complex sites does, with fewer elements. Thus, those fewer elements have to be stronger in order to succeed. The website I chose is:

Behind Design

The website only utilizes a one column layout, the minimal of the minimum, and still displays the entirety of its content well.

Even though most of the elements present may only seem like the content itself, its the interactivity that makes it interesting. The body text is kept in a gray tone until you hover over it, which changes it to black, and makes it easier to read. These little subtle changes and additions strengthen the idea of having a minimal design. From the small texture that slowly fades out, to the back and forth movement of the element at the bottom of the page; these tiny elements separate the boring from the stimulating.


The color choice compliments the white well, and a lot of white space there is. The rest is usually a variation of grays. The navigation is even kept to a minimum with just having 3 pages, including the home page, so there is no excess of content. The entire layout feels very simple and very clean. The only complaint I have is towards the middle of each page's content, there's almost too much which and there needs to be something to break up the space on the page a little better (like the continuation of the shadow on the column). Too much of the white can overwhelm someone's eye.

Blog Post #3

For my third blog post, I chose to pick a site that goes into perfecting a lot of the HTML coding that we've learned in class, as well as goes into more specifics about some of the elements that didn't receive a lot of attention, like the DOCTYPE.

The site is called Bulletproof HTML ( http://articles.sitepoint.com/article/html-37-steps-perfect-markup ), and it covers the basic codes and the proper ways to use certain codes with the goal of helping people create more concrete websites, which is always a concern when writing code. I won't outline all of the 37 steps the site covers, I'll just point out some of the more interesting things to keep in mind when coding a website.

The following are direct quotes taken from the site:

5. What does the DOCTYPE declaration do?

The DOCTYPE declaration, which must precede any other markup in a document, usually looks something like this:

It specifies the element type of the document's root element (HTML), a public identifier and a system identifier.

The public identifier (-//W3C//DTD HTML 4.01//EN) shows who has issued the document type definition, or DTD, (W3C); the name of the DTD (DTD HTML 4.01); and the language in which the DTD is written (EN, for English). Note that it doesn't say anything about the language of the web page itself; it is the language of the DTD that is specified here.

The system identifier (http://www.w3.org/TR/html4/strict.dtd) is the URI (uniform resource identifier, or "web address") for the actual DTD.

The DOCTYPE declaration tells a validator (a program that checks the syntactic validity of a web page) against which DTD it should test the page for compliance. Browsers didn't used to care about the DOCTYPE declaration, but modern browsers use it to decide whether the page is "modern" (and presumably expect the behaviour detailed in the W3C HTML documentation) or old-school (and expect the browser to render the page with all the bugs and quirks exhibited by older browsers). A document's DOCTYPE affects the rendering mode used by Internet Explorer, Opera, Firefox (and other Mozilla-based browsers), Safari, and most other modern web browsers. A complete DOCTYPE declaration -- including the system identifier -- tells the browser that this is a modern document. If the system identifier is missing, or if there is no DOCTYPE declaration at all, browsers assume that this is an old document and render it in "quirks mode".

6. What is a DTD?

A DTD, or document type definition, specifies the element types and attributes that we can use in our web page. It also defines the rules of how we can use these elements together -- it's the specification for our markup language. The DTD can also declare the character entities we can use; more about those later.

A validator will test a web page for compliance with the DTD specified in the DOCTYPE declaration either explicitly, via the system identifier, or implicitly, using the public identifier. Browsers use non-validating parsers and do not actually read the DTD. They have built-in knowledge about the various element types, and usually a hard-coded list of character entities as well.

For HTML 4.01, which is the latest and greatest version, there are three different DTDs: Strict, Transitional and Frameset.

17. How should heading elements be used?

HTML heading element types are h1, h2, h3, h4, h5 and h6. The number denotes the structural level of the heading, which means we should treat headings as we did in those outlines we had to learn in school (and promptly forgot about right after graduation).

The top-level heading on a page must be an h1. It should describe what the page is about. Most pages will have one h1 heading, but very complex documents that deal with several disparate topics may need more than one.

h2 headings will mark up the next structural level. Any sub-levels under that will be h3, and so on. We can never skip a heading level as we move downward through the hierarchy. An h4 should not follow an h2; there should be an h3 in between. (The validator will not complain about this, but it is good practice.)

It's important to mark up headings with the Hn element types. Assistive technologies such as screen readers can make use of a proper heading hierarchy to present an outline of the document. If we use ..., they cannot.

22. What does "semantic" mean?

se-man-tic [si-'man-tik]
adj. Of, pertaining to, or arising from the different meanings of words or other symbols.

(definition from dictionary.com)

When we talk about "semantic markup", we mean the proper use of element types -- based on their meaning -- to mark up content. The opposite is "presentational markup" or "tag soup", where authors choose element types because of their default rendering, rather than their semantic meanings.

-------------------------------

As you can tell from the selected steps, these are little points of interest that we should always have in the back of our minds when coding, and is a good resource when ironing out the details that we can easily overlook. I would encourage everyone to at least read over it once.

Blog Post #2

The site that I think best conveys a single-page concept is Pikaboo - Where Ideas Grow. The background does not conflict with what goes on in the foreground, and allow for much of the content to stand out more because of the contrast. The grid used does not really lend itself to the layout design, it feels like the images should take up less space due to their size relation to the logo and navigation.

The main reason why I chose this page is because all the information revolves around this one page. The browser, as far as my clicking has taken me, never switches windows or leads to another site. Navigation is very simple, clicking will allow you to limit your search choice, and further clicking will open up each image, which will give you a different set of navigation options. You have two choices of scrolling through the content, clicking or the scroll function on the mouse which are two very nice options to have. However, when resizing the window, there is no scroll bar on the bottom to allow you to navigate left or right. So, if you're monitor isn't big enough, you're missing out on site content.

The site that I felt had poor use of a single-page concept was the Colourpixel website. The background is rather noisy, which distracts from the main body of content. The color usage, despite the site centering around color, feels a little uncoordinated. There's also a heavy use of repeating elements which does not lend itself to the design. There's also a bit of an alignment problem, some elements are too close or awkwardly aligned up to the left. Overall, a more conservative approach could help this site focus a little more.

To the crux of the matter, the execution of a single-page concept. This is where the site falls short a bit. The site uses a grid pattern to display its main body of work which forces the user to scroll down to look at all the content the site has, which most sites solve by having the content move itself when the user clicks a navigation bar or movement indicator. In summation, the site attempts to work with its name, Colourpixel, but all the sites content could've been arranged in a more easily navigatable fashion.

Cinemassacre

Cinemasscre.com is a site surrounding the works of James Rofle's different views on most things nostalgia via video reviews. I tend to view this sight as an anger outlet, because while watching someone else subject extreme amounts of criticism towards something deserving, the experience transfers to you, the viewer, and relieves stress.

The target demographic for this site is someone who grew up in the late 80s - early 90s who has had firsthand experiences with the topics he discusses and reviews. Its this group of people that would probably get the most out of his ranting and raving because you can connect with what he's saying. From that demographic, there's also those seeking the humor of what he has to say, since he tends to be over-the-top and extreme which someone with a great acceptance for vulgarity can find amusing.

The site's look and feel is very dated. It almost looks like its from the advent of the first pages of the internet in terms of design. Everything is settled in a quadralateral, with the boxes sometimes overlapping each other. It feels retro, which could be an intentional choice given its content, but even then, its still an eyesoar. Retro looks have been adapted towards modern designs while still looking nostalgic, but this site fails to take advantage that concept. In terms of color choice, the site's pallete is very simple, and not to its advantage. The darks are made up of blacks and grays while everything else is suited towards its own theme without being cohesive. The entire scheme is very unstimulating. The typography suffers just as much in terms of the site's layout, and the individual sections of the site. There's little variation, and like the color, doesn't stimulate in any way. The logo is not well done in terms of style, execution or text placement. It looks like an ametuer's attempt at photoshop.

The navigation of the site is fairly straightforward. There's rarely ever and confusion as how to get to where you want to go, or to just simply explore. The buttons are usually a prodominant element on the page, so they can't be missed, and they are big enough to fully show what section the site you are clicking. Every sub site within each individual section is easy to navigate as well, whether its more buttons to click on, or just a vertical list of links, there's virtually no confusion.

Though the site is a great stress-reliever, from the designers perspective, you might just be trying to relieve the stress you got from just looking at the site. If the site has one redeeming feature, its being able to find the specific video review you are looking for to unwind.