Index

A

• A/B testing / A/B testing
• accessibility testing / User accessibility testing (UI testing)
• additive colors / Color systems
• asymmetrical balance / Balance
• Atomic.io
  • URL / Other prototyping tools
• Atomic CSS (ACSS) / Atomic CSS (ACSS)
• Axure / Axure

B

• balance design principle
  • about / Balance
  • symmetrical balance / Balance
  • asymmetrical balance / Balance
  • radial balance / Balance
• Balsamiq mockups / Balsamiq mockups
• basic elements, visual design
  • lines / Using lines
  • angled lines / Using lines
  • curved lines / Using lines
  • shapes / Using shapes
  • colors / Using colors
  • typography / Using the appropriate font/typography
  • textures / Textures
  • forms / Forms
• benefits, user research
  • right product, creating / Helping to create the right product from the beginning
  • conversions, increasing / Increasing conversions and revenues
  • revenues, increasing / Increasing conversions and revenues
  • expensive errors, avoiding / Avoiding surprises saves time and money
  • SEO marketing, improving / Improving SEO and marketing
  • customer retention / Customer retention and loyalty
  • customer loyalty / Customer retention and loyalty
  • competitor insights, providing / Providing competitor insights
  • development resources / Development resources
  • early design guide / Early design guide
• big data
  • about / UX Design with big data
  • designing for / UX Design with big data
  • in UX design / The role of big data in UX design
  • handling, benefits / The role of big data in UX design
• Block, Element, Modifier (BEM) / Block, Element, Modifier (BEM)
• Bootstrap
  • URL / CSS frameworks
• Bulma
  • URL / CSS frameworks

C

• Closure law / The Closure law
• CMYK system / Color systems
• coding prototypes
  • about / Coding prototypes
  • disadvantages / Coding prototypes
• colors
  • about / Using colors
  • using / Using colors
  • color theory / Color theory
  • color systems / Color systems
  • color wheel / Using the color wheel to understand the meaning of colors
  • meanings / The meaning of each color
• color systems
  • about / Color systems
  • CMYK system / Color systems
  • RGB system / Color systems
• color theory
  • hue / Color theory
  • chroma / Color theory
  • saturation / Color theory
  • intensity / Color theory
  • value / Color theory
  • shade / Color theory
  • tint / Color theory
  • tone / Color theory
• Common Region law / The Common Region law
• contrast design principle / Contrast
• conversion funnels
  • creating / Creating and analyzing conversion funnels
  • analyzing / Creating and analyzing conversion funnels
• Coolors.co
  • URL / Choosing the colors and creating the palettes
• CSS frameworks / CSS frameworks
• CSS layouts
  • about / CSS layouts
  • float-based layout / Float-based layout
  • flexbox-based layout / Flexbox-based layout
  • grid-based layouts / Grid-based layout
• CSS methodologies
  • about / CSS methodologies
  • Object-Oriented CSS (OOCSS) / Object-Oriented CSS (OOCSS)
  • Scalable and Modular Architecture for CSS (SMACSS) / Scalable and Modular Architecture for CSS (SMACSS)
  • Block, Element, Modifier (BEM) / Block, Element, Modifier (BEM)
  • Atomic CSS (ACSS) / Atomic CSS (ACSS)
• CSS postprocessors / CSS postprocessors
• CSS preprocessors
  • about / CSS preprocessors
  • Sass / Sass
  • Less / Less
  • Stylus / Stylus
• customer information
  • profile data / Grouping customer information
  • business data / Grouping customer information
  • activity data / Grouping customer information
  • communication data / Grouping customer information

D

• data visualization / Data visualization
• design behavior
  • about / Designing behavior
  • five factors / Five factors/preconditions for users to take actions
  • five preconditions, for actions / Five factors/preconditions for users to take actions
  • models, of behavior change / Models of behavior change
  • behavioral approach, for product design / Behavioral approach for product design
