General Design & DesignBlitz Resources
Below you will find a set of general design resources as well as brief descriptions and resources for several concepts of visual / graphic design (Typography, Color, Minimalism, Affordance, Balance, Proportion, Unity, etc) that you will be using in your DesignBlitz assignment.
You should refer to and review the general resources as a way to familiarize yourself with concepts and approaches to design — they will prove helpful as you complete all your design work this week.
You should review the DesignBlitz concepts, specifically, to help you with that particular assignment. Your task is to get a basic understanding of these concepts, and spend this week searching for examples of them as you complete your DesignBlitz. Refer to this week’s assignment post for details about what you must do to complete the DesignBlitz.
NOTE: We’re not expecting you to read every article or watch/listen to every video or audio on this page. This is a resource page and you should refer to it, as needed, this week while you complete the design unit. We DO recommend that you spend some time reviewing at least some of the resources here because we think you will find them useful.
Color creates mood, draws attention to key elements. Good designs can use bold color or none at all (lack of color or monochrome makes a message too). What colors work well together? What methods of using color are more effective? What do saturate colors say as compared to pastels?
- Intro to Color Theory (Karen Avett video) http://www.youtube.com/watch?v=059-0wrJpAU
- Color Scheme Designer http://colorschemedesigner.com/
- Color Palette Generator (works with URLs from photos) http://www.degraeve.com/color-palette/
- Color Theory http://en.wikipedia.org/wiki/Color_theory
- The Dimensions of Colour http://www.huevaluechroma.com/
- Color Theory http://handprint.com/HP/WCL/wcolor.html
- How to use Color to advance your design http://www.vanseodesign.com/web-design/color-meaning/
- Colors in Culture (a visualization), David McCandless, Information is Beautiful http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
- Three Primary Colors (Sesame Street explains color theory in stopmotion video) http://www.youtube.com/watch?v=yu44JRTIxSQ
Typography “is the visual component of the written word” – It is the form in which text is displayed, and the characteristics of the type used- Is san serif always better? why or why not? What do aspects of font weight, style, spacing, kerning have to do with how a message is transmitted and received?
- What is Typography (good explanation from Typography for Lawyers) http://www.typographyforlawyers.com/?page_id=1300
- Basics of Typography (introduction) http://designinstruct.com/tools-basics/the-basics-of-typography/
- A 20 Minute Introduction to Typography http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
- An Introduction to Typography http://www.youtube.com/watch?v=tWFWJGA7qrc
- What the Font (identify fonts from an image) http://new.myfonts.com/WhatTheFont/
- Fontshop tutorials (free PDFs) http://www.fontshop.com/education/
- How to Know the Five Fonts to Never Use http://www.youtube.com/watch?v=Y50Dmh3SWys
Comic Sans Criminal – make sure you are not committing the crime http://comicsanscriminal.com/
Metaphors & Symbols
What are best practices for using symbols to represent objects, things, ideas? What works? How can complex ideas be represented in symbols?
- Metaphors and schemas in design http://philosophe.com/design/metaphors/
- Role of Metaphors in Interaction Design http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction-design
- How to Manipulate in Design Using Metaphors http://kinobrand.com/how-to-manipulate-in-design-using-metaphors/
The Woman Behind Apple’s First Icons http://priceonomics.com/the-woman-behind-apples-first-icons/
Minimalism / Use of Space
How can designers do more with less? What makes elegant designs?
- Volkswagen Beetle Ad (1960) http://www.vintageadsandstuff.com/viewvwbug100.html and for that matter all of the VW ads http://www.vintageadsandstuff.com/adsautovwbug.html
- Showcase of Minimalist Design (Smashing Magazine) http://www.smashingmagazine.com/2008/11/17/showcase-of-minimalist-and-clean-designs/
- Creating Minimalist Designs Makes You a Better Designer http://webdesignledger.com/tips/creating-minimalist-designs-makes-you-a-better-designer
How well does design convey its meaning or potential use or real world objects?
- Design of Everyday Things by Donald Norman http://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
- Collection of Bad Designs http://www.baddesigns.com/examples.html
“Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.”
The Everynone video Symmetry is a fantastic study on the ways things can display visual symmetry http://vimeo.com/22564317
“Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.” http://www.digital-web.com/articles/principles_of_design/
“Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. ” http://www.digital-web.com/articles/principles_of_design/
“Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design.”
“The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety.”
Software and Tools
Adobe Photoshop is a photo editor but you can accomplish lots of design tasks with it. Alternatively, you can use Adobe Illustrator, but the learning curve for that is a bit steeper. While both products cost money, they do have free, fully-functional 30-day trials. In addition, computers throughout the HCC and Simpson Library have Photoshop installed on them. The DKC offers a photo editing tutorial that can help you learn Photoshop.
GIMP is an open-source photo editor that works on PC, Mac, and Linux compuers. It has functionality that is similar to Photoshop
Pixlr offers a free Web-based image editor that allows you to accomplish many of the basic tasks available in Photoshop.
Canva.com is an online tool that allows you to create and edit graphic designs. It somes with lots of free templates, photos, typography examples, and graphics/icons. The DKC offers an infographic tutorial that covers Canva.
NOTE: It is highly recommended that you use one of these tools rather than accomplishing your design assignments using Microsoft Word or PowerPoint. Neither of those programs offers the range of possibilities that you really need
Sources for Graphics, Images, Palettes, Fonts
If you’re looking for photos to use in your projects, Pixabay and Unsplash both offer free, public domain photo collections that can’t be beat. You have to set up an account on both, but it’s free
The Noun Project provides a fantastic collection of free icons that you can use in your designs. The free account does require you to credit the creator of the icon you use when you publish your final project. They also offer an educational license for $19/year which gives you some additional features.
If you’re trying to come up with great color palette for a project, Kuler is a cool site where you can easily visualize how colors look together. Meanwhile, the Color Palette Generator will suggest a color palette based on a photo.
For free fonts, check out daFont. And if you’re working with fonts on Canva, their font combiner tool is a great way to figure out what fonts go together well. FontPair.co also has some nice font pairing information.
Inspiration and Links
- The Book Cover Archive
- Minimalist Graphic Design Gallery
- Metaphors and Schemas in Design
- What is Typography?
- Comic Sans Criminal (for lolz)
- Mixing Type tutorial
- How to Use Color to Enhance Your Designs
- Bad Design Gallery (more lolz)