creating visually appealing web sites
TRANSCRIPT
Creating Visually
Appealing
Web SitesRick Evans
Guiseppe Getto
Anatomy of a perfect web site
Anatomy of a perfect web site
Anatomy of a perfect web site
Anatomy of a perfect web site
Anatomy of a perfect web site
Anatomy of a perfect web site
Anatomy of a perfect web site
How do you create such sites?
Some definitions...
Information Architecture
Create an organized structure for
information so customers can easily find
things they are looking for
Information Architecture
Information Architecture
Some definitions...
Visual Design
Use typography, iconography, and color to
make the site visually appealing
Visual Design
Visual Design : color themes
Some definitions...
Functionality
Define the purpose of the site and how you
provide value for your customers
Functionality
Some definitions...
Usability
● Useful
● Learnable
● Memorable
● Effective
● Efficient
● Desirable
● Delightful
Usability : It is all about teamwork...
Usability : How do you build it...
Usability : User Centered Design
UCD means usability in practice...
● Effectiveness - Can customers complete tasks and achieve goals?
● Efficiency - How much effort and time do customers require to achieve
their goals?
● Satisfaction - What do customers think about the web site? Is it easy
to use? Is it delightful?
Some definitions...
Typography
Make language readable and beautiful
Typography
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif
Typography
https://www.google.com/fonts/specimen/Raleway
https://www.google.com/fonts/specimen/Ovo
2em
2em
30px
Some definitions...
User Interface● Input Controls
● Navigation
● Information
● Containers
User Interface
Input Controls:
Navigation:
Information:
User Interface
Containers:
Some definitions...
Content Strategy
● Define web site goals & customer needs
● Communicate in a way customers understand
● Stay up-to-date and factual
● Provide content that is usable and useful
Content Strategy
Content Strategy + Design
1. Lead the Way With a Clear Value Proposition
2. User-Focused Design and Copy
3. Intuitive Navigation
4. Effective Calls-to-Action
5. Content Promotion
6. Trust Builders
7. Thoughtful Design
Some definitions...
Interaction Design
Decide what happens when the customer
clicks, taps or swipes
Interaction Design
Resources to help build your own...
Squarespace: http://www.squarespace.com
WordPress: https://wordpress.org
Twitter Bootstrap: http://getbootstrap.com
Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
Questions & Answers
Rick Evans
http://triuxpa.org
Guiseppe Getto
http://guiseppegetto.com