Accessibility
Architecture
Checklists
Color
Galleries
- Color Hunt - “Color Hunt is an open collection of beautiful color palettes founded on August 2015 by Gal Shir.”
- Klart Colors - “Colors is a 100% data-driven collection of color palettes. After a year of curating beautiful designs over at Pixels I figured out that I could make something cool with the data and this is the result.”
- randoma11y - “An ongoing project to try and curate beautiful color palettes that are a11y friendly. This app generates a random palette and allows you to vote the combination up or down. We’ll store the info and keep our API open.”
- Wikipedia’s category for color shades
Creative Assets
CSS
Flexbox
Grid
- A Complete Guide to Grid - “CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.”
- Building Production-Ready CSS Grid Layouts Today by Morten Rand-Hendriksen
- CSS Grid by Mozilla - “CSS Grid simplifies existing layout patterns
and adds new possibilities for graphic design.”
- CSS Grid Changes EVERYTHING - Video. “CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.”
- The Difference Between Explicit and Implicit Grids - “Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items.”
- Grid by Example - “Everything you need to learn CSS Grid Layout”
Design Patterns
Design Thinking
HTML
Inspiration
JavaScript
Prototyping
- Adobe Experience Design - “Go from idea to prototype faster with Experience Design CC (Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps.”
- Atomic
- Cooper prototyping tools comparison
- Figma - “Design, prototype, and gather feedback all in one place with Figma.” Free, up to 3 projects. $12 / month for unlimited projects.
- Flow font
- Framer
- InVision
- Marvel
- Principle
- Sketch - “Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.”
- Sketch Plugin Directory - “A list of Sketch plugins hosted at GitHub, in alphabetical order.”
- Sketch Plugins - “Sketch’s functionality is extended thanks to our fantastic third-party developers who have created some of the plugins below for you to download.”
- Vectr - “Vectr is a free graphics software used to create vector graphics easily and intuitively. It’s a simple yet powerful web and desktop cross-platform tool to bring your designs into reality.”
Placeholder Content
- Lists - “Real content for all your designs.”
- lorempixel - “Placeholder Images for every case.”
- Random User Generator - “A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.”
- uiFaces
- Unsplash.it - “Beautiful placeholders using images from unsplash”
- VeggieIpsum - “The vegetarian lorem ipsum generator”
Sketch Kits
Sketch Plugins
- Craft by InVision - “Craft is a suite of plugins to let you design with real data in mind. Manage them via the new Craft Manager for incredibly easy updating.”
- Launchpad for Sketch - “Design responsive screens in Sketch and publish to HTML.” Previously known as Auto Layout by Animaa.
- Browsersync - “With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment.”
- Chrome device mode
- Chrome full-page screenshots
- Chrome network panel and emulation
- Codepen - “👋 CodePen is a social development environment. At it’s heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating tool for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.”
- Diffchecker
- Emmet Re:view
- ImageOptim - “ImageOptim makes images load faster. Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.”
- JSFiddle
- Recordit
- Regexr - “RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).”
- Skitch - “Get your point across with fewer words using annotation, shapes and sketches, so that your ideas become reality faster.”
- Snaggy
- typoscan - “typoscan is a designer tool which can help you to scan typography of your favorite website”
Usability
User Research
- Attest - “Send surveys to any audience and understand what they think in real-time”
- Criticue - “Your web projects. Peer reviewed. The more you contribute the more feedback you receive.”
- Dovetail - “Organize qualitative research data, analyze it collaboratively, and share insights with your team. Understand what your users need and build a better product with Dovetail.”
- Fullstory - “Search your customer experience like you search the web.”
- Lookback
- Silverback 3 - “Silverback 3 is the no-nonsense usability testing app for Mac. Get set up and start enjoying straightforward usability testing in seconds.” Free version available.
- UsabilityHub
- UserTest.io - “UserTest.io is the lowest priced user testing platform on the market, providing high-quality videos within 24hrs”
- UserTesting.com
Etcetera