arizona state university web design for non-designers
TRANSCRIPT
Designing for the web
Design for Non-Designers Safwat Saleem
University Initiatives
Nina KulhawyProvost 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?
0110101010010101001101010100101010
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"><!--body {
background-color: #000000;}
.style1 {color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-weight: bold;
}--></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
Learn more at: http://computer.howstuffworks.com/internet-infrastructure.htm
What is the Internet?
Server-side programming languages
ASP
ASP.NET
ColdFusion
JSP
PHP
Ruby on Rails
Planning
Ha ha
http://nytimes.com/ http://tv.disney.go.com/jetix/witch/
Planning a web site: Audience
Planning a web site: Site maps
Content
Keep it short.
wireframes
Elements
Line Color Texture Typography
David Hellsing: CSS Zen Garden, Contemporary Nouveau
Line
David Hellsing: CSS Zen Garden, Contemporary Nouveau
Line
Jordi Romkema: CSS Zen Garden, Pretty in Pink
Color
Color
Color
Texture
Texture
Texture
typography
Principles
Contrast Repetition Alignment Proximity
Contrast
Contrast
Contrast
Repitition
Repitition
Repitition
Alignment
Alignment
Alignment
Proximity
Proximity
Yea, but where do I go for…
photos?*http://www.istockphoto.com/index.phphttp://www.sxc.hu/
http://www.asu.edu/imagefoliohttp://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.comhttp://www.alistapart.com/http://www.37signals.com/svn/
ASU’s info?http://www.asu.edu/commguidehttp://design.blog.asu.eduhttp://web.asu.edu/community
Build my own?https://techbase.asu.edu/wiki/index.php/
Creating_a_Personal_Websitehttp://blog.asu.edu
I want more!
BooksCSS Web Site Design by Eric MeyerDon't Make Me Think: A Common Sense Approach to Web
Usability by Steve KrugPrioritizing Web Usability (VOICES) by Jakob Nielsen
Websiteshttp://www.lynda.com