• design phase, UX process
  • about / Design
  • concept / Concept, sketching, and flows
  • flows / Concept, sketching, and flows
  • sketching / Concept, sketching, and flows
  • wireframes / Wireframes and prototyping
  • prototyping / Wireframes and prototyping
  • visual design / Visual design and interactions
  • interactions / Visual design and interactions
  • documentation / Documentation
  • development / Development
• design principles
  • about / Design principles
  • alignment / Alignment
  • hierarchy / Hierarchy
  • contrast / Contrast
  • repetition / Repetition
  • proximity / Proximity
  • balance / Balance
  • space / Space
• Design System, in Sketch
  • creating / Creating the Design System in Sketch
  • files and folders structure, creating / Creating a structure for files and folders
  • naming convention, following / Following the proper naming convention
  • colors, selecting / Choosing the colors and creating the palettes
  • color palette, creating / Choosing the colors and creating the palettes
  • fonts, selecting / Choosing fonts/typefaces
  • typefaces, selecting / Choosing fonts/typefaces
  • grid, configuring / Creating and configuring the grid
  • grid, creating / Creating and configuring the grid
  • UI components, designing / Designing the UI components
• digital prototypes
  • about / Digital prototypes
  • creating / Digital prototypes
  • advantages / Digital prototypes
  • disadvantages / Digital prototypes
• discover stage, UX research
  • about / The discover stage
  • field study / Field study
  • diary study / Diary study
  • user interviews / User interviews
  • stakeholder interviews / Stakeholder interviews

E

• Elaboraton Likelihood Model (ELM) / Models of behavior change
• engaging personas / Engaging personas
• explore stage, UX research
  • about / The explore stage
  • competitive analysis / Competitive analysis
  • design review / Design review
  • persona, building / Persona-building
  • task analysis / Task analysis
  • journey mapping / Journey-mapping
  • prototype feedback and testing / Prototype feedback and testing
  • user stories, writing / Writing user stories
  • card, sorting / Card-sorting
• extrinsic motivation / Extrinsic motivation

F

• fictional personas / Fictional personas
• Figure-Ground law / The Figure-Ground law
• flexbox-based layout / Flexbox-based layout
• Flinto / Flinto
• float-based layout / Float-based layout
• Fluid UI
  • URL / Other wireframing tools
• forms
  • about / Forms
  • using / Forms
• Foundation
  • URL / CSS frameworks
• frontend developer skills
  • HTML / Frontend development/UI development
  • CSS / Frontend development/UI development
  • JavaScript / Frontend development/UI development
• frontend development process, UI
  • about / Frontend development/UI development
  • CSS layouts / CSS layouts
  • CSS preprocessors / CSS preprocessors
  • CSS postprocessors / CSS postprocessors
  • CSS methodologies / CSS methodologies
  • CSS frameworks / CSS frameworks
• full stack design / Full stack design
• full stack designer
  • about / Who is a full stack designer?
  • becoming, roadmap / A roadmap to becoming a successful full stack designer

G

• geometric shapes
  • using / Types of shapes
• Gestalt theory
  • about / The Gestalt theory
  • Proximity law / The Proximity law
  • Similarity law / The Similarity law
  • Closure law / The Closure law
  • Figure-Ground law / The Figure-Ground law
  • Common Region law / The Common Region law
• goal-directed personas / Goal-directed personas
• Google Fonts
  • URL / Typography
• grid-based layout / Grid-based layout

H

• handover design tool
  • using / Using a handover design tool
  • handing-off UI design, with Zeplin / Handing-off UI design using Zeplin
  • handing over design, with Sympli / Handing over design using Sympli
• Heuristic-Systematic Model (HSM) / Models of behavior change
• hierarchy design principle / Hierarchy
• high-fidelity prototypes / Prototyping methods
• high-fidelity wireframes
  • about / High-fidelity wireframes
  • pros / High-fidelity wireframes
  • cons / High-fidelity wireframes
• HotGloo
  • URL / Other wireframing tools

I

• intrinsic motivation / Intrinsic motivation
• InVision / InVision

J

• Justinmind / Justinmind

