• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Principles of beautiful web design
 

Principles of beautiful web design

on

  • 1,058 views

This slide has an overview of two chapters of the SitePoint book: The Principles of Beautiful Web Design plus other examples given by Noel Saw for the LA / Pasadena Graphics Designer's Meetup.

This slide has an overview of two chapters of the SitePoint book: The Principles of Beautiful Web Design plus other examples given by Noel Saw for the LA / Pasadena Graphics Designer's Meetup.

Statistics

Views

Total Views
1,058
Views on SlideShare
1,057
Embed Views
1

Actions

Likes
0
Downloads
18
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Principles of beautiful web design Principles of beautiful web design Presentation Transcript

    • The Principles ofBeautiful Web Design By Jason Beaird Noel Saw, Reviewer & Presenter http://ladesigners.org
    • Special Thanks Our Event Space and Pizza (!) Sponsor:WiFi SSID: indiedesk | Password: indiedesk816 (both all lowercase) Co-Sponsor:
    • Who am I ?I am Noel Saw  I also co-organize the SoCal WordPress Meetup group with Natalie MacLees. I’ve been using Photoshop since v1.0 in 1990 I’ve been using Illustrator since v1.0 in 1989 I’ve been designing and managing website projects since 1996 Involved with over 10 startup companies since 1992 Currently mentoring/advising three startup companies
    • Why am I here tonight? I want to be a better designer I seek inspiration Deliver a better user experience to my customers and clients And what about you?
    • ISBN: 978-0-9805768-9-4
    • Book Outline Chapter 1: Layout & Composition Chapter 2: Color Chapter 3: Texture (Shapes) Chapter 4: Typography
    • Book: What is Beautiful Design? Good design is about the relationships between the elements involved, and creating a balance between them. Fads come and go, but good design is timeless. The finishing touches make a big impression.
    • Me: What is Beautiful Design? Padding, Spacing and Proportions Typography Textures and Colors Fine Details (processed by the sub-conscious) Simplicity
    • Chapter 1: Layout & Composition Discovery  Ask the right questions… Exploration Implementation (Sketching & Wireframing) Defining Good Design:  Pleased by design but drawn to content  User scan move about with easy/intuitive navigation  Users recognize each as belonging to the site (consistency)
    • Chapter 1: Layout & Composition (Cont’d) Anatomy of a Web Page  Containing Block  Logo  Navigation  Content  Main body  Sidebar(s)  Footer  White space Grid Theory  960 grid: 960.gs
    • Chapter 1: Layout & Composition (Cont’d)Golden Rule/Ratio The diameter of the sunflower’ s center the total diameter of the sunflower, including the petals, divided by phi .
    • Chapter 1: Layout & Composition (Cont’d)The Rule of Thirds –A simplified version of theGolden RuleThe rule states that an image should be imagined as dividedinto nine equal parts by two equally-spaced horizontal linesand two equally-spaced vertical lines, and that importantcompositional elements should be placed along these lines ortheir intersections.Proponents of the technique claim that aligning a subject withthese points creates more tension, energy and interest in thecomposition than simply centering the subject would.Who has an eye for photography? For example goodphotographers know about not centering the subject andcropping,
    • Chapter 1: Layout & Composition (Cont’d)The Rule of Thirds –A simplified version ofthe Golden Rule
    • Chapter 1: Layout & Composition (Cont’d) Balance  Symmetrical Balance  Asymmetric Balance  Unity  Proximity Repetition Emphasis  Placement  Continuance  Isolation  ContrastProportion (Related to Rule of Thirds)
    • Chapter 3: Texture (Shapes) Point Line Shape  Rounded Corner  Rotating  Shapes and Layout Volume & Depth Pattern Building Texture
    • What does“Guiding Principles” mean?"Guiding principles" are the broad philosophy orfundamental beliefs that steer an organization, team orindividuals decision making, irrespective of the projectgoals, constraints, or resources.” What does UX mean?UX is “User Experience” and web design is a sub-set ofUX. UX is encompassing of the entire interaction betweenusers and in our case a web site or web application.
    • UX Mag Guiding Principles Understand the underlying problem before attempting to solve it Dont hurt anyone Make things simple and intuitive Acknowledge that the user is not like you Have empathy Generally good life skills to have…
    • A Shift in Thinking Here’s an invitation for you to think of yourself as a creator of an experience rather than a web designer or even a “UX designer” Think of the “experience” of someone using your design as a whole “product” or “solution” rather than as a “website.” The product is a creation that you’re proud to proclaim as “yours” – with a sense of ownership
    • Recap: UX Mag Guiding Principles Understand the underlying problem before attempting to solve it Dont hurt anyone Make things simple and intuitive Acknowledge that the user is not like you Have empathy
    • Resources SitePoint book: ISBN: 978-0-9805768-9-4 Designm.ag: 650 Free Photoshop Patterns Smashing Magazine: Designing Memorable Websites Spyre Studios: Light Clean Designs
    • Upcoming MeetupsTomorrow night: Virtual Hangout on Google+HTML/CSS for BeginnersSoCal WordPress:This Saturday 10 am here forProgrammers and Developers!Advanced users only please.
    • Fund Raising for: If you enjoyed tonight’s free talk and event please donate to my girlfriend’s half marathon run to raise funds for The Leukemia & Lymphoma Society: http://CrystalUX.net/tnt The Leukemia & Lymphoma Society is a registered 501(c)3 non-profit organization All donations to are tax deductible to the extent of the law. Please check with your tax professional.
    • Contact MeNoel Sawnoel@wpverse.comLinkedin | @Wpverse | NoelSaw.com/+
    • Special ThanksOur Event Space and Pizza (!) Sponsor: Co-Sponsor: