visual interface design
TRANSCRIPT
Pixl is a user experience design shop creating user-centered designs for the modern web.
JONATHAN SPEH
VISUAL DESIGN FUNDAMENTALS
AGENDAINTRODUCTION
VISUAL HIERARCHY
UI ELEMENTS
VISUAL ELEMENTS
Q&A
DESIGN IS NOT SIMPLY SHAPES AND COLORS, IT’S ABOUT BUILDING A CONNECTION WITH YOUR USERS. IT’S OFTEN THE FIRST AND ONLY
CHANCE TO LEAVE A LASTING IMPRESSION.
A BALANCE BETWEEN CAPTIVATING AESTHETICS AND EFFORTLESS INTERACTIVITY
DESIGN IS HUMAN
“IT TAKES MONUMENTAL IMPROVEMENT FOR US
TO CHANGE HOW WE LIVE OUR LIVES. DESIGN IS
THE WAY WE ACCESS THAT IMPROVEMENT.”
THE IMPACT OF DESIGN
MIKE DAVIDSON, TWITTER — VICE PRESIDENT, DESIGN
CONSTRUCTING YOUR DESIGN
INTERFACE DESIGN
A WEBSITE IS THE SCIENCE OF AESTHETICS COMBINED WITH THE PRINCIPALS OF BUSINESS
SHAPING THE UX
Maintaining consistency from page-to-page will lend to a more intuitive design.
CONSISTENCY
Backgrounds, text, icons, and graphic elements should all be considered when selecting a color palette.
COLOR
Ensure that your design contains visuals that are not only aesthetically pleasing, but are easily recognizable.
VISUAL CUES
Allowing users to customize certain features, upload a profile photo, change the settings, etc. lends to a personal feel.
CUSTOMIZATION
VISUAL HIERARCHY
LAYOUT COMMUNICATE IMPACT
INFORM
A LOGICAL PROGRESSION THAT GUIDES USERS FROM ONE ACTION TO THE NEXT
COMMUNICATION
CLEARLY COMMUNICATE CONTENT BY PRIORITIZING IT WITHIN YOUR DESIGN
IMPACT
MEMORABLE DESIGNS INVOKE A POSITIVE EMOTIONAL RESPONSE
VIRGIN AMERICA
SCANNING PATTERNS
Z-PATTERN
1 2
3
4
F-PATTERN
SPACE
SPACE
EXPLOIT COLOR TO DRAW ATTENTION TO SPECIFIC AREAS OF YOUR DESIGN
COLOR
COOLORS
ADOBE KULER
UIGRADIENTS
MATERIALPALETTE
FLATUICOLORS
TEXT SIZE, TYPOGRAPHY, AND CONTRAST, USED FOR EMPHASIS
SIZE
SO WHERE ARE WE HEADED?
THE NEW PARADIGM OF DESIGN WILL BE WHEN WE THINK BEYOND THE CONSTRAINTS OF A SCREEN. TURNING TO
HAPTIC, AUTOMATED, AND AMBIENT INTERFACES.
ZERO UI
29
UI ELEMENTSPRINCIPALS + PATTERNS
INTERFACE DESIGN
HOW THE USER INTERACTS WITH A SITE
AESTHETIC DESIGN
THE OVERALL LOOK AND FEEL OF THE SITE
INFORMATION DESIGN
HOW INFORMATION IS PRESENTED AND ORGANIZED ON THE SITE
AN INTERFACE IS A COLLECTION OF JOBS AND
EACH JOB HAS A BEGINNING, MIDDLE, AND END
POSTING A STATUS UPDATE ON FACEBOOK
COMPONENTS
INPUT CONTROLS
PROVIDE INTERACTION AND FUNCTIONALITY GIVING THE USER ADDITIONAL OPTIONS
INPUT TRANSITION
NAVIGATION
PROVIDES ORIENTATION FOR THE USER AND STREAMLINES HOW MOVE ABOUT THE SITE
ANIMATIONS + TRANSITIONS
DRAW ATTENTION AND SIGNAL CHANGE IN
A MORE SEAMLESS MANNER
ESTABLISHING CONNECTIONS THROUGH TRANSITIONS MAKE YOUR SITE COHERENT
TRANSITIONS
THE MAYA PRINCIPAL
DESIGNERS MUST PAVE THE WAY TOWARD THE FUTURE, BUT IN
GRADUAL STEPS—DELIVERING EXPERIENCES THAT BREAK NEW
GROUND, BUT STILL CONTAIN ENOUGH OF THE FAMILIAR TO BE “ACCEPTABLE” TO THE PEOPLE FOR WHOM THEY’RE DESIGNED.
MAYA
45
TAKAWAYS
Add an additional layer of interactivity to your design. An often overlooked element that can enhance your interface and create a more seamless experience
INPUT CONTROLS
Add an additional layer of interactivity to your design. An often overlooked element that can enhance your interface and create a more seamless experience
ANIMATIONS
Establish the overall look and feel of the site; consider how the user will interact with the design, and how information and content is presented
OBJECTIVE
Provides orientation telling the user where they are within the site while streamlining how they move about the site
NAVIGATION
VISUAL ELEMENTSDESIGN + STYLE
CONTRAST, COLOR, AND TYPOGRAPHY ARE THE MOST
IMPORTANT VISUAL ELEMENTS WHEN IT COMES TO HOW
AN INTERFACE IS PERCEIVED AND UNDERSTOOD
VISUAL PRINCIPALS
CONTRAST SPECIFICALLY AS IT RELATES TO
COLOR HELPS CREATES DRAMA AND INTRIGUE
COLOR CONTRAST DETERMINES YOUR ENTIRE COLOR PALETTE
COLOR CONTRAST
COLOR SCHEMES
TRIADIC
SIMPLE TO USE, BALANCED, COMPLEMENTARY, AND VIBRANT
TRIADIC
COMPOUND
USES BOTH CONTRASTING AND COMPLEMENTARY COLORS
COMPOUND
ANALOGOUS
FOCUSES ON COMPLEMENTARY COLORS RATHER THAN CONTRASTING
ANALOGOUS
TYPOGRAPHY
Modern and dynamic, they are simple and easy to read on a screen, even at smaller sizes–perfect for body text, or headlines
SANS-SERIF
Serif typefaces are characterized by tiny lines (serifs) trailing from the edges of the strokes and stems
SERIF
Often used to display lines of code and plain text on webpages to enhance their readability, monospace typefaces consist of characters with the same width
MONOSPACE
CREATIVE
CLEAN
FUN
BOLD
Q&A
THANK YOU!