Web Design: A Piece of Cake??

Part One

While this site was designed primarily using aesthetic trial and error, there were certain aspects that took quite a bit of time to get right. For instance, when I think of a bake shop or baking in general, I automatically think of comforting pastel colors. I knew I wanted pastel colors but in order to choose specific colors, I turned to a chapter in The Principles of Beautiful Web Design written by Jason Beaird titled “Color” (2007). The final site went with a double complementary color scheme, incorporating the desire for using pastel colors by choosing a purple, a blue-green, a yellow, and a pink. I also chose to make my headings, top navigation bar, and selected links white–Beaird says white is “the color of perfection, light, and purity.” In order to make the main body text stand out from the pastel colors, the font-color was changed to a navy blue instead of the stark black default. This seemed to lighten the page and make it more consistent with the navigation bars and headers.

As far as image types, I used the images from Southern Living of the finished desserts they had made and kept them as large JPGs. Because each of these images had a professional feel with a background that made the dessert stand out, I decided that making the image backgrounds transparent was not necessary or consistent with the clean-cut feel of the rest of the page. I also made the images large to accentuate the deliciousness of each dish. In addition to choosing clean, large images, I also chose to round the corners and get rid of the sharp default corners of each element to stick with the softer, comforting scheme. To go along with the baking scheme, typefaces were chosen to look like handwriting. For the headings, I chose to use the Google typeface “Crafty Girls”, a loopy sans-serif. For subheadings and the top navigation bar, the Google font “Droid Sans” was used as another sans-serif. The two typefaces compliment each other yet still have similar characteristics, a trait that Jessica Hische claims in critical in her article, Talking Type. Finally, all lists and paragraphs in the main body used a Google font called “Indie Flower.” This typeface was chosen because it follows along with the handwriting/baking mood and because it is very easy to read in long paragraph blocks. The x-height seemed to be just right, another essential factor for paragraph typefaces according to Hische, and it provided good line spacing without having to tweak in CSS.

Part Two

While this site was a learning experience, it also drew attention to the general usability of CSS and HTML5. The consistency of the two languages and their universality seem to be unmatched in other languages. While these languages are the bare essentials to web pages, CSS allows these pages to still look complex and beautiful even without the more complicated JavaScript, jQuery, Python, etc. In a W3C Note from 1999, editors claim that CSS benefits accessibility by separating document structure from style while still using a “human-like” language. It also allows precise control over spacing, positioning, and alignment–a feature not easily accessed in the past. In general, CSS/HTML5 have an extremely high usability with a high chance of reaching a broad audience online.

While many languages can only be used to their entirety on certain browsers, CSS/HTML5 have a high potential to target a wide range of audiences on a wide range of devices. One example used to target different devices is media query, a feature introduced with CSS3. As Rob Gravelle explains in his article about targeting specific devices with style sheets, the days of “browser sniffing” are gone and media query is in. Media queries can check a device’s width and height, width and height of the browser window, orientation, resolution, and more. It gives web designers the capability of reaching a multitude of audiences with a fully-operating site.

Because technology is advancing at such a rapid rate, new quirks and tricks are coming out every time you turn your head. On top of media queries, CSS3 also gives web deisgners the capability of using Speech, where text can be stylized with voice-volume, -balance, -rate, -family, -pitch, and speak and cue-after. Although this particular feature seems to only be available on the Opera browser, it is a novel idea that may be able to more conveniently and effectively reach a visually-impaired audience. Other interesting “latest and greatest” CSS tricks can be found at CSS3.info.

Part Three

It seems as though part of being a web designer is the constant Google search of, “how do I do this?” As technology continues to grow exponentially in content and complexity, it’s not surprising that languages such as CSS and HTML5 are also continually changing. The good news is, Google is a fantastic tool where web designers can connect, answer questions, and give suggestions to others to help improve web pages and fix bugs. For instance, with colors displayed as R/G/B, hexadecimals, letters, and all sorts of other formats, deciphering a color code gets confusing and obnoxious. Ben Gramillion helps to break down the meaning of each of these formats while also offering color advice in his article in Smashing Magazine, The Code Side of Color. So, where does one find these color palettes? Luckily, a quick search of something along the lines of “hex codes” will yield hundreds of web pages with thousands of color choices. Some useful sites for color palettes are Color Hex and HTML Color Codes. Even if you need to know how CSS works and some quick tricks, Craig Shoemaker explains the maintainability pluses and how to use basic CSS/HTML5 in his article Introduction to Cascading Style Sheets in CODE Magazine. For information about positioning and the struggles of floating images, boxes, and just about anything else, Heydon Pickering offers some great suggestions for dealing with the different selectors. Other sites, such as cleanCSS.com, provide automatic formatting to make your end code (from CSS to HTML5 to JavaScript to Ruby) beautiful and easily readable. Overall, other web pages are the greatest resource to create your own web page, as people come up with many different problems, solutions, and work-arounds to apply to your own site.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s