Arizona State University Web Design for Non-Designers

Designing for the web Design for Non-Designers Safwat Saleem University Initiatives Nina Kulhawy Provost Communications Group

good

Keep their attention

Provide the information

Guide the viewer

Create trust

bad

Doing things “because we can”

Inconsistent

Bad/wrong/old information

Buried content

What is the web made of? 01101010100101010 01101010100101010 01101010100101010 <a href=“http://www.asu.edu”></a> <?xml version="1.0" encoding="windows-1250"?> <?php get_sidebar(); ?>

HTML: Hypertext Markup Language

What is the web made of: HTML Learn more at: http://www.yourhtmlsource.com/

CSS: Cascading Style Sheets

What is the web made of: CSS Learn more at: http://www.cssbasics.com/

Basic HTML & CSS

What is the web made of: HTML & CSS <html> <head> <title>My First HTML Page</title> <style type="text/css">  </style> </head> <body> <h1><span class="style1">How now brown cow!</span></h1> </body> </html>

Basic HTML & CSS

What is the web made of: HTML & CSS

Cascading Style Sheets I   CSS

basic content

+ cascading style sheet =

Cascading Style Sheets

Color on the web

What is the web made of: HTML & CSS color: #FFFFFF; -- Hex triplet RGB Value = 255, 255, 255 background-color: #000000; RGB value = 0, 0, 0 Hex to decimal converter: http://www.statman.info/conversions/hexadecimal.html

Macromedia Flash / Adobe Flash

What is the web made of: Flash Learn more at: http://www.kirupa.com/developer/flash/index.htm

JPEG: Joint Photographic Experts Group

Image formats on the web: JPEG Learn more at: http://www.cssbasics.com/

GIF: Graphics Interchange Format

Image formats on the web: GIF Example: http://www.cafefive.com/gif.gif

PNG: Portable Network Graphics

Image formats on the web: PNG

What is the Internet? Learn more at: http://computer. howstuffworks .com/internet-infrastructure. htm

Server-side programming languages ASP ASP.NET ColdFusion JSP PHP Ruby on Rails

Planning Ha ha

Planning a web site: Audience http: //nytimes .com/ http:// tv.disney.go.com/jetix/witch /

Planning a web site: Site maps

Content Keep it short.

wireframes

Testing… 1, 2, 3 Safari

Elements

Line

Color

Texture

Typography

David Hellsing: CSS Zen Garden, Contemporary Nouveau Line

Jordi Romkema: CSS Zen Garden, Pretty in Pink Color

Color

Texture

typography

Principles

C ontrast

R epetition

A lignment

P roximity

Contrast

Repitition

Alignment

Proximity

Yea, but where do I go for…

photos?*

http://www. istockphoto .com/index. php

http://www. sxc . hu/

http://www. asu . edu/imagefolio

http://www. asu . edu/lib/archives/archives . htm

*use photos legally all the time, http://www. creativecommons .org

Yea, but where do I go for…

Places to learn more?

http: //meyerweb .com/

http://www.csszengarden.com

http://www. alistapart .com/

http://www.37signals. com/svn/

ASU’s info?

http://www.asu.edu/commguide

http://design.blog.asu.edu

http://web. asu . edu/community

Build my own?

https: //techbase . asu . edu/wiki/index . php/Creating_a_Personal_Website

http://blog.asu.edu

I want more!

Books

CSS Web Site Design by Eric Meyer

Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Prioritizing Web Usability (VOICES) by Jakob Nielsen

Websites

http://www. lynda .com

Arizona State University Web Design for Non-Designers

1 comments

Notes on slide 1

2 Favorites