Principles of beautiful web design
description
Transcript of Principles of beautiful web design
![Page 1: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/1.jpg)
The Principles of Beautiful Web Design
By Jason Beaird
Noel Saw, Reviewer & Presenterhttp://ladesigners.org
![Page 2: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/2.jpg)
Special ThanksOur Event Space and Pizza (!) Sponsor:
WiFi SSID: indiedesk | Password: indiedesk816(both all lowercase)
Co-Sponsor:
![Page 3: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/3.jpg)
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
![Page 4: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/4.jpg)
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?
![Page 6: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/6.jpg)
Book OutlineChapter 1: Layout & Composition
Chapter 2: Color
Chapter 3: Texture (Shapes)
Chapter 4: Typography
![Page 7: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/7.jpg)
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.
![Page 8: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/8.jpg)
Me: What is Beautiful Design?Padding, Spacing and Proportions
Typography
Textures and Colors
Fine Details (processed by the sub-conscious)
Simplicity
![Page 9: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/9.jpg)
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
![Page 10: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/10.jpg)
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)
![Page 11: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/11.jpg)
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)
![Page 12: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/12.jpg)
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)
![Page 13: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/13.jpg)
Chapter 1: Layout & Composition (Cont’d)
The Rule of Thirds –A simplified version of the Golden Rule
![Page 14: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/14.jpg)
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)
![Page 15: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/15.jpg)
Point
Line
Shape Rounded Corner Rotating Shapes and Layout
Volume & Depth
Pattern
Building Texture
Chapter 3: Texture (Shapes)
![Page 16: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/16.jpg)
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.
![Page 17: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/17.jpg)
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…
![Page 18: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/18.jpg)
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
![Page 19: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/19.jpg)
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
![Page 20: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/20.jpg)
ResourcesSitePoint book:
ISBN: 978-0-9805768-9-4
Designm.ag: 650 Free Photoshop Patterns
Smashing Magazine:Designing Memorable Websites
Spyre Studios:Light Clean Designs
![Page 21: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/21.jpg)
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.
![Page 22: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/22.jpg)
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.
![Page 23: Principles of beautiful web design](https://reader033.fdocuments.us/reader033/viewer/2022061207/54844384b4af9fb55d8b4675/html5/thumbnails/23.jpg)
Contact MeNoel [email protected] | @Wpverse | NoelSaw.com/+