Cover image for Visual Experiences : a Concise Guide to Digital Interface Design
Visual Experiences : a Concise Guide to Digital Interface Design
Title:
Visual Experiences : a Concise Guide to Digital Interface Design
ISBN:
9781315154305
Edition:
First edition.
Publication Information New:
Boca Raton, FL : CRC Press, 2017.
Physical Description:
1 online resource : text file, PDF
Contents:
Cover -- Title Page -- Copyright Page -- Contents -- Author -- Section I: Thinking -- Chapter 1: Evolution of Digital Design -- 1876-1945: Before Interfaces -- 1945-1970 -- 1945: Vannevar Bush and His Memex Project -- 1968: Douglas Engelbart -- 1973: Xerox Alto -- 1974: Smalltalk -- 1980-1990 -- 1983: Apple Lisa -- 1987: Mac II -- Adobe Software -- 1990-2000 -- 2000 -- 2013-2020 -- References -- Chapter 2: User Research -- Card Sorting -- Open Cards -- Closed Cards -- Hybrid -- Graphical Steps -- Examples of Card Sorting Information Architecture -- Contextual Interviews -- First-Click Testing -- Focus Group -- Creating Personalities -- Heuristics for User Interface Design -- Heuristic Evaluation/Expert Review -- Individual Interviews -- Parallel Design -- Personas -- Example of a Profile of a Person -- Prototyping -- Low Fidelity -- High Fidelity -- Online Surveys -- System Usability Scale -- Task Analysis -- Use Cases -- How to Write a Use Case -- Sample Use Cases -- Usability Testing -- References -- Chapter 3: Early Stages of User Experience and Prototyping -- Where to Start -- Sketching -- Choosing the Right Sketchbook -- Choosing Other Helpful Tools -- More Options and Types of Tools -- Wireframing -- Wireframes for a Game for Mobile and Tablet -- Paper Prototyping -- User Experience and Testing -- Paper Prototyping for Mobile -- Prototyping for Other Types of Devices -- Simulating Interactivity in Paper Prototyping -- References -- Section II: Design -- Chapter 4: Psychology of Color -- Introduction -- Brain Stimulation -- Visual Perception of the Brain -- Color System -- Gestalt Theory -- Color as Emotion -- Color Theory -- Analogous Colors -- Triadic Colors -- Tetradic Colors -- Color Blindness -- Ten Commandments of Color Interaction -- References -- Chapter 5: Typography, Icons, and User Legibility.

Introduction to Typography for Interfaces -- Brief Highlights of the History of Typefaces for Interfaces -- Typographic Format Timeline -- 1968 -- 1973 -- 1983 -- Bitmap -- Outlined Fonts -- True Type -- Font Hinting -- Open Type -- Embedded Open Type -- Web Open Font Format -- Scalable Vector Graphics -- Web Typography -- Interface Typography: Visual Analysis ( Figures 5.6 and 5.7 ) -- X-Height -- Line Height -- Letter Spacing -- General Tips When Setting Your Type -- Columns -- New Era for Replacing Fonts ( Figures 5.10 through 5.14 ) -- Combining Typefaces -- Font Files Workflow and Tools to Manage Fonts -- Icons -- Introduction to Semiotics -- Visual Metaphors -- Icon Design -- Introduction -- A Brief History of Icons -- The Present and Future of Icons and Tools -- The Noun Project -- Lingo -- Creating Icons -- Brainstorming -- Step 1: Sketching -- The Grid -- Step 2: Scanning -- Step 3: Tracing by Drawing the Icon -- Digitizing -- Step 4: Refine the Edges and Refine the Number of Vector Points in the Drawing -- Step 5: Add Color and Hierarchy within the Space -- Icon Guidelines -- User Legibility -- Perception -- Case 1: The New York Times (A Confidence Study) -- Case 2: Student Typeface Papers (Non-UI Study) -- The Influence of User Testing -- The Importance of Knowing, Understanding, and Applying Studies and Statistics -- Outcomes of Several Research Studies -- Spaces and Environments -- Images and Types -- Best Typeface Size for Screen Copy -- Reading Patterns -- Condensed Typefaces: A Warning -- Responsiveness -- Flexibility and Simplicity -- Ownership -- Moods -- Helpful Tools -- The Evolution of Typography and Icons -- Drawing the Line -- References -- Chapter 6: Image Making -- History of the Pixel and Its Influence -- Resolution -- Types of Pixels -- Formats -- Graphic versus Photographic -- Cropping a Photograph -- Cameras.

