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?
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
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
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.