Connie Malamed is an instructional designer and author. I attended a session of hers at the Presentation Summit conference and wanted to share her insights into design styles with you. Discover more of her insights at her webiste, The eLearning Coach.
What’s your style?
There are many styles of design. You should know the styles for 3 reasons:
- To find a style of your own
- To design presentations in a style that matches the content and audience
- To practice looking at presentations and other media with a designer’s eye
You can see design styles in presentations, of course, but also in websites and printed materials.
What are the styles?
This is an overview of 10 design styles.
- Minimalist: No extra elements, lots of space, small text. It looks modern and sophisticated.
- Retro: Old photos and objects with a limited palette.
- Skeuomorphic: What’s that, you might ask? Skeuomorphic means elements in a graphic that mimic a physical object. An example would be a calendar icon that has leather-like border or a website interface that looks like a bulletin board.
- Flat: Opposite of skeuomorphic. It’s a big trend now. Quick to load. Few gradients or shadows. No perspective or depth. Clean & crisp.
- Metro: Squares with space between them. Always on a grid. Often uses bright vivid colors. Flat tiles, simplistic.
- Infographic: Initial purpose was to take a lot of data and make it easy to understand. Small pictograms. Visual graph. Often about numbers. Shows relationships.
- Big photography: Single large image, compelling photo, bold typeface, high contrast text color, horizontal orientation.
- Mix & match typography: Many types of fonts, text in shapes, text is the graphic. Fonts have varied attributes. Different sizes. Use of shapes to embellish.
- Handmade: Can be illustrations, sketches. Opposite of techy. Can be cartoony, humorous. Can scan photos, receipts. Illustrations, scanned objects, handmade fonts, sketchy look, illustrated elements.
- Grunge: Richly textured, patterns. Looks worn, physical. urban, gritty. Uneven edges, torn paper, a little messy, layered, irregular fonts, irregular lines, no gloss or shine.
Take this quick test! Go to each website and put the correct number to it, taken from the above list. (For copyright reasons and to provide you with a quick link, the examples are websites, not presentations.) Then leave a comment with your results!
The correct answers are upside down below the list of websites.
A http://www.milwaukeepolicenews.com/#menu=stats-page or http://head2heart.us/
B http://www.biggirlbranding.com/
C http://www.interiors.davroc.co.uk/
F http://www.wildbillssoda.com/index.aspx or http://www.iconceptmedia.com/
G http://www.notyouraveragejoe.com/
H http://www.prahba.com/
J http://www.operademontreal.com/en
A4
B10
C1
D6
E2
F3
G9
H7
I5
J8
What Are the Styles?
A-7 D-4 G-9 J-6
B-10 E-8 H-2
C-1 F-3 I-5
Thank you!
Ellen, this was a great exercise! It’s great to put names and attributes to the different styles. Here are my answers:
A. Mix & match typography
B. Grunge
C. Minimalist
D. Infographic (loved this site!)
E. Big photography
F. Skeuomorphic (learned a new word!)
G. Handmade
H. Retro
I. Metro
J. Flat
Great exercise. Here are my answers:
A. Big Phototgraphy
B. Grunge
C. Minimalist
D. Infographic
E. Mix and Match
F. Skeuomorphic
G. Handmake
H. retro
I metro
J. Flat
Thanks
Thanks for the list of websites. Very inspiring. Here are my answers:
A. Infographic
B. Grunge
C. Flat
D. Handmade
E. Mix & Match Typography
F. Minimalist
G. Skeuomorphic
H. Retro
I. Metro
J. Big Photography
Thanks for the challenge and lots of ideas too! My answers:
A. Handmade
B. Grunge
C. Minimalistic
D. Flat
E. Big Photography
F Skeuomorphic
G. Mix & Match Typography
H. Retro
I. Metro
J. Flat
A-7
B-4
C-1
D-9
E-10
F-8
G-3
H-2
I-5
J-6
Your breakdown of the styles were easy to understand. Job well done. My quiz answers: 6,10,4,1,8,3,9,2,5,7. I love the differences between each style and would consider my style to be a mix of retro, minimalist and metro…not a typical combination but style nonetheless!