Visual Design, Product Design, User Interface Design, User Experience Design, Interactive Design, Technology.
A working list of resources for creative digital technologists to use with Google’s UI toolkit Flutter.
- Flutter: Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
- Dart: Dart paints your UI... and more!
- DevTools: DevTools is a suite of performance and debugging tools for Dart and Flutter.
- Flutter Inspector: The inspector helps you visualize and explore Flutter widget trees, visualize and troubleshoot layout issues.
- Flutter Gallery: A curated list of Flutter samples and apps
- Flutter Showcase: Professional Flutter apps in the wild
- Flutter Cookbook: Standard Cookbook
- Flutter Tutorials: How to use the Flutter framework to build mobile applications for iOS and Android.
- How to craft a kickass filtering UX: Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. How do we make sure they are helpful rather than confusing?
- Front End Concerns When Implementing Faceted Search – Part 1 : “A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.” Douglas Adams
- Front End Concerns When Implementing Faceted Search – Part 2: The Search Box raises significant design challenges for application developers. The designer of a faceted search system must make a number of choices about how the search box behaves.
- How to Design ‘Applied Filters’ (42% Get It Wrong): During our usability study on and benchmark of Product Lists & Filtering it became evident that if a site only utilize one of these patterns, users had a subpar filtering experience when compared to those sites that utilized both design patterns in combination.
- 7 Filtering Implementations That Make Macy’s Best-in-Class: As part of this team, we had to deal with datasets and non-universal nomenclature. How to classify, sort, assign millions of variations based on vendor data and work within 15 different databases, various cms systems, legacy systems, and infrastructure based on no controls from vendors. It took multiple years and teams to ramp up our search strategy and implement it within a distributed global team, adopting and adapting new systems to support Faceted Navigation. A favorite example is classifying color - I use the color "Lenny" as the internal sample, because 99.99% of all humans on this planet likely won't know how to classify "lenny" because it gives no clue that it's a duotone of an acidic green and a navy blue. Every year, manufactures create creative marketing names for color but how can a user search to find what they truly need as easily as possible?
- Filtering UI: A Horizontal Toolbar Can Outperform the Traditional Sidebar: A new filtering and sorting interface has become increasingly popular: a horizontal toolbar which combine both filters and the sort tool.
- How To Improve Advanced Search UX: Advanced search is a way to find something from a large list of items by specifying a criteria including multiple parameters.
- Defining Helpful Filter Categories and Values for Better UX: For a useful faceted search, develop filter categories and filter values that are appropriate, predictable, free of jargon, and prioritized.
- Table Filter: The user needs to categorically filter the data displayed in tables by the columns.
- Sort By Column: The user needs to be able to sort the data in a table according to the values of a column.
- Filtering best practices: How do we make sure they are helpful rather than confusing?
- Best Practices for Search: There are a number of things to think about when designing the UI behind search and results; there are a few general tips that work for multiple different types of apps and websites.
- Best Practices to design advanced search:
- Building a filter bar — improving the user experience of filtering and searching: Improve the user experience of filtering, searching and navigating data sets, making it easier for users to find what they‘re looking for.
- Search Box Design: Search is like a conversation between the user and app or website: the user expresses their information need as a query, and the app or website expresses its response as a set of results.
- Search: Visible and Simple: Search is the user's lifeline for mastering complex websites. The best designs offer a simple search box on the homepage and play down advanced search and scoping.
- 5 things to be mindful of when you design filters: Search filter design considerations
- Myth: Search will solve a website’s navigation problems: People are better at recognizing things than recalling them from memory. It’s much easier and faster to click on a link than to enter a search term.
- How To Improve Advanced Search UX: Advanced search is a way to find something from a large list of items by specifying a criteria including multiple parameters.
- Designing for Faceted Search: Faceted search, or guided navigation, has become the de facto standard and has become so ubiquitous that users are not only getting used to it, they are coming to expect it.
- Producing Great Search Results: Harder than It Looks, Part 1 : There is no way, as far as we know, that you can produce a great search results page without spending the time and effort to build it.
- Profiling Flutter Applications Using the Timeline: The Timeline allows you to find and address specific performance issues in your application.
- Visualizing Performance with Flame Graphs: This talk describes the background for this work, and the challenges encountered when profiling stack traces and resolving symbols for different languages, including for just-in-time compiler runtimes. Instructions are included generating mixed-mode flame graphs on Linux, and examples from use at Netflix with Java. Advanced flame graph types ise described, including differential, off-CPU, chain graphs, memory, and TCP events.
- Data Visualization Principles: Lessons from Tufte:How Data Visualization impacts from an SEO lens
- Flame Graphs and Flame Charts: Flame graphs are a clever, information-dense way to present computer performance.
- The Flame Graph: This visualization of software execution is a new necessity for performance profiling and debugging.
- Flame Charts compliment the existing JavaScript CPU Profile's Tree and Heavy views : Visualising JavaScript Processing Over Time With DevTools Flame Charts
- Using Heat Maps: UX overview of heat map use
- Simple Heat Maps for Smarter UI Design: Click tracking heatmaps are an incredibly useful tool when it comes to collecting data about users.
- Heatmap Timeline for Visualization of Time Series Data: The approach for conveying time-series data may be a “heatmap timeline”. Rather than use a spatial dimension indicate a datum value for each timestamp, the heatmap timeline may employ hue, saturation, or value of color, and/or pattern and/or shading, perhaps shown within a geometric shape, to indicate the datum value along a timeline. Data values may be aggregated into one value indication.
- Performance Analysis Reference: Google Developers Performance Analysis Reference
- CPU Bottleneck vs. Memory Bottleneck: This article references commands, behaviors, and outputs generated by Linux-based operating systems.
- Visualizing Performance with Flame Graphs: CPU Flame Graphs
- Video: Visualizing Performance with Flame Graphs: This talk describes the background for this work, and the challenges encountered when profiling stack traces and resolving symbols for different languages, including for just-in-time compiler runtimes.
- Finding JavaScript memory leaks with Chrome: workflow to find memory leaks is the three snapshot technique
- Easing JavaScript Memory Profiling In Chrome DevTools: The DevTools Heap Profiler and Timeline Memory view can be used to diagnose memory leaks on both desktop and mobile (via remote debugging).
- Analyze CPU and Memory while Debugging: Would you like to learn how to make your code run faster, use less memory, or just find out whether your code has a CPU or memory issue?
- Diagnosing Event Handler Leaks with the Memory Usage Tool: Memory Usage Tool in Visual Studio
- Flutter 'Compute' memory leak - How do I retire heap variables used by compute instance?: Stack Overflow: Flutter 'Compute' memory leak - How do I retire heap variables used by compute instance?
- Synergy Between Navigation and Search: Navigation serves important functions: it shows people what they can find on the site, and teaches them about the structure of the search space. Using the navigation categories is often faster and easier for users than generating a good search query.
- Mini Map: Game UI Patterns: A small section of the screen is dedicated to displaying the player’s current location on a map
- Navigation Tabs: Content needs to be separated into sections and accessed using a flat navigation structure that gives a clear indication of current location.
- Module Tabs: Content needs to be separated into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected.
- Accordion: Navigate amongst a website's main sections while still being able to quickly browse to the subsection of another.
- Design Patterns for Fluid Navigation – How to Use Inline Linking: Inline links are employed so that the information linked from the highlighted words does not clutter the user's current web page.
- Converting Search into Navigation: Redirect users' efforts into more supportive user interfaces when possible for complicated search queries.
- Effects of Centered Logos on Navigation Success: User Study in 2016 shows users having issue clicking on a centered logo for navigation. Is this really an issue in 2020? Result: make logos left aligned.
- Filters vs. Facets: Definitions: Both tools help users narrow large sets of content, but faceted navigation — while more flexible and powerful — is more difficult to create and maintain.
- Search vs. Filter Preconceptions: Archived discussion: Labeling of certain buttons as either “Search” or “Filter” buttons to get only specific rows of information from already-displayed data tables on page.
- UX / UI Best Practices for Designing Map Apps:
- Maps — UX Case Study:
- UX Case Study: Google Maps vs. Waze Mobile Apps: Each is boasting a nearly five-star rating in the App Store, Google Maps ranks #1, while Waze holds the #2 spot in navigation.
- Inline Editing and Validation in Tables: Providing an easy to use experience for a data table is a challenging task when you are dealing with large data.
- An Understanding of Perception and Cognition, Part I: What researchers have discovered about human perception and cognition over the past thirty years. This article focuses on visual perception.
- An Understanding of Perception and Cognition, Part II: What researchers have discovered about human perception and cognition over the past thirty years. This article focuses on cognition and cognitive / perceptual speed.
- Checkbox vs Toggle Switch: 7 Use-Cases of Forms Design: Similar Functions but for Different Contexts.
- Isochrone map design inspiration: An isochrone is a shape that connects points relating to the same time.
- Visibility of System Status in UI: 4 Ways To Communicate the Visibility of System Status in UI
- Google Material Design: A close look at the design, components & resources for Google's brand.
- iOS Human Interface Guidelines: Offers everything you need to design beautiful, engaging iOS apps.
- Laws of UX: A collection of the maxims and principles that designers can consider when building user interfaces.
- Ultimate Guide: The ultimate guide to mobile app design principles that make your app shine.
- GoodUI: 5 Ways You Can Get A Better UI.
A styleguide is a set of standards, principles and rules every developer or designer should follow in order to improve the digital presence of the product.
- Documenting future features: Google developer documentation style guide
- A11Y Style Guide: A living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
- One-Stop Place for A UI Design Team:A style guide is a document gathering all elements of your brand’s visual style.
- The Complexity of Color: Picking and mixing color can be a tricky game.
- Designing a reliant style guide: How To Create a Style Guide From Scratch.
- Gather Content: A complete process for developing a content style guide
- Style Guide Examples: 21 Brand Style Guide Examples for Visual Inspiration
- A List Apart: A List Apart: House style
- A List Apart: API Documentation:The Ten Essentials for Good API Documentation
- Write the Docs Style Guidance: Write the Docs is a global community of people who care about documentation.
Corporate Style guides
- Apple Human Interface Guidelines: In-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.
- Firefox Brand + Design Assets: The Firefox UX and Brand teams are currently working on consolidating a number of disparate design assets...
- IBM: IBM's Design Language
- Uber: Uber's Branding
- NASA: National Aeronautics and Space Administration Graphics Standards Manual Designed in 1975
While NASA is the source of the Manual, the publication and distribution of the NASA Graphics Standards Manual is not sponsored or endorsed by NASA and is an independent project undertaken in an effort to preserve and disseminate an archival record of graphic design from the era.
- Identity Style Guide: Channel 4 Identity Style Guide
- Barbican Studio: These guidelines have been created by the Barbican Studio.
- I Love New York: I Love New York Brand Guidelines
- Macmillan’s Brand Book: Macmillan’s Brand Book's goal is to be a source of energy, optimism, knowledge and support for people affected by cancer.
- Urban Outfitters Brand Book: A comprehensive brand book illustrating the DNA guidelines of Urban Outfitters.
- Brand Illustration Systems: Drawing A Strong Visual Identity: Brand illustrations are an adaptable and effective way to build a company’s visual brand.
- LOW-FIDELITY VS. HIGH-FIDELITY: Why high-fidelity is needed and more efficient
- The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each: What is “prototype fidelity” and what is the difference between a low-fidelity prototype and a high-fidelity prototype?
- The Role of Branding in UI Design:Branding elements in UI design.
- Visual Hierarchy: Effective UI Content Organization:UI content organization: size, contrast, proximity, negative space and more to structure UI elements effectively.
- Principle of Similarity:Similarity principle of effective content grouping in UI.
- Principle of Proximity:Considering cognitive abilities and mechanisms in creating a user-friendly product.
- Dropbox’s 2014 Carousel Design Deconstructed: MVP of the 2014 Carousel UX process
- 10 Application-Design Mistakes:Application usability is enhanced when the UI guides and supports users through the workflow. Designing complex applications is a challenging undertaking. Building applications that have both the depth to support complicated tasks and the intuitiveness to make it clear how to get that work done is a tremendous challenge...
- UX for Photo Upload: A multi-drop zone
- Information Architecture: Effective Techniques For Designers: Effective techniques for IA boosting usability
- User Journey Mapping Examples: How UX Pros Do It: There’s some vagueness and obscurity around how to actually create user journey maps.
- User Journey Mapping to Improve UX: A user journey map is for telling a visual story of how a user interacts with your product.
- Guide to the Kano Model: Tool to prioritize product roadmap with the right features.
- The Role Of Storyboarding In UX Design: Focus on storyboards as a means to explore solutions to UX issues, as well as to communicate these issues and solutions to others.
- Storyboarding in the Software Design Process: Smoothing the Transition from Analog/Physical to Digital
- Using Story Principles To Anticipate What Your User Expects: We can define a story as the process of solving a problem.
- What is a CJM?: A Customer Journey map is a visual or graphic interpretation of the overall story from an individual’s perspective of their relationship with a product.
- A Customer Journey Map of First Time User Experience: A customer journey map is a graphic or narrative representation of the customer’s relationship with a company, product or service.
- How Journey Maps Can Help Build Better Products: Ways journey maps can add invaluable new insights to any product manager’s understanding of their customers, product, and organization.
- Material Design Onboarding: Virtual unboxing experience that helps users get started with an app
- How Dribbble onboards new users: How well has a design community site designed its own UX flows?
- How Behance onboards new users: Adobe’s attempt to maintain an online platform to showcase and discover creative work across all of their products.
- Discoverability and Learnability: The ease at which users can find new features or functions with an app and learn to use the things that they find.
- WebAIM:WCAG Contrast and Color Requirements
- The use of color in maps: Color as a visual variable.
- Gradients.io: Curated gradients.
- UI Gradients: Color gradients.
- Brandcolors: Brand colors.
- Color Safe: Suggestions that will work with a set color. Does not necessarily suggest compliant colors, so still check with WebAIM.
- Adobe Color CC: Create color schemes or browse thousands of color combinations: Kuler community tool.
- Paletton:Tool for creating color combinations.
- Coolors: Generate color palettes.
- Lol Colors: Curated color palette inspiration.
- Colorzilla: Eyedropper, color picker, gradient generator.
- Google Web Fonts: Intuitive and robust directory of open source web fonts.
- Fontpair: Google Font combinations.
- Type Anything: Create great font combinations.
- Type Scale: Preview and choose the right type scale for your project.
- WhatTheFont: Seen a font in an image and want to know what it is? WhatTheFont will find the closest match.
- Typewolf: Comprehensive web typography info, suggestions for font alternatives, and links to usage in the wild.
- Typ.io: Typography inspiration.
- Material Icons: Free to use Material Design icons from Google.
- Flat Icon: Thousands of free flat icons.
- Font Awesome: The iconic font and CSS toolkit.
- Icon Finder: 1 million free and premium icons.
- The Noun Project: Icons for Everything.
- Favicon Generator: Favicon & app icon generator.
- Pexels: Free stock photos
- Unsplash.it: Placeholders using a beautiful image gallery.
- Pixabay: High quality photos and illustrations free for commercial use.
- Placehold.it: A quick and simple image placeholder service.
- User Interface Design patterns: Design patterns are standard reference points for the experienced user interface designer.
- 10 Great Sites for UI Design Patterns: May 2020 list of some of the best places to find design patterns on the web.
- What Goes Into a Design Pattern?: Design patterns can be used for so many different applications that there’s no standard for developing a design pattern. In general, the best design patterns act as guides to implementation in any circumstance that the concept may be needed in.
- Google Design: Youtube channel featuring videos for designers about Google design.
- Hunkering: Putting Disorientation into the Design Process : When we started studying how great digital designers worked, we recognized the same sort of hunkering processes, albeit in digital form.
- UX Myths: UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true.
- Smashing Magazine: For professional web designers & developers.
- Medium: A community of readers and writers offering unique perspectives on ideas large and small.
- Creative Bloq: Art & design inspiration.
- Web Designer News: Curated stories for designers.
- The Next Web: International technology news, business & culture.
- Designer News: Where the design community meets.
- Reddit Web Design: A place for designers to contribute useful posts, ask questions or engage in discussion.
- Morning Reader: Breaking tech news.
- Awwwards: Web Design trends.
- One Page Love: Design gallery showcasing Single Page websites.
- UI Movement: UI design inspiration, every day.
- Sitepoint: A hub for web developers & designers to share their passion for building incredible internet things
- Usability for Developers: What is Usability and Why is it Important to Application Development?
- Free Design Tools: Design Tools - Generators, Graphic Templates, Prototyping
- Adobe XD Guide: A 12,000-words-long comprehensive guide for XD beginners and current users.
- Treehouse: Brings affordable, technology education to people everywhere.
- Tuts Plus Web Design Tutorials: Free web design and development tutorials.
- Springboard: Personalized approach, designed to help you achieve your goals and advance your career.
- Learn Sketch: Short videos and compiled invaluable resources to help you get started!
- Gallery: Gallery is a collaborative tool for uploading design work, getting feedback, and tracking revisions
- XD to Flutter: XD to Flutter is an open source plugin that automatically generates Dart code based on designs in Adobe XD for creating Flutter apps.
- Adobe XD: Prototyping & wireframing Tool.
- Framer X: Interaction Design and UX design software.
- Figma: The collaborative interface design tool.
- inVision Studio: Rapid prototyping, animation, built-in design systems, and collaboration.
- Sketch: A lightweight program for digital design for Mac.
- Canva: Amazingly simple graphic design software.
- Markup: Annotate designs with measurements, colors, text styles, and more
- Gallery: Gallery is a collaborative tool for uploading design work, getting feedback, and tracking revisions.
- Adobe XD: Prototyping & wireframing Tool.
- inVision: Prototyping, collaboration & workflow platform.
- Proto.io:App to create fully-interactive high-fidelity prototypes that look and work realistically.
- Zeplin: Collaboration tool between designers and developers.
- Avocode: A workspace open to all designers and developers.
- Justinmind: Prototype faster, communicate better, for web and mobile apps.
- Marvel App: Free mobile & web prototyping for designers.
- Atomic.io: Free in Browser interactive design Tool.
- Flinto: App to create interactive and animated prototypes of designs.
- Flow:Google's Flow for Prototyping
- 9 Free to Use Wireframing Tools: Most of the tools in this list have premium options that let you extend the functionality in some way or another but all of the free options let you get to experience the way that they work.
- Mural: Visual collaboration and testing tools
- Web design playground: A step by step guide from writing your first line of HTML to creating interesting, attractive web pages.
- Don't make me think
- The design of everyday things
- 100 things every designer needs to know about people
- Markup: Annotate designs with measurements, colors, text styles, and more
- Pomodoro: A time management technique.
- Toggl: Time tracker to improve workplace productivity.
- Trello: Organize and prioritize your projects.
- RescueTime: Helps you understand your daily habits so you can focus and be more productive.
- Qbserve: Automatic time tracking, invoicing, and real-time productivity feedback.
- Paste: A smart clipboard history manager for Mac.
- Timing: Automatic time and productivity tracking for Mac.
- Taskade: Collaborative task lists and outlines for teams.