L

• Less
  • about / Less
  • URL / Less
• lines
  • about / Using lines
  • using / Using lines
  • straight lines / Using lines
• listening stage, UX research
  • about / The listening stage
  • surveys / Surveys
  • search-log analysis / Search-log analysis
  • usability-bug review / Usability-bug review
• low-fidelity prototypes / Prototyping methods
• low-fidelity wireframes
  • about / Low-fidelity wireframes
  • pros / Low-fidelity wireframes
  • cons / Low-fidelity wireframes

M

• market research / Market research is not user research
• MarvelApp / MarvelApp
• Materialize
  • URL / CSS frameworks
• medium-fidelity prototypes / Prototyping methods
• medium-fidelity wireframes
  • about / Medium-fidelity wireframes
  • pros / Medium-fidelity wireframes
  • cons / Medium-fidelity wireframes
• Mockflow
  • URL / Other wireframing tools
• MockingBot
  • URL / Other wireframing tools
• MockPlus
  • URL / Other wireframing tools
• Moqups / Moqups
• MyColor.Space
  • URL / Choosing the colors and creating the palettes

O

• Object-Oriented CSS (OOCSS) / Object-Oriented CSS (OOCSS)
• OmniGraffle
  • URL / Other wireframing tools
• Origami.Design
  • about / Origami.Design
  • features / Origami.Design

P

• paper cutout wireframes / Stenciling and paper cutouts
• paper prototyping
  • about / Paper prototyping
  • pros / Paper prototyping
  • cons / Paper prototyping
• Penultimate from Evernote
  • URL / Other wireframing tools
• perspectives, user personas
  • goal-directed personas / Goal-directed personas
  • role-based personas / Role-based personas
  • engaging personas / Engaging personas
  • fictional personas / Fictional personas
• Pidoco
  • URL / Other wireframing tools
• Pleeease
  • URL / CSS postprocessors
• post-launch UX activities / Post-launch UX activities
• PostCSS
  • URL / CSS postprocessors
• Principle / Principle
• product development process
  • design stage / UI Design handover
  • frontend stage / UI Design handover
  • backend stage / UI Design handover
• production phase, UX process / Production
• Proto.io
  • URL / Other prototyping tools
• prototypes
  • about / Wireframes and prototyping, What is prototyping?
  • benefits / What is prototyping?
  • types / What is prototyping?
  • prototyping methods / Prototyping methods
  • low-fidelity prototypes / Prototyping methods
  • medium-fidelity prototypes / Prototyping methods
  • high-fidelity prototypes / Prototyping methods
  • paper prototyping / Paper prototyping
  • digital prototypes / Digital prototypes
  • coding prototypes / Coding prototypes
• prototypes process
  • about / The process of creating prototypes
  • planning / Planning
  • drawing / Drawing and sketching
  • sketching / Drawing and sketching
  • mockup and design / Mockup and design
  • animations / Animations and interactions
  • interactions / Animations and interactions
  • exporting / Exporting and testing
  • testing / Exporting and testing
• prototyping / What is prototyping?
• prototyping tools
  • about / Prototyping tools
  • MarvelApp / MarvelApp
  • Origami.Design / Origami.Design
  • Justinmind / Justinmind
  • Flinto / Flinto
  • Principle / Principle
  • other tools / Other prototyping tools
• Prototypr.io
  • URL / Other prototyping tools
• Proximity law / The Proximity law
• proximity principle / Proximity
• psychology, UX
  • about / Things you should know about psychology in UX, A quick summary of this section
  • user's motivation / Understanding the user's motivation
  • user's ability / Understanding the user's ability
  • users, triggering / Understanding what triggers our users

R

• radial balance / Balance
• repetition principle / Repetition
• RGB system / Color systems
• role-based personas / Role-based personas

S

• Sass
  • about / Sass
  • URL / Sass
• Scalable and Modular Architecture for CSS (SMACSS) / Scalable and Modular Architecture for CSS (SMACSS)
• SemacticUI
  • URL / CSS frameworks
