• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
I'm Not a Designer
 

I'm Not a Designer

on

  • 8,193 views

This presentation for the 2010 PETE&C Conference was designed to introduce teachers to web design, in a time when many are challenged to wear that new and unfamiliar hat. It covers basic design ...

This presentation for the 2010 PETE&C Conference was designed to introduce teachers to web design, in a time when many are challenged to wear that new and unfamiliar hat. It covers basic design principles, the traits of web viewers, and helpful, free graphic resources.

Statistics

Views

Total Views
8,193
Views on SlideShare
5,570
Embed Views
2,623

Actions

Likes
35
Downloads
0
Comments
1

11 Embeds 2,623

http://arquiteturadeinformacao.com 2556
http://www.markselliott.com 28
http://paper.li 19
http://petec2010conferencereportdtsd.wikispaces.com 8
http://a0.twimg.com 3
http://www.slideshare.net 3
http://websites.pdesas.org 2
https://twimg0-a.akamaihd.net 1
http://webcache.googleusercontent.com 1
http://www.slashdocs.com 1
https://m.facebook.com&_=1372169815471 HTTP 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I'm Not a Designer
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    I'm Not a Designer I'm Not a Designer Presentation Transcript

    • I’M not not not A designer A designer A designer A but I play one in my class
    • today MySQL Flash Javascript HTML Code
    • today Ba l ance
    • today spac i n g
    • today up here heads up hey you precedence lookmadehere look over you down here
    • today Navigation W E S
    • today a lign ment
    • today olorcolorcolorcolo etype typetype typ image 
    • today usability accessibility © copyright
    • today meh.
    • today not bad
    • today oh no, you didn’t.
    • today (please forgive me!)
    • today WHAT makes T H E shh! very secrets Y O U R basics visitor O F good web O F A tick design designer
    • WHAT makes Y O U R visitor tick how they read what they need what they choose
    • WHAT makes Y O U R visitor 0:00:04.40 tick 4.4 seconds of time how they read for each 100 words what they need what they choose on a website. http://www.useit.com/alertbox/percent-text-read.html
    • WHAT makes Y O U R 18 4.4 visitor words seconds tick Assume a reading speed of 250 words per minute (study how they read included the highly literate). what they need what they choose At that speed, users can read 18 words in 4.4 seconds. http://www.useit.com/alertbox/percent-text-read.html
    • WHAT makes Y O U R 18% visitor Thus, when you add verbiage tick to a page, you can assume that readers will read just 18% of it. how they read what they need what they choose Ouch. http://www.useit.com/alertbox/percent-text-read.html
    • WHAT makes Y O U R visitor How do they tick choose which 18 how they read percent to read? what they need what they choose http://www.useit.com/alertbox/percent-text-read.html
    • Eye-tracking visualizations show that users read WHAT Web pages in an F-shaped pattern: two makes horizontal stripes, followed by a vertical stripe. Y O U R visitor tick how they read what they need what they choose Translation? http://www.useit.com/alertbox/reading_pattern.html
    • Eye-tracking visualizations show that users read WHAT Web pages in an F-shaped pattern: two makes horizontal stripes, followed by a vertical stripe. Y O U R visitor tick how they read what they need what they choose Translation? http://www.useit.com/alertbox/reading_pattern.html
    • Eye-tracking visualizations show that users read WHAT Web pages in an F-shaped pattern: two makes horizontal stripes, followed by a vertical stripe. Y O U R visitor tick how they read what they need what they choose Translation? http://www.useit.com/alertbox/reading_pattern.html
    • WHAT makes Users won't read your text thoroughly. Y O U R visitor The first two paragraphs must tick state the most important information. how they read Start subheads, paragraphs, what they need and bullet points with what they choose information-carrying words. http://www.useit.com/alertbox/reading_pattern.html
    • WHAT makes What else can we learn from Y O U R eye-tracking studies? 1 visitor DUH Readers ignore banners. tick HUH? Readers ignore decorative fonts. DUH Organizing important info in the how they read top left is key. what they need HUH? Lengthy lines of text what they choose promote eye fatigue. 2 1 http://www.virtualhosting.com/blog/2007/scientific-web- design-23-actionable-lessons-from-eye-tracking-studies/ 2 http://www.slate.com/id/2193552/
    • WHAT makes What else can we learn from Y O U R eye-tracking studies? visitor DUH Large images beat small images. tick HUH? Text beats images. DUH Shorter paragraphs perform how they read better than long ones. what they need HUH? Smaller type encourages what they choose more focused reading, and large type, more scanning. http://www.virtualhosting.com/blog/2007/scientific-web-design-23-actionable- lessons-from-eye-tracking-studies/
    • blah-blah text WHAT a block of words that users typically makes skip when they arrive at a page. The worst kind has no function, like Y O U R visitor ‘Welcome to our site, we hope you will find our new and improved tick design helpful.’ how they read what they need what they choose http://www.useit.com/alertbox/intro-text.html
    • blah-blah text WHAT a block of words that users typically makes skip when they arrive at a page. The worst kind has no function, like Y O U R visitor ‘Welcome to our site, we hope you will find our new and improved tick design helpful.’ “Kill the welcome mat and cut to the chase!” Jakob Neilsen how they read what they need what they choose http://www.useit.com/alertbox/intro-text.html
    • WHAT makes Y O U R visitor ENTER: tick The Tagline how they read what they need what they choose http://www.useit.com/alertbox/intro-text.html
    • WHAT makes Accessibility Y O U R visitor accessibility tick “It’s not just about disabled users being able to access your website — it’s about everyone being able to access your website.” Trenton Moss how they read what they need what they choose http://www.alistapart.com/articles/wiwa/
    • WHAT alt attributes makes presented to the user when the image is not available; a concise description of the Y O U R picture, which would make sense in the visitor text when the image is not present. tick Rules to alt by: • If an image contains text, use that text for the alternate text. • If an image is merely decorative, how they read leave the alternate text blank. what they need Joe Dolson what they choose http://www.improvetheweb.com/5-basic-steps-towards-website-accessibility
    • WHAT considering color It is estimated that one in 12 makes men and one in 200 women Y O U R have some form of color visitor blindness. tick how they read what they need what they choose http://www.alistapart.com/articles/wiwa/
    • WHAT considering color Are you requiring that someone makes see in color to tell the difference Y O U R between options? visitor tick Red asterisks (*) are required fields. Green how they read asterisks (*) are optional. what they need what they choose http://www.improvetheweb.com/5-basic-steps-towards-website-accessibility
    • WHAT makes Are your Y O U R contrasts visitor too low? tick T R Y : The Color- how they read Contrast Analyzer what they need http://blackwidows.co.uk/resources/color- contrast-analyser.php what they choose http://www.improvetheweb.com/5-basic-steps-towards-website-accessibility http://art4cast.wikispaces.com/
    • WHAT makes meaningful link text Y O U R visitor tick Click here to read more about my life as an astronaut! vs. how they read Read more about my life as an what they need astronaut. what they choose http://www.improvetheweb.com/5-basic-steps-towards-website-accessibility
    • WHAT makes flashing or blinking Y O U R that’s not optional visitor tick Epileptic users must be careful to avoid seeing flickering between 2 and 55 Hz . Videos or flashing elements should how they read only begin when users click “play”, what they need and warnings should accompany anything with epileptic triggers. what they choose http://www.improvetheweb.com/5-basic-steps-towards-website-accessibility
    • WHAT makes Y O U R Software visitor tick Adobe Acrobat, Flash, PowerPoint, Java, how they read Cookies, Pop-Ups what they need what they choose
    • WHAT makes font characteristics Y O U R visitor • Size, Typeface (font), and tick • • even Arrangement! how they read what they need L O O K : Readability http://lab.arc90.com/experiments/readability/ what they choose
    • WHAT screen size makes Y O U R visitor tick how they read what they need what they choose Headers should be somewhere between 600px and 800px wide. http://tech2.in.com/media/images/2007/May/img_6218_img_2158_apple30inch.jpg http://magsol.files.wordpress.com/2009/05/macbook1white20061108.jpg
    • WHAT screen size makes Y O U R visitor tick how they read what they need what they choose Be sure to test repeating background images on a smaller screen, too! http://tech2.in.com/media/images/2007/May/img_6218_img_2158_apple30inch.jpg http://magsol.files.wordpress.com/2009/05/macbook1white20061108.jpg
    • very T H E basics O F good design precedence spacing navigation alignment usability consistency typography image
    • very T H E basics O F Color good Contrast design Size precedence spacing Design Element navigation alignment Position usability consistency typography image http://dryicons.com
    • very T H E basics O F good design precedence spacing navigation alignment usability consistency typography image http://www.mediapost.com/directories/index.cfm?/fa/mpDir.MPRDDetail/cat/3/subcat/13/catName/Newspapers/subcatName/National/National.html
    • Line Spacing very T H E Padding basics White Space O F good design precedence spacing navigation alignment usability consistency typography image
    • Line Spacing very T H E Padding basics O F White Space good design precedence spacing navigation alignment usability consistency typography image
    • very T H E basics Line Spacing O F good Padding design White Space precedence spacing navigation alignment usability consistency typography image
    • very T H E basics Line Spacing O F good Padding design White Space precedence spacing navigation alignment usability consistency typography image
    • very T H E basics O F good Navigation design vs. precedence spacing Orientation navigation alignment usability consistency typography image
    • very T H E basics O F where you can go good Navigation design vs. precedence spacing Orientation where you are navigation alignment usability consistency typography image
    • very The Breadcrumb Trail T H E basics O F where you can go good Navigation design vs. precedence spacing Orientation where you are navigation alignment usability consistency typography image http://teachercenter.cciu.org
    • very The Breadcrumbuse T H E teach them to basics Trail O F where you can go good Navigation design vs. precedence spacing Orientation where you are navigation alignment build usability consistency typography image http://bookworms.cciu.org
    • very The Breadcrumb Trail T H E bypass basics O F where you can go good Navigation design vs. precedence spacing Orientation where you are navigation alignment build usability consistency typography image http://bookworms.cciu.org
    • very T H E Rules to go by: basics Navigation to everywhere O F good doesn’t need to be on every page. design Navigation to related or precedence following activities spacing navigation should be. alignment usability consistency typography Orientation (you are here) image must be.
    • very T H E alignment Keeping things lined up; that's not to say basics that everything should be in a straight line, but keep things consistently placed. O F Aligning makes your design more ordered good and digestible, as well as making it seem more polished. design Collis Ta’eed precedence spacing navigation alignment usability consistency typography image http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/
    • very T H E basics O F good ENTER: design The Grid precedence spacing navigation alignment usability consistency typography image
    • very T H E basics The Grid O F good design precedence spacing navigation alignment usability consistency typography image
    • very T H E basics O F good ENTER: design The Table precedence spacing navigation alignment usability consistency typography image
    • very T H E basics O F good ENTER: design The Table precedence spacing navigation alignment usability consistency typography image
    • very T H E usability The user should be able to intuitively relate basics the actions he needs to perform on the web page, with other interactions he sees O F in the general domain of life good (e.g., a press-of-a-button action leads to some result). design precedence spacing navigation alignment usability consistency typography image http://en.wikipedia.org/wiki/Web_usability
    • very T H E basics THE EASIEST EXAMPLE: O F good The design Underline precedence spacing navigation alignment usability consistency typography image
    • very T H E Contact Mrs. Jones Contact Mrs. Jones 555-1212 555-1212 basics Click me! Click me! O F good design But they’ll figure it out! Run—don’t walk—to remove all precedence spacing underlining from any text in your navigation webpage that is not a link, or a alignment usability book title. consistency typography image
    • very T H E Use Verbose Phrasing Don't try to name features or web links with a single basics word. Use several words if that's what it takes. O F Grouping good Put related things together. Use Images as an Additional Option—Not an design Alternative—to Words Graphics are good for coming back to a feature, not for figuring things out in the first place. precedence Use Descriptive Values, Not Internal Codes spacing Use words that any competent Windows user will navigation alignment understand, not industry jargon, computerese, or usability even special business language. Translate things consistency into what users are trying to do. typography image http://www.usabilityinstitute.com/resources/userInYourFace/userInYourFace.htm
    • very T H E basics THE ONLY WAY TO KNOW: O F good The design Guest precedence spacing navigation alignment usability consistency typography image
    • very T H E basics O F good design precedence spacing navigation alignment usability consistency typography image
    • very T H E do don’t Sit next to them. Say anything. basics do don’t O F watch where they go, help them get back good and where they don’t go. if they get lost. do don’t design give them a task, such as “find my latest post.” explain why you made certain design choices. precedence spacing navigation If you have to alignment usability explain it, consistency typography you need to image revise it.
    • very T H E get it basics Free, online Guide to Usability and Usable Interfaces O F good http://www.usabilityinstitute.com/ resources/userInYourFace/ design userInYourFace.htm precedence spacing navigation alignment usability consistency typography image
    • very T H E consistency design the website in such a way that basics makes it easier, not harder, for the mind to see the pattern. It must be clear to a visitor O F he is still at the same site. good Bernard Peh design precedence spacing navigation alignment usability consistency typography image http://ezinearticles.com/?expert=Bernard_Peh
    • very T H E typography the arrangement of type and the design of basics type O F good Think it design doesn’t matter? precedence spacing navigation alignment usability consistency typography image
    • very “ T H E A couple of months ago, I was lucky enough to see basics Erik Spiekermann give a lecture. Part of his talk addressed his redesign of The Economist newspaper, which was partly motivated by the client’s realization O F that their design was too heavy and the content too good difficult to read. In newspaper design, infor mation is dense. Newspapers often... [set] their body content in a light design typeface with plenty of whitespace within and around the characters. This was part of Spiekermann’s solution for the redesign of The Economist. Whilst retaining the quirkiness of the original Economist typeface, Spiekermann redesigned it slightly, adding more whitespace to the individual precedence characters. He then set the type slightly smaller and spacing with more [distance between lines]. All these changes navigation added micro whitespace to the design. The overall alignment result was subtle: the content was more legible and the overall feeling of the newspaper was lighter, yet usability the amount of content remained the same. consistency ” typography Mark Boulton image http://www.alistapart.com/articles/whitespace/
    • very T H E basics O F good design precedence spacing navigation alignment usability consistency typography image http://www.daidala.com/economist101ecotype.html
    • very size T H E size basics O F good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very size T H E size basics O F good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography image the song we wrote about the days of the week. Ms. Judy is playing guitar.
    • very T H E face, or classification basics O F serif / sans serif good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography image the song we wrote about the days of the week. Ms. Judy is playing guitar.
    • very T H E face, or classification basics O F serif / sans serif good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very T H E face, or classification basics Web-Safe Fonts O F good or design precedence spacing navigation alignment usability consistency typography image
    • very T H E color basics O F good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very T H E color basics O F good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very T H E color basics February 1-7 For this week’s podcast, we welcomed the O F good Principal, Mr. Brackbill into the studio for an interview. He was very funny. design Check out the full interview here. The podcast may take a while to download. precedence spacing The podcast is copyright Smithfield School navigation District. For more information, contact us. alignment usability consistency typography image
    • very T H E case basics Lower: Less room, and O F easier to read. Don’t believe good me? How long is it taking you to get through this? design UPPER: MORE ROOM, AND precedence HARDER TO READ. DON’T spacing navigation BELIEVE ME? HOW LONG IS alignment IT TAKING YOU TO GET usability consistency THROUGH THIS? typography image
    • very T H E case basics O F good design February 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability January 24-31 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very T H E case basics O F good design FEBRUARY 1-7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability JANUARY 24-31 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very T H E case basics HINT: Uppercase should always be smaller than the lowercase text around it, and O F good always requires more space between letters (tracking). design F E B R UA RY 1 - 7 For this week’s podcast, we welcomed the precedence Principal, Mr. Brackbill into the studio for an spacing interview. He was very funny. navigation alignment usability J A N UA RY 2 4 - 3 1 consistency This week’s episode includes a recording of typography the song we wrote about the days of the image week. Ms. Judy is playing guitar.
    • very T H E style/decoration/weight basics Contact Mrs. Jones O F 555-1212 good design F E B R UA RY 1 - 7 For this week’s podcast, we got the precedence Principal, Mr. Brackbill to visit the studio spacing for an interview. He was very funny. navigation alignment usability consistency typography image
    • very T H E image & design element basics O F good STEP ONE: Decide on a look, and find design images that support it. Mixing styles, are you? precedence You wouldn’t wear sneakers spacing navigation with a suit and tie, would you? alignment usability consistency typography image http://classroomgoogleearth.wikispaces.com/
    • very T H E image & design element basics STEP TWO: O F good Decide what to symbolize. TRY PHOTOS FOR design Special projects Student work precedence Events or fundraisers spacing navigation TRY ICONS FOR alignment usability Navigation to common areas consistency typography Highlight the important image http://classroomgoogleearth.wikispaces.com/
    • very T H E image & design element basics O F good Rules to symbolize by: be relevant. design be consistent. be legal. be creative. precedence spacing navigation be small! alignment usability consistency typography image http://classroomgoogleearth.wikispaces.com/
    • shh! secrets O F A web designer make your own art navigation
    • shh! secrets O F web A type designer vector make your own art navigation photo
    • shh! secrets O F web A type kind designer CAN BE ITS OWN art make your own OF art navigation
    • shh! livebrush DOWN LOAD secrets http://livebrush.com O F A web designer make your own art navigation Download Icon (arrow only) by http://dryicons.com/
    • shh! GIMP DOWN LOAD secrets http://gimp.org O F A web designer make your own art navigation Download Icon (arrow only) by http://dryicons.com/
    • shh! Pixlr ON THE WEB secrets http://www.pixlr.com O F A web designer make your own art navigation Web Icon (globe only) by http://dryicons.com/
    • shh! Dry Icons ON THE WEB secrets http://dryicons.com O F A web designer make your own art navigation Web Icon (globe only) by http://dryicons.com/
    • shh! ON THE WEB Pics4Learning secrets http://pics4learning.com O F A web designer make your own art navigation Web Icon (globe only) by http://dryicons.com/
    • shh! secrets O F A web designer The Link make your own art navigation
    • shh! secrets O F A web designer The Link make your own art navigation http://newworlds.cciu.org/
    • shh! secrets O F A web designer The Link make your own art navigation http://moodle.ojrsd.com/
    • shh! secrets potential traps • Linking to pages they O F A web designer • • don’t have access to Moving pages around Linking to pages that are blocked make your own art navigation
    • ? ? ?? ? Questions? ? ? Pick my brain!
    • wrapping up WHAT makes T H E shh! very secrets Y O U R basics visitor O F good web O F A tick design designer