April 16, 2016Comments are off for this post.

Branding: A Series – Color

Color can be a powerful element in your branding arsenal.

color swirl

When you are determining the colors for your business you need to keep in mind the cultural influences of your target audience.

Color meanings variety greatly even within our own culture.  Look at the color yellow - happiness and joy on side and cowardliness and caution on the other. These variations only expand when you start looking at the color association of other cultures.  Some cultures view yellow as sacred and auspicious while others see it as a color of mourning. Whit this range of meanings it is important to understand your target audience and how they relate to the colors you are considering.

This doesn't mean you have to rule out or not use any color, but you should do so from a place of knowledge and understanding.  If you have an awareness of the possible connections that your target audience has with color, you can make your selections and usage decisions to support your intended message.

For more details about color associations across culture visit www.empower-yourself-with-color-psychology.com/cutural-color.html

December 19, 2012Comments are off for this post.

Free Tutorial: Techniques in Responsive Web Design

DesignTV is offering a free video tutorial on Responsive Web Design.

DESIGN TUTORIAL DETAILS:
Responsive web design provides an optimal viewing experience for the user, regardless of whether there at a desktop, or on their smartphone or tablet. It’s the future of designing for the web. In this design tutorial Chris Converse will provide a demonstration of responsive design. He’ll prepare varying-sized graphics, slicing graphics in Photoshop, and will give an intro to HTML and CSS so that you can better understand the fundamentals of responsive design. You’ll begin to understand how to convert Photoshop files to HTML and CSS, and with the instructional PDF that Converse will provide following the presentation, you’ll be able to start trying it on your own!

In this design tutorial you’ll:

  • Learn about the fundamentals of responsive web design
  • Get an intro to HTML and CSS
  • Learn how to convert PSD files to HTML
  • Get an intro to CSS media queries

https://tv.howdesign.com/p-564-techniques-in-responsive-web-design.aspx?et_mid=595600&rid=3680541 

via Tumblr http://alicepettey.tumblr.com/post/38303167035

December 11, 2012Comments are off for this post.

Grids

A great resource for learning about grid systems can be found at: http://www.thegridsystem.org/.  The Grid System provides links to articles, tools, books, templates and blogs that deal with using a grid system in your design.

Reference:

The Grid System (2012). The grid system.  Retrieved on December 11, 2012 from http://www.thegridsystem.org 

via Tumblr http://alicepettey.tumblr.com/post/37703644810

December 11, 2012Comments are off for this post.

Informative | Supportive (Combined site) Comps

The site design utilizes a clear hierarchy (Lynch and Horton, 2002) in that the logo takes the upper left position with the hot topic navigational links directly below and sectional headings across the top. The membership log-in area is in the upper right, so that it will be easy to find, below the log-in is the search box and a link to contact the PRISMS organization.  The main content of the page has a photo taking center stage and followed by teaser text to draw the reader into the site.

The logo concept  for this version was developed through exploring geometric prism shapes and unifying the shapes in a dynamic forward moving configuration that would support the forward, growth and development of the PRISMS organization while providing a nod to medical research and the educational aspects of the organization. The selected color pallet draws from the original concepts each contributing either a color directly, or inspiring a new selection. The clinical/medical blues play off the warmth in the educational gold and brown and the membership reds. Together these colors form a split complementary pairing (color matters, 2012). To add additional contrast each color is paired with a darker variation, and a black and gray pairing has been introduced.

The typeface Gotham (Hoefler & Frere-Jones, 2012) was selected for the logotype. Modifications were made to the typeface so that the counter of the p reflects the same hexagonal “prism” (Bowling, Brody, Allen, and Aulter, 2012) that is utilized in the mark. For body copy Register Sans BTN (myfonts, 2012) has been selected. Together these fonts present a warm, stable, and open expression, which supports the PRISMS underlying tenet of being supportive, informative and compassionate.

The desktop web version of the site utilizes background images to produce a rich visual display.  However, for the iPad / tablet version the background images were removed in favor of faster load time for the mobile devices. 