• shapes
  • about / Using shapes
  • categories / Using shapes
  • using / Using shapes
  • types / Types of shapes
  • geometric / Types of shapes
  • organic / Types of shapes
  • abstract / Types of shapes
  • positive / Types of shapes
  • negative / Types of shapes
  • using, in visual design / Shape usage in visual design
• Similarity law / The Similarity law
• Skeleton
  • URL / CSS frameworks
• Sketch App Sources
  • URL / Sketch plugins
• Sketch plugins
  • about / Sketch plugins
  • Sketch Constraints / Sketch plugins
  • Sketch SF Font Fixer / Sketch plugins
  • Sketch Palettes / Sketch plugins
  • Icon Fonts / Sketch plugins
  • Magic Mirror / Sketch plugins
  • Find and Replace / Sketch plugins
  • Sketch Content Generator / Sketch plugins
  • Sort Me / Sketch plugins
  • Dynamic Button / Sketch plugins
• Sketch REPO
  • URL / Sketch plugins
• Sketch tool
  • about / Designing the UI with Sketch
  • used, for designing UI / Designing the UI with Sketch
  • elements / Designing the UI with Sketch
  • toolbar / The toolbar
  • artboards / Artboards
  • pages / Pages
  • UI components templates / UI components templates
  • colors / Colors
  • typography / Typography
  • icons / Icons and symbols
  • symbols / Icons and symbols
  • exportation / Exportation
  • preview, of UI design / Preview of the UI design
  • plugins / Sketch plugins
• space
  • about / Space
  • negative space / Space
  • positive space / Space
• stenciling tool / Stenciling and paper cutouts
• Stylus
  • about / Stylus
  • URL / Stylus
• subtractive colors / Color systems
• symmetrical balance / Balance
• Sympli
  • about / Handing over design using Sympli
  • used, for handing over design / Handing over design using Sympli

T

• test stage, UX research
  • about / The test stage
  • qualitative usability testing / Qualitative usability testing
  • benchmark testing / Benchmark testing
  • accessibility evaluation / Accessibility evaluation
• textures
  • about / Textures
  • using / Textures
• Transtheoretical Model / Models of behavior change
• typeface
  • about / Using the appropriate font/typography
  • fonts / Using the appropriate font/typography
• types, wireframes
  • low-fidelity wireframes / Low-fidelity wireframes
  • medium-fidelity wireframes / Medium-fidelity wireframes
  • high-fidelity wireframes / High-fidelity wireframes
• typography
  • about / Using the appropriate font/typography
  • using / Using the appropriate font/typography
  • considerations / Using the appropriate font/typography

U

• UI design
  • about / User interface design
  • examples / User interface design
  • handing-off, Zeplin used / Handing-off UI design using Zeplin
  • handing over, Sympli used / Handing over design using Sympli
• UI Design handover
  • about / UI Design handover
  • frontend team communication, on early stages / Communicating with the frontend team on the early stages of design
  • design expectation, explaining to developer / Explaining to the developer how you expect the design to work
  • mock-up/user interface designs, sharing / Sharing the mock-up/user interface designs
  • prototype, sharing / Sharing the prototype
  • design specification, sharing / Sharing the design specification, assets, and the design system
  • design assets, sharing / Sharing the design specification, assets, and the design system
  • status checklist, creating / Status checklist
• UI design tools
  • about / UI design tools
  • Sketch tool / UI design tools
• UIkit
  • URL / CSS frameworks
• UIStencils product
  • URL / Stenciling and paper cutouts
• UI testing / User accessibility testing (UI testing)
• user's motivation
  • about / Understanding the user's motivation
  • extrinsic motivation / Understanding the user's motivation
  • intrinsic motivation / Understanding the user's motivation
• user-centered design / Who is a UX designer?
• user behavior
  • basics / User behavior basics
