Most designers do not just wake up in the morning, feeling inspired. Something they see or do gets their creative juices flowing. I often find my inspiration on the Internet, and I follow several design blogs. If you don’t know where to look, here is a compilation of 20 design and development blogs to follow. It includes several I have followed for years, plus some new ones I am eager to try… if only there were more hours in the day!
Whether you are developing a 50-page Website, a small mobile phone app, or an annual report for a corporate client, you should get in the habit of developing a style guide.
Branding and style guides are important for projects large and small. They help to provide consistent messages about an organization and provide a degree of professionalism. Creative Bloq has a good post on this topic, with examples of thirteen style guides for famous organizations.
The client’s goal was to refresh their brand and their Web site to draw more customers to their wellness practice and retail establishment. I prepared a simple style guide, using Adobe Illustrator. The Style Guide displays the brand, color chips for main and accent colors, typography and usage examples:
Here is how the styles look when applied to a “mobile first” Website design. Note how the colors and the leaf motif are repeated throughout the page. The design works well on a smartphone, on a tablet or on a large HD screen.
On a whim, I researched my alma mater’s color and brand guidelines. The Miami University is a nationally recognized Public Ivy, and its brand is particularly important. The brand must convey the Public Ivy experience.
The University uses different reds for print, Web and merchandise use. Several formal and informal logos are available for these uses. The use of certain “vintage” logos requires special permission.
The branding guidelines include logos, colors, typography and graphic elements. They encompass Web, print publications, social media, photos, use in athletic programs and more.
How people – alumni, students, future students, faculty and staff, fans, donors, and the public at large – feel about Miami University directly relates to the University’s success. In a sense, the brand speaks on the University’s behalf without saying a word. It represents who we are and what we stand for. It is the visual representation of our reputation.
Miami University Brand Guidelines
Here is the “M” spirit mark often used on sportswear and signs.
Blue hues reign at the top of the most used hues on the most popular Internet sites, according to Paul Herbert Designs. This designer wrote a script to “scrape” the most-used colors from the most visited sites, according to alexa.com. First, he has a graphic with the colors from the top ten sites. You can mouse over a color on his Web site to see its HEX code.
Herbert also charts colors by hue, both on a bar chart and using a radial map where you can change the background color. Blues rule!
Herbert analyzed the color code formats used. Designers used HEX (hexadecimal) most often, then RGBa (red-green-blue + alpha), 3-digit HEX and named colors, in that order. None of the designers used RBG, HSL (hue-saturation-lightness) or HSLa (HSL + alpha )formats.
Finally, Paul Herbert describes the meaning of different color formats, and how to convert colors among the formats. He explains the science behind the different formats; predefined color names, RGB, RGBa, HEX, 3-digit HEX, HSL and HSLa.
When coding a client website, I needed to make several adjustments in heading and body text size. As a recent blog post by Christian Miller (aka Xtian Miller) says, you can make body text too small, but nobody complains if it is too large. The benefits of using LARGER body text include:
Miller says that the majority of Web sites use 15-18 px body text… which brings to mind the (rhetorical?) question that I posed last week–which units to use, points or pixels–when sizing text? I started to use ems and % for line height in my last few Web projects. I like using these relative measurements rather than fixed measurements, once the base font size is defined. I can also use these relative units for font height, for example, headings and other text used for highlights and emphasis.
Miller also writes that “Mobile First” designs can cause designers to be afraid of using larger body text. He provides examples of several sites that use 20 px or larger body text, including Jeffrey Zeldman’s.