When screen size is reduced further for iPhones and smart phone devices the layout alters once again to a two column format.  There is no background graphics utilized and any story graphics are optimized for the smaller screen to promote fast load times.  The layout was designed to promote easy vertical scrolling, while providing all important information in the initial screen view on the device.

 

References:

Bowling M., Brody N., Allen B. and Aulter, G. (2012). 2,4,5 prisms. Retrieved on September 21, 2012 from http://prealg-geometrybasics.wikispaces.com/2,4,5+Prisms

Color Matters. (2012). Evolution of color wheels. [Illustration]. Retrieved on September 3, 2012 from http://www.colormatters.com/color-and-design/basic-color-theory

Hoefler & Frere-Jones. (2012). Gotham. Typography.com Retrieved on September 14, 2012 from http://www.typography.com/fonts/font_styles.php?productLineID=100008

Lynch and Horton. (2002). Visual hierarchy. Web Style Guide. 2nd edition. Retrieved on December 5, 2012 fromhttp://webstyleguide.com/wsg2/page/hierarchy.html

myfonts (2012). Register sans btn. Retrieved on October 16, 2012 from http://www.myfonts.com/fonts/btn/register-sans-btn/

via Tumblr http://alicepettey.tumblr.com/post/37703509258

December 11, 2012Comments are off for this post.

Community | Supportive Comps

The website design developed for the community | supportive version utilizes color and size to develop a hierarchy for the site.  The logo is located in the upper left corner of the page, with links to social networking and a search box on the right.  Below this primary header information the top navigational links are listed.  The main body of the page consists of photos and color coordinated buttons to areas of major interest on the site. For the typography Register Sans (myFonts.com, 2012) was selected because it supports a warm, stable, and open expression with characteristics of a high x-height, wide width, and rounded counters and/or letterforms (Gump, 2001 pp207).

The logo was inspired by the concept of light – the horizon – and is intended to inspire warmth and support. This concept utilize a loosely kerned Frutiger (myfonts, 2012a) in the logotype. The logo mark also produces the impression of forward motion and provides a grounding element to the logotype (Jirousek, 1995).

The colors were selected to support a warm, caring and supportive feel: red, orange & brown.  Red represents warmth, strength, excitement, and courage (Morton, 1997, pp 23) Orange represents energy, cheer, warmth and excitement, and brown represents nature, durability, reliability, warmth, comfort and hominess (Morton, 1997, pp 33, 34).

The layout of the site is set on a grid system (Brauckmuller, 2010). The blocks and buttons are created with rounded corners to convey “feelings of friendliness and comfort to the user” (Dennis, 2010).

iPad

Through the use of responsive web design when the screen size is reduced, to the size of an iPad or other tablet device, the layout of the site would shift to accommodate the smaller screen size (Gustafson, 2011).

iPhone:

The site would be simplified further as the screen size reduces for use on smartphones.

References:

Brauckmuller, C. (2010, April 29). Grid-based web design, simplified. Smashing Magazine. Retrieved on December 10, 2012 fromhttp://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/

Dennis, S. (2010, May 6). Creating rounded corners with precision. Subcide.com Retrieved on December 10, 2012 fromhttp://www.subcide.com/articles/creating-rounded-corners-with-precision/

Gump, J. E. (2001). The Readability of Typefaces and the Subsequent Mood or Emotion Created in the Reader. Journal Of Education For Business, 76(5), 270-273.

Morton, J. (1997). A guide to color symbolism.  COLORCOM. Retrieved on August 14, 2012 from http://www.colorvoodoo.com/cvoodoo1.html

myfonts.com. (2012). Register sans btn. Retrieved on August 18, 2012 from http://www.myfonts.com/fonts/btn/register-sans-btn/

via Tumblr http://alicepettey.tumblr.com/post/37703493347

Midlothian, VA 23112
Tel.: 804.464.3925
Fax: 804.729.3295

Facebook    LinkedIn    YouTube

Do you want tips and actionable items for supporting your organization brand?  Sign up for our newsletter. 
We don't share our subscriber list.