• User Experience (UX)
  • design / What is UX design?
  • versus UI Design / UX Design versus UI Design 
  • importance / Why is UX so important?
  • designer / Who is a UX designer?
  • design process / UX design process, UX design process
  • psychology / Things you should know about psychology in UX
  • user personas / What are user personas?
• User Experience (UX) design process
  • discovery / Discovery and planning
  • planning / Discovery and planning
  • planning phase / The planning phase
  • project proposals / Project proposals
  • project objectives and methodologies / Project objectives and methodologies
• user feedback
  • collecting / Collecting the correct user feedback
  • customer feedback surveys / Customer feedback surveys
  • emails / Emails and contact forms
  • contact forms / Emails and contact forms
  • through social media / Feedback through social media
• user interface design / User interface design
• user interviews
  • conducting / How to conduct user interviews
• user personas
  • about / What are user personas?
  • considerations / What are user personas?
  • visualizing / What are user personas?
  • creating / Creating a persona
  • examples / Creating a persona
  • perspectives / Four different perspectives on personas
  • benefits / Benefits of personas
• user research
  • about / User research, User Research
  • objectives, setting / Setting objectives and a brief
  • brief, setting up / Setting objectives and a brief
  • target audience, defining / Defining the audience
  • research method, selecting / Selecting our research method
  • research, designing / Designing and validating your research
  • research, validating / Designing and validating your research
  • interview, organizing / Organizing interview
  • research, conducting / Conducting the research
  • results, analyzing / Analyzing and validating the results
  • results, validating / Analyzing and validating the results
  • problems, defining / Defining the problems
  • versus, market research / Market research is not user research
  • benefits / The benefits of user research
  • customer information, grouping / Grouping customer information
• user UI sessions
  • tracking / Tracking and recording user UI sessions
  • recording / Tracking and recording user UI sessions
• UX analysis
  • about / UX analysis
  • user analysis / User analysis
• UX design
  • with big data / UX Design with big data
• UXPin / UXPin
• UX research
  • about / UX research
  • importance / UX research
  • quantitative research / UX research
  • qualitative research / UX research
  • discover stage / The discover stage
  • explore stage / The explore stage
  • test stage / The test stage
  • listening stage / The listening stage
• UX strategy
  • about / The UX strategy
  • client's business / Understanding the client's business
  • competitors / Understanding our competitors
  • customers / Understanding our customers
  • framework / Discovering your own UX strategy framework
  • business strategy / Discovering your own UX strategy framework
  • value-innovation / Discovering your own UX strategy framework
  • validated user research / Discovering your own UX strategy framework
  • Killer UX design / Discovering your own UX strategy framework

V

• visual design
  • principles / Introducing visual design principles and processes, Design principles
  • processes / Introducing visual design principles and processes
  • basics / Basics of visual design
  • basic elements / Basics of visual design
• visual design tools / Visual design tools

W

• Wireframe.cc
  • URL / Wireframing tools
  • about / Wireframe.cc
• wireframes
  • about / What is a wireframe?
  • features / What is a wireframe?
  • using / What is a wireframe?
  • creating / How to create wireframes?
  • structure / How to create wireframes?
  • content / How to create wireframes?
  • informational hierarchy / How to create wireframes?
  • functionality / How to create wireframes?
  • behavior / How to create wireframes?
  • early-stage product design / How to create wireframes?
  • types / Types of wireframes
  • sketching / Sketch wireframes
  • creating, with graphic design software / Creating wireframes using graphic design software
• wireframing software
  • Balsamiq mockups / Balsamiq mockups
  • Wireframe.cc / Wireframe.cc
  • Moqups / Moqups
  • InVision / InVision
  • UXPin / UXPin
  • Axure / Axure
  • references / Other wireframing tools
• wireframing tools
  • about / Wireframing tools
  • wireframes, sketching / Sketch wireframes
  • stenciling / Stenciling and paper cutouts
  • paper cutouts / Stenciling and paper cutouts
  • wireframing software / Wireframing software

Z

• Zeplin
  • about / Handing-off UI design using Zeplin
  • used, for handing-off UI design / Handing-off UI design using Zeplin