Design is about communication. As a designer it is your job to communicate the values of your product with your audience.
Design:
- to conceive or execute a plan
- to devise for a specific function or end
- to indicate with a distinctive mark, sign, or name
- to make a drawing, pattern, or sketch of
A product has a purpose, and it's producer values. These should be expressed in the design.
“There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.”
- Milton Glaser
Check out this website visit the web page, pay close attention to the type. With a partner Decide what you like and what is working well?
Answer these questions:
- What do you think about the typography?
- What has the designer done with type to make this interesting?
- Name three things
- What is the message?
- What do they do?
- How do they do it?
- What are their values?
Let's do that again. Check out this site with a partner
- What do you think about the typography?
- What did the designer want you to see?
- First
- Second
- Third
- What are they doing worng?
Design has these features (in other words you have these features to express your message):
- Typography
- Color
- Layout
- Everything else...
The most common form of content in the apps you create is text. For this lesson we will focus on typography.
“Typography is the craft of endowing human language with a durable visual form.” ― Robert Bringhurst, The Elements of Typographic Style
Terms
Actually there are many more terms
The terms above are most important for layout. Understanding these will help explain a lot of the strange behavior you might have experienced working with type, and the options present in software dealing with type.
Kerning
The space between characters
Leading
The space between lines
Fonts
Serif vs San Serif
Serif
Each of these type faces has a different character. Each has a different voice. Think of where you may have seen these faces before and what the message was.
A majority of your content is text. Your text needs to look good and read well. An important part of communication is the order in which you say things.
Design your type to control the order in which your content is read.
This image explains it all.
You can use these design elements to create hierarchy in your type:
- Color
- Position
- Size
- Type Contrast
- Weight
Follow one of more of the links below, and look for elements listed above in the designs.
Work with a partner. Explore the links below discuss ideas above. Try and find an example of each idea (color, position, size, style, Type Contrast, weight).
- https://www.behance.net/gallery/38375593/Community-app-for-Factory-campuses
- http://abduzeedo.com/starbucks-experience-visual-design
- https://www.behance.net/gallery/57915943/Slade-WebSite-Template-Vol1
- https://www.behance.net/gallery/56318765/Herschels-Coffee-Co
- https://www.behance.net/gallery/50422883/Cutme-Mobile-App
- https://www.behance.net/gallery/50028109/Flight-App-Concept-UI-Kit
- https://www.behance.net/gallery/53246495/Text-app-design
This is your opportunity to apply some of the ideas yourself.
Understanding that everyone is working in different areas I have supplied three different formats to work in.
- Sketch - If you have Sketch and want to work in a purely visual design form you can solve the problems in sketch.
- HTML/CSS - Use this to solve the problems with CSS.
- Xcode - Use storyboard to solve the problems.
The starter project and files are in the folder below.
There are two examples.
The first is a wikipedia entry with:
- Title
- Subheading
- Description
- Image
The second is a product description with:
- Brand
- Title
- Description
- List
- Disclaimer
- Image
Feel free to work with all elements in any way you like. The goal is to make a single block of text that is easy to understand. Ask yourself these questions as you work.
- Show a visual hierarchy what should viewers read first?
- Each of the pieces of content has a style sets it apart from the other elements.
