Post on 07-Dec-2014
description
transcript
The Principles of Beautiful Web Design
By Jason Beaird
Noel Saw, Reviewer & Presenterhttp://ladesigners.org
Special ThanksOur 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 OutlineChapter 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
DiscoveryAsk the right questions…
Exploration
Implementation (Sketching & Wireframing)
Defining Good Design:Pleased by design but drawn to contentUser scan move about with easy/intuitive
navigationUsers recognize each as belonging to the site
(consistency)
Chapter 1: Layout & Composition
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 the Golden Rule
The rule states that an image should be imagined as
divided into nine equal parts by two equally-spaced
horizontal lines and two equally-spaced vertical lines,
and that important compositional elements should be
placed along these lines or their intersections.
Proponents of the technique claim that aligning a
subject with these points creates more tension,
energy and interest in the composition than simply
centering the subject would.
Who has an eye for photography? For example
good photographers know about not centering the
subject and cropping,
Chapter 1: Layout & Composition (Cont’d)
Chapter 1: Layout & Composition (Cont’d)
The Rule of Thirds –A simplified version of the Golden Rule
Balance Symmetrical Balance Asymmetric Balance Unity Proximity
Repetition
Emphasis Placement Continuance Isolation Contrast
Proportion (Related to Rule of Thirds)
Chapter 1: Layout & Composition (Cont’d)
Point
Line
Shape Rounded Corner Rotating Shapes and Layout
Volume & Depth
Pattern
Building Texture
Chapter 3: Texture (Shapes)
What does“Guiding Principles” mean?
"Guiding principles" are the broad philosophy or fundamental beliefs that steer an organization, team or individual's decision making, irrespective of the project goals, constraints, or resources.”
What does UX mean?
UX is “User Experience” and web design is a sub-set of UX. UX is encompassing of the entire interaction between users and in our case a web site or web application.
UX Mag Guiding PrinciplesUnderstand the underlying problem before
attempting to solve it
Don't 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 ThinkingHere’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 PrinciplesUnderstand the underlying problem before
attempting to solve it
Don't hurt anyone
Make things simple and intuitive
Acknowledge that the user is not like you
Have empathy
ResourcesSitePoint 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 Beginners
SoCal WordPress: This Saturday 10 am here for Programmers 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/+