Paper Prototyping Stages -- Sizing -- Images and Layering -- Gallery -- Source Image -- Background -- Informative or Infographic Using Images -- Image Transparency -- Image as Icon -- Animated Image -- Experimenting with Images -- Cropping -- Preparing Images in Grayscale -- Preparing Images in Black and White -- Preparing Images in Color -- Preparing Images with Patterns (Graphics) -- Preparing Bitmap Images -- Before and after Image Example -- Preparing Images as Monotone, Duotone, Tritone, Quadtone, or Custom -- Halftone -- How to Prepare Images for Interfaces (Size and Resolution) -- Limitations and Guidelines -- References -- Chapter 7: Visual Hierarchy -- Layers -- Visual Hierarchy -- Designing a House -- Hierarchy in Interfaces -- Western Reading -- Right-to-Left Reading (Hebrew and Arabic) -- Top-to-Bottom Reading (Chinese) -- Gutenberg Diagram ( Figure 7.1 ) -- Size -- Scale -- Contrast -- Color -- Repetition -- Alignment -- Proximity -- Dominance -- Emphasis -- Typography -- Design Patterns -- Eye Gaze Patterns -- Understanding Visual Patterns -- Login Patterns -- Navigation Pattern -- Spotify: An App Case Study (Removing the Hamburger Icon from the Hierarchy) -- GoDaddy Case Study -- External Sources for Pattern Libraries -- References -- Chapter 8: Grid Flexibility and Responsiveness -- The Grid -- Other Examples -- Beginning -- Modular Grid -- The Value of Pixels -- Keeping Up with Pixels -- Following Guidelines -- Questions to Ask before You Start Making Decisions on a Grid -- Types of Grids -- Limitations -- Technological Tools -- Templates -- Designer and Developer -- Sometimes, Templates Are Not an Option -- Responsiveness -- Tools for Responsiveness -- User Testing -- References -- Chapter 9: Motion -- Tips -- Making Decisions -- Full Motion Prototype -- Preloader -- Transition -- Interface Interstitials -- Ad Guidelines.

YouTube Ad Examples -- Video Interface -- Windows, Tabs, and Menus -- Gestures and Motions -- Types of Menus -- Signature Animation and Interactions -- References -- Section III: Interaction -- Chapter 10: Communication Feedback -- Whom to Ask? -- How to Ask? -- What to Ask? -- Communication -- User Behavior -- Types of Feedback -- Interface Preference Settings -- Design Team Feedback -- Client Feedback -- User Feedback -- Positive Feedback -- Negative Feedback -- References -- Chapter 11: Accessibility -- Color and Contrast -- Inverting Color -- Contrast and Brightness -- Screen Magnification -- Option to Change Font Size -- Text-to-Speech and Speech-to-Text -- Icons and Modes for Older Users -- Visual Feedback -- Forms, Labels, and Boxes -- On-Screen Keyboard -- Autocomplete -- Navigation -- Custom Icons and Functions for Impediments -- References -- Chapter 12: Error Prevention and Security -- Web Browsers -- Security Icon -- Undo -- Misspellings -- Autosave -- Captcha -- 404 Pages -- Error Windows -- Password Errors -- Security Branding -- Custom Designs -- Typefaces -- Icons -- Pop-Ups -- Blinking -- Opening an Interstitial Display before Application -- Closing Pop-Up Windows -- Glitches -- Customizing: Control of Security Settings -- References -- Chapter 13: Usability, Testing, and Acceptance -- Usability -- Affordances, Signifiers, and Instructional Manuals -- Affordances -- Types of Affordances -- Conceptual Models -- Visible versus Invisible -- Signifiers Are Critical for UI Systems -- Controls -- Instructional Manuals -- Testing -- Norman's Gulf of Execution and Evaluation -- The Gulf of Execution -- Assessing the State of the Gulf and whether It Matches the Goal -- Acceptance -- The Difference between User Acceptance Testing and User Testing -- Watch Out for the Bugs! -- References -- Chapter 14: Designing for Large Interfaces.

Human Factors and Ergonomics -- Ergonomics and Limitations -- Distance -- Ambience -- Interfaces as Entertainment -- Information Design in Large Interfaces -- Participatory Interface Design -- References -- Chapter 15: Designing for Small Devices -- References -- Chapter 16: Designing for Augmented Reality, Virtual Reality, and Mixed Reality -- Comparison of AR, Virtual Reality, and Mixed Reality -- Human Factors for Spatial Interfaces -- Convergence/Focus -- Distance -- Scale -- Field of View and Position -- Motion Sickness -- Maintain Head Tracking -- Shutting Down -- Parallax Effect -- Accelerating and Decelerating Velocity -- Tolerance -- Resolution -- Virtual and Mixed Realities -- WebVR -- What Are Holograms? -- Mixed Reality -- UI Design -- Contrast -- Scrolling -- Navigation -- Window Transitions -- Differing z-Depths -- Hovering/Click -- Motion -- Audio -- Wayfinding -- Prototyping Mazes in VR -- Prototyping for VR -- Icons -- References -- Chapter 17: Design Development -- It's All about the Resolution! -- Branding -- Communication -- References -- Chapter 18: Conclusion -- References -- Index -- A -- B -- C -- D -- E -- F -- G -- H -- I -- J -- K -- l -- M -- N -- O -- P -- R -- S -- T -- U -- V -- W -- X -- Y -- Z.
Abstract:
"Visual Experiences: A Concise Guide to Digital Interface Design provides step-by-step examples to enable readers to create an interface, guiding them from sketching an idea to creating an interactive prototype. This creation of a visual experience is achieved in three steps: thought, design, and interaction. This book focuses on the visual experience of digital interface design from the initial idea to end-user prototype."--Provided by publisher.
Language:
English