Creating a website from a blank page can be daunting. Luckily content i.e., the recipes, were found on various cooking blogs for the breakfast themed website: Breakfast Your Way. Still, that left formatting the HTML and creating the CSS. Since the site is dedicated to food, bright, vivid colors were chosen for the main design instead of dull colors which might make the food seem less appealing. For consistency, images were chosen based on color tones that either matched the color scheme or were bright photos.
Because the colors chosen were quite strong, e.g., crimson and strong pinks, the site needed some muted colors to create balance and not be so hard on the eye. Therefore, several shades of gray were used for the title banner, navigation bar, and footer while the main content of the website remained white to allow the vivid colors to stand out further by contrast, as can be seen in the photo to the right.
To keep the website light and to stay consistent with its breakfast theme, playful fonts were chosen for main headings. To abide by the rule of 3, one of the six rules of typeface delineated in Lauren’s article in MagCloud, titled “It’s All About the Wordplay: 6 Typeface dos and don’ts,” which encourages website designers to stick to three fonts per design or per page, three font families were initially used throughout the site. They are as follows: Verdana for the navigation bar, Courgette for the header, and Lora for the body. A creative choice was made in bringing in a fourth font- Funsized- from DaFont. This was used as a stand-in for a company or website logo which is usually found at the top of a page to give the site a more realistic feel.
CSS and HTML5 can be a strong duo for web designers. Using CSS allows web designers to control multiple web pages’ look and feel with one single document. The benefits for this are countless- including but not limited to, organization, ease of changing and readjusting design, and finally it allows for the use of a wider scope of platforms. By giving CSS a few specific commands, outlined by Shawn Borsky in his article “Using CSS Media Queries for Multi-Platform,” a web designer can allow the CSS document to recognize which device is being used and with which widths, therefore creating a more user-friendly experience for the intended audience. But that’s not all, css is constantly evolving and improving. Like most programming languages it does not remain static. A few of the changes that have been recently implemented and that are starting to emerge in CSS include background blend mode, allowing a background and text or another image to blend to create cool aesthetics, and grid layout which allows css to position elements on a grid, pointed out by Rachel Andrew in the article in Web Designer Depot, titled “CSS You Can Get Excited About in 2015“.
But you don’t have to wait for CSS updates of the future to get excited about CSS. In fact there are countless websites out there that make CSS easy, approachable, and yes, fun as is pointed out by Harrison Weber’s article titled “20 Incredibly useful tools and resources for Web designers” featured in The Next Web. A few of which are listed below.
- Degraeve.com allows web designers to upload an image and the website then generates a color palette based on that one image.
- Niice.co gives users inspiration based on ideas they are trying to implement.
- Color.hailpixel.com provides users with a creative way to find the perfect color for their website by simply moving the mouse around the screen until it’s the perfect color, shade, and hue.
These website make CSS more approachable, transforming a would be recipe for disaster into a recipe for designers.