Top Banner
Creating Visually Appealing Web Sites Rick Evans Guiseppe Getto
35
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Creating Visually Appealing Web Sites

Creating Visually

Appealing

Web SitesRick Evans

Guiseppe Getto

Page 2: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 3: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 4: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 5: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 6: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 7: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 8: Creating Visually Appealing Web Sites

Anatomy of a perfect web site

Page 9: Creating Visually Appealing Web Sites

How do you create such sites?

Page 10: Creating Visually Appealing Web Sites

Some definitions...

Information Architecture

Create an organized structure for

information so customers can easily find

things they are looking for

Page 11: Creating Visually Appealing Web Sites

Information Architecture

Page 12: Creating Visually Appealing Web Sites

Information Architecture

Page 13: Creating Visually Appealing Web Sites

Some definitions...

Visual Design

Use typography, iconography, and color to

make the site visually appealing

Page 14: Creating Visually Appealing Web Sites

Visual Design

Page 15: Creating Visually Appealing Web Sites

Visual Design : color themes

Page 16: Creating Visually Appealing Web Sites

Some definitions...

Functionality

Define the purpose of the site and how you

provide value for your customers

Page 17: Creating Visually Appealing Web Sites

Functionality

Page 18: Creating Visually Appealing Web Sites

Some definitions...

Usability

● Useful

● Learnable

● Memorable

● Effective

● Efficient

● Desirable

● Delightful

Page 19: Creating Visually Appealing Web Sites

Usability : It is all about teamwork...

Page 20: Creating Visually Appealing Web Sites

Usability : How do you build it...

Page 21: Creating Visually Appealing Web Sites

Usability : User Centered Design

Page 22: Creating Visually Appealing Web Sites

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?

Page 23: Creating Visually Appealing Web Sites

Some definitions...

Typography

Make language readable and beautiful

Page 24: Creating Visually Appealing Web Sites

Typography

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif

Page 25: Creating Visually Appealing Web Sites

Typography

https://www.google.com/fonts/specimen/Raleway

https://www.google.com/fonts/specimen/Ovo

2em

2em

30px

Page 26: Creating Visually Appealing Web Sites

Some definitions...

User Interface● Input Controls

● Navigation

● Information

● Containers

Page 27: Creating Visually Appealing Web Sites

User Interface

Input Controls:

Navigation:

Information:

Page 28: Creating Visually Appealing Web Sites

User Interface

Containers:

Page 29: Creating Visually Appealing Web Sites

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

Page 30: Creating Visually Appealing Web Sites

Content Strategy

Page 31: Creating Visually Appealing Web Sites

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

Page 32: Creating Visually Appealing Web Sites

Some definitions...

Interaction Design

Decide what happens when the customer

clicks, taps or swipes

Page 33: Creating Visually Appealing Web Sites

Interaction Design

Page 34: Creating Visually Appealing Web Sites

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/

Page 35: Creating Visually Appealing Web Sites

Questions & Answers

Rick Evans

[email protected]

http://triuxpa.org

Guiseppe Getto

[email protected]

http://guiseppegetto.com