| Autore |
Green Tom
|
| Edizione | [1st ed.] |
| Pubbl/distr/stampa |
Berkeley, CA : , : Apress L. P., , 2024
|
| Descrizione fisica |
1 online resource (585 pages)
|
| Disciplina |
620/.00420285
|
| Altri autori (Persone) |
BrandonKevin
|
| Collana |
Design Thinking Series
|
| Soggetto topico |
Computer-aided design
Computers - Design
Computer graphics
|
| ISBN |
9798868803246
|
| Formato |
Materiale a stampa  |
| Livello bibliografico |
Monografia |
| Lingua di pubblicazione |
eng
|
| Nota di contenuto |
Intro -- Table of Contents -- About the Authors -- About the Technical Reviewer -- Acknowledgments -- Introduction -- Chapter 1: Learning the Figma Interface -- Figma and the UX Process -- The Figma Dashboard -- Creating a Team in Figma -- Access the Figma Community -- Getting Help -- The Figma Workspace -- Adding Frames -- Changing Frame Properties -- Using the Properties Panel -- Using the Color Picker -- Gradients -- Strokes -- Using the Polygon Tool -- Using the Layers Panel -- Testing Your Work -- Community Resources and Templates -- Obtaining the iOS and Android UI Kits -- Sharing -- Dev Mode -- Conclusion -- Chapter 2: Adding Content to Figma Screens -- Vectors and Bitmaps -- Bitmaps and Figma -- Scaling Factors -- SVG Images and Figma -- Figma and Video -- Preparing Video for Figma -- Typography and Figma -- Text Properties -- Font Pairing -- Adding and Formatting Text in Figma -- Your Turn -- Adding a Grid -- Adding the Header -- Create the Hero Image -- Creating the Explore Section of the Site -- Adding Cards to the Design -- Adding a Text File in Figma -- Creating the Social Media Section -- Adding the Images -- Finishing the Web Page -- You Have Learned -- Chapter 3: Figma and the UX Process -- What Exactly Is a Prototype -- Determining the Platform -- Building a Team in Figma -- Creating a Team Project -- Sharing and Collaboration -- Figma and User Testing -- Usability Testing vs. User Testing -- Usability Testing Requires Context -- Iteration and the "Messy" UX Design Process -- Accessibility and Inclusion in Figma -- Adding Plug-ins in Figma -- Using the Accessibility Plug-ins -- Using the Adee Color Contrast Tool -- Explore Inclusion with Cards for Humanity -- You Have Learned -- Chapter 4: Creating UX Design Documentation -- Using the Figma Presentation Mode -- Brainstorming with FigJam -- How to Use FigJam AI.
Using the FigJam Drawing Tools -- Using the Connector Tool -- Adding Text to FigJam Objects -- Adding Comments to a FigJam File -- How to Add a FigJam File to Figma -- Creating Personas -- Create a Persona Using a Template -- Editing a Persona Template -- Creating a User Journey Map -- Adding Touchpoints -- Creating a User Flow Diagram -- Feedback and Iteration -- Your Turn: Create a User Flow Diagram in FigJam -- Build the Chart in Figma -- Add the Chart to Figma -- You Have Learned -- Chapter 5: Building Low-Fidelity Prototypes -- What Is a Low-Fidelity Wireframe? -- The Case for and Against Wireframing -- Creating Wireframes -- Wireframing and the UX Design Process -- What Is a Content Wireframe? -- From Content Wireframe to Lo-Fi Wireframe -- Creating a Low-Fidelity Wireframe in Figma -- Creating a Team Library -- A Quick Word About Shared Libraries -- Build the Wireframe Using a Shared Library -- Create Wireframes Using a Wireframing Kit -- Use the Wireframer Library -- The Interactive Wireframe -- Add Interactivity to a Wireframe -- Testing an Interactive Wireframe -- Your Turn: Wireframe a Login Sequence Using FigJam -- You Have Learned -- Chapter 6: Building Medium- Fidelity Prototypes -- Lean UX -- Agile -- Straight to Code -- What Is a Medium-Fidelity Prototype -- Choosing a Platform -- Graphics and Figma -- Installing and Using Imaging Plug-ins in Figma -- Color Correcting Images in Figma -- Manipulating Image Content in Figma -- Crop an Image in Figma -- Scale an Image in Figma -- Masking in Figma -- Fonts and Figma -- Color and Figma -- Create a Scrim Using a Gradient -- Adding Effects to Graphics -- Apply a Drop Shadow -- Apply an Inner Shadow to Create a 3D Effect -- Applying Blur Effects -- Applying a Blend Mode to a Layer -- Create a Mesh Gradient in Figma -- Using Auto Layout in Figma.
Your Turn: Create a Medium-Fidelity Mobile App Location Card -- Create the Top Search Bar -- Creating the Location Card -- You Have Learned -- Chapter 7: Interactivity Fundamentals -- The Basics of Adding Interactivity in Figma -- Create a Drag Interaction -- Create a Hover Interaction -- Create a While Pressing Interaction -- Create a Component in Figma -- Add States by Creating Variants -- Adding Interactivity to a Component -- Create Interactivity Using a Component -- Your Turn: Create Interactivity Using Components and Variants -- Create a Component for the Home Button and Create a Text Property -- Create the Variant States for the Main Navigation Button -- Design Each of the Three States for the Main Navigation Home Button -- Apply Interactions to Each of the Three Button States -- Add the Main Navigation Button to the Header of the Swiss - Home Page -- Creating the Main Navigation Buttons -- Adding the Header Navigation to the Adventures Page -- You Have Learned -- Chapter 8: Microinteractions in Figma -- Interactivity and Motion -- Playing with Time and Motion in Figma -- Microinteractions Overview -- The Principles of UX in Motion -- Easing and Smart Animate -- The Eases Available in Figma -- Editing an Ease -- Applying the Transformation Principle in Figma -- Create a Dissolve Transformation -- Create a Move Transition -- Create a Complex Interaction Using Smart Animate -- Create a Scrolling Behavior -- Create Scrolling Content -- Create a Scrolling Loop Animation -- Create a Scroll Control -- Applying the Obscuration Principle -- Using a Blur to Obscure the Image -- Your Turn -- Create an Overlay Side Menu Interaction -- Style the Overlay Side Menu Interaction -- Create a Card Template Area Using Auto Layout -- Create the Card Component Variants -- Apply an Accordion Microinteraction to the Card Component -- Add Content to the Card Instance.
Add a Second Card -- You Have Learned -- Chapter 9: Design System Fundamentals -- The Single Source of Truth -- Where Do You Start? -- Take Stock of What You Have -- The Pattern Inventory -- The Color Inventory -- The Typography Inventory -- The Asset Inventory -- Figma Design Tokens -- Creating a Component Token -- Figma Design Tokens and Variables -- Organize the Variables -- Applying Variables -- You Have Learned -- Chapter 10: Building Stuff -- Building an Image Carousel -- Create a Complex Carousel -- Create a Spinning Carousel -- Using the To Path Plug-in -- Rotating the Carousel -- Create Video Controls -- Create Interactive Video Controls -- Swap Component Icons -- Adding Interactivity to the Buttons -- Create a Progress Bar -- Create a Shopping Cart with Local Variables, Conditions, and Expressions -- Adding Variable Modes -- Linking Local Variables with Component Instances -- Using Expressions in the Prototype -- Creating an Expression -- Create a Conditional Expression -- Adding Variables to the Shopping Cart -- Calculating Multiples Using Variables -- Bonus Round: Create a Boolean Variable -- Animations Using LottieFiles -- Using Aninix to Create a Lottie Animation Using Figma -- Converting an Aninix Animation to a Lottie File -- Add Diversity with the Humaaans for Figma Plug-in -- You Have Learned -- Chapter 11: Developer Handoff -- Handoff Starts with User Testing -- Device Preview Using the Figma Mobile App -- Using the Figma Presentation Mode for Sign-Off -- What Is a Handoff? -- Preparing Assets for Handoff -- The X Factor of Raster Images -- Code Introspection -- The Design/Build Iteration Cycle -- You Have Learned -- Conclusion -- Index.
|
| Record Nr. | UNINA-9910869155203321 |
Info
A Guide to UX Design and Development [[electronic resource] ] : Developer’s Journey Through the UX Process / / by Tom Green, Joseph Labrecque
