“The life of a designer is a life of fight: fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is to cure it somehow, with design.”
Smashing Magazine is an amazing place for online quality content for the design community. Articles range a broad spectrum: from design to user experience and code, as well as resource downloads and more.
A great resource & newsletter for all things UI — from tools to in-depth articles.
A collection of articles specifically focused on design & UX on Medium, the best online publishing platform on the web.
A great article that addresses the 'gaps' often found in designer's portfolios and how to fix them.
Speckyboy publishes fresh and useful resources covering web design and development, graphic design, advertising, and mobile development.
A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Top-notch content here from highly-respected folks in the field.
An excellent resource for designers regarding all things design, specifically those working on the web.
A top-notch collection of in-depth research findings based on user observation.
A great newsletter featuring a hand-picked list of the best user experience design links every week.
The UX Booth is a publication by and for the user experience community that shares stories by and for professionals.
Sidebar is a newsletter list of the 5 best design links of the day. But unlike a regular linkblog, it's collaborative and manually curated by a couple great editors.
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.
Creative Bloq delivers a daily balance of creative tips and inspiration across web design, graphic design, 3D and more. Its affiliated with Net magazine.
UX Magazine is a community resource that works closely with practitioners and industry leaders versed in all areas of UX exploring facets of experience design.
“When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back, even though it faces the wall and nobody will see it. You’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”
A showcase of "the finest web and interactive design". Daily-updates and great category filtering makes this site a invaluable resource.
A daily-updated website that serves as a resource for web designers looking to build smart, one-page websites.
An amazing collaborative community for designers to share work and get feedback. Awesome source of inspiration as well.
A collection of patterns and modules for responsive designs, curated by the one and only Brad Frost & Dave Olsen. A great reference when building responsive web systems.
Little Big Details is a curated collection of the finer details of design, updated every day. Sweating the details pays off.
An excellent collection of common design patterns on Codepen, curated by the one and only Chris Coyier.
Crafted by Love is a showcase of beautiful web design, curated by Hanson Wu.
Ways We Work is an interview series about how real people stay inspired, get things done and the tools, methods, and process they use.
A creative showcase of a Google font pairing.
A show about the people who design our favorite products.
The awards that recognize the talent and effort of the best web designers, developers and agencies in the world.
Robust platform for showcasing & discovering all kinds of creative work, including excellent galleries dedicated to web and app design.
An online resource documenting the evolution of graphic design and the designers behind it. A great reference for the design purists.
Typewolf helps designers choose the perfect font by showing them fonts in use on actual websites, as well as background info about the font and personal recommendations for similar fonts.
Pttrns is a curated library of iPhone and iPad user interface patterns. All patterns has been carefully chosen before they were added to maintain excellent content quality.
A growing library of transitional interface and interaction design patterns to help you inspire and communicate your UI ideas with people.
A curated showcase of the best design portfolios on the web.
An excellent collection of demos that feature common as well as experimental design patterns.
FWA stands for Favourite Website Awards, an industry recognised internet award program and inspirational portal, established in May 2000.
Website gallery focused on responsive web design. Displays various viewport sizes for each site by default.
The Great Discontent is an online (and now print) magazine featuring interviews on beginnings, creativity, and risk.
CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing. A great place for UI references and daily doses of code experiments.
A useful resource for userflow reference and inspiration from a large variety of popular iOS apps. UX Archive allows for searching by task or app.
A short and insightful article by Danielle Reid on why we should think of content and information as a fluid, living system, which is moving with us during our everyday lives.
CSSDA is an international web awards platform that honors and showcases the world's best examples of holistic web design from the world's best web designers.
CSS Awards is an inspiration gallery which consistently showcases well-crafted websites from around the world.
A curated showcase of shit-hot web design with a less-is-more bent.
“Sometimes we can be so focused on getting the site ready and live, that we lose sight of what happens after it’s launched, and how it’s going to be maintained. A simple web style guide can make all the difference.”
Styleguides are essential to establishing and maintaining consistency within a design system. Particularly useful for teams.
By designing a system rather than individual pages you are able to think how something works in relation to the whole site.
Once you've created a styleguide it is crucial to keep it maintained.
The Salesforce styleguide is particularly impressive and features extensive, interactive documentation.
The Mapbox styleguide is an internal guide & code repository for designing and coding at Mapbox. Includes a detailed grid sysytem, a robust icon system, and much more.
The Lonely Planet styleguide is a top-notch example of what a styleguide should be: thorough, utilitarian, easy to navigate and downright obssesed with every detail.
An overview on the making of Lonely Planet style guide, which focuses on reducing complexity and increasing reusability.
An oldie-but-goodie by Anna Debenham on benefits of front-end style guides, as well as some great examples.
An extensive collection of brand guidelines that reference a set of values, attributes, and artwork that reflects the spirit of Uber.
An awesome design system created by Salesforce for Visualforce pages and Lightning apps and components.
The Mozilla styleguide provides tools and resources to bring together all it's brands and to help define their visual and stylistic elements.
A beautifully designed styleguide from FontShop. Sections are categorized by globals, objects and modules. A personal favorite.
A simple yet comprehensive style guide by Starbucks which documents simple styling in additional to various layout conventions.
A walkthrough by Ara Abcarians on the process and advantages of building a design system for your web projects.
An amazing 'living language' guide by IBM which consist of a visual framework, resources and inspiration for making delightful products and enlightening experiences.
An excellent example of a content style guide, organized by topic based on the types of content that they publish.
Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites.
The Code for America styleguide is intended to help anyone involved with communications for Code for America and its affiliate programs. Well documented and thorough.
The MailChimp Pattern Library is a byproduct of Mailchimp's move to a responsive, nimble, and intuitive app. Simple and efficient.
The Yelp styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI patterns
Susan Robertson goes into detail on A List Apart regarding what a style guide is, why you should adopt one, and steps to building and maintaining it.
An excellent small batch series of interviews on Style Guides, hosted by Anna Debenham and Brad Frost.
A robust collection of principles, guidelines and assets for designing and building awesome Atlassian experiences.
“Building for the web has become a journey with infinite potential for forks and bumps in the road.”
A game-changing article by Luke Wroblewski on the advantages of building mobile first.
Insightful article by Trent Walton on the reflow of content on a responsive website.
A collection of tools to help you create atomic design systems, a methodology in which design is contructed as a system of components that work together to form a whole. Perfectly suited for our complex device landscape.
A delightful article by Julie Zhuo regarding the benefits of a good set of principles when defining a design system.
An overview by Jeremy Keith on the concept of Content-First, or letting a site's content dictate things like breakpoints, layout, etc.
Trent Walton explains why organized process charts and workflows are behind us, and that we should make sure that our process and organization ready us for what lies ahead.
An invaluable list of things to avoid when presenting work to clients by Mike Monteiro.
A list of things to remember about client relations (aka human relations but dressed in business attire).
A great overview by Trent Walton on getting started when building responsive sites.
An overview of Agile Methodology: a alternative to tranditional project management with focus on iteration.
A great article by Brad Frost regarding the changing definitiion of what ‘mobile first’ means.
A great product manager knows how to say no to ideas that don’t serve their product, their vision, or their customers. This guide covers when to say no to common reasons for building a feature.
“We’re not designing pages, we’re designing systems of components.”
Thoughts on client deliverables in the age of responsive web design.
An insightful workflow deep-dive by Rian van der Merwe on introducting a responsive web design workflow in an agency setting.
Mark Boulton details Collaborative Moodboarding: a way for teams and stakeholders to come together to try and solve problems.
A collection of sketchsheets specifically for responsive websites by Zurb.
A helpful list of suggestions for visual designers working within a team setting where visual comps and exploration will be shared with a developer.
A comprehensive handbook on digital design covering much of our collective knowledge and process.
An article regarding the rise of modern minimalism in UI design and why it's a good thing.
An overview of front-end principles for designers who want to make better designs without learning to code.
A guide to discernible web design in Photoshop and an essential reference to any designer.
A nice overview by Dan Mall on creating and using SVG in a design workflow.
A collection of notes by Mark Boulton from the 2012 Responsive Summit.
A frequently-cited slideshow by Stephan Hay on responsive workflow in which we argues that we should design from the content out.
Webinar in which Dan Mall shows how to establish art direction using a faster, more modular a approach, as well as how lower-fidelity assets can lead to better conversations with clients.
An invaluable resource by Sabastien Gabriel on cross-DPI and cross-platform design. No complex math or un-parsable graphs, just straight forward explanations ordered in short sections.
A interactive checklist for evaluating work based on interaction, along with some great reference and tool recommends.
An awesome Photoshop-based workflow for creating pixel-perfect assets for different screen sizes and densities.
An informative overview on how to use Photoshop's linked smart object feature to create a better, more efficient visual rhythm.
A design deliverable technique which seeks to establish visual language between designers and stakeholders.
A step-by-step overview on a responsive design workflow by Viljami Salminen — includes links to great resources and tools.
A look at the advantages and disadvantages of Photoshop in the responsive age.
An abstract method by Dan Mall for getting to a design solution by creating a document to help them identify design solutions for the business goals.
A detailed overview of using vectors in digital design by Janos Koos. Includes great workspace notes when working with vectors in Illustrator and handling vector based icons in Photoshop.
A great article by the folks at Bjango about solving issues around trying to match colours in images to colours generated by HTML, CSS or code.
A thorough checklist covering UX steps and corresponding resources for each step.
What designers should know before starting a new project, and what they should pay attention to during the process.
A detailed insight into Marc Edward's (Bjango) iOS, Android and Mac app design workflow.
GuideGuide is a Photoshop extension that creates pixel accurate columns, rows, midpoints, and baseline guide sets.
An invaluable resource for all things iconography which allows for you to search, upload and download quality icons.
A color scheme tool by Adobe which allows members to upload, create, and edit color schemes of their choice. A photoshop extension is also available.
An excellent article on the practicality of the most modest but effective tool at our disposal.
An icon system designed for the modern web. Orginally a Kickstarter-backed idea, this project has grown into an awesome tool for both designers and developers working with SVG icons.
Ember is an awesomely efficient Mac tool for capturing, organizing, syncing and annotationing screenshots. Great for research.
A tool that collects specific copy examples from websites and applications, to serve as inspiration for writing professionals.
Photoshop extension that creates modular grids in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other.
A useful online reference to help you quickly find the screen specifications of the most popular devices and monitors currently on the market.
A useful placeholding text generator tool which allows for quick text generation on the fly.
A intuitive online tool for choosing color palettes.
Sketch is a Mac app centered around designing websites. Features include snap-to-pixel precision, resuable elements, streamlined exporting, and much more.
A great collection of plugins, scripts and extensions for Photoshop.
Foundry is a new way of utilizing scalable vector graphics, giving designers the opportunity to contribute and collaborate on families of spot vector illustrations and icons and make them available for download/purchase.
A specialized remote screen viewing application intended as a tool to help designers create graphics for mobile applications.
A browser bookmarklet tool useful for quickly testing any website’s responsiveness.
A Chrome browser extension that helps to quickly identify fonts on a page.
An invaluable collection of printable templates for getting ideas on paper.
Subtle Patterns is a high quality resource by Atle Mo for anyone in need of tilable textured patterns, free to use.
Size Calculator is a handy tool that allows you to calculate the perceived size of type based on viewing distance and physical size.
A great tool by Internet Archive that allows you to see previous verions of a website.
Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names.
“The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility and produce pages which, by being flexible, are accessible to all.”
Web fonts have been designed and hinted specifically for maximum legibilty on screens. Take advantage of them.
Grids help to establish consistency and rhythm in your design. Embrace it without overly relying on it.
Too long of a measure (the length of a single line of text) reduces legibility significantly. Keep line-length for body copy at 45-75 characters per line.
An online tool for experimenting and prototyping typography for the web.
Embracing the fluid & flexible aspect of responsive web design in regards to typography.
An online reference by Andy Taylor for properly formating and styling text.
A font store from Monotype which offers more than 150,000 desktop and Web font products for you to preview, purchase and download.
A simple online tool for crafting typogrpahic scale based on common ratios and Google Web fonts. Good for quick visual checks.
An open-source webfont project in which webfonts are not modified or subsetted in any way.
Font Pair is a great tool that helps designers pair Google Fonts together.
A Photoshop grid template which seeks to elimate unnecessary complexity by Elliot Jay Stocks.
A useful adaptation of Robert Bringhurst’s book 'The Elements of Typographic Style' as it applies to typography on the web.
FontSquirrel is a free web font library which allows for you browse and download fonts for both desktop and web use.
A quick overview on general best practices when formatting type including tips on scale, rhythm and legibility.
An online tool by Tim Brown of Adobe for constructing Modular Scale units — a essential resource for the obsessive designer in all of us.
A great CSS tool to establish a typographic system with modular scale and vertical rhythm.
A succinct overview of web typography by Donny Truong.
A look at various methods on how to establish sensible grids in Photoshop.
An open-source web font library by Google which seeks to publish quality typeface designs that are made specifically for the web.
A webfont solution by renowned type foundary Hoefler & Co., completely redesigned for the screen resolutions.
An excellent font service recently aquired by Adobe and is now integrated into Creative Cloud.
A handy tool that helps you find font combinations on the web relative to a webfont you choose.
A indispensable guide via Typewolf to using proper typographic characters, including correct grammatical usage.
Good typography uses smart quotes, not dumb quotes. This guide is an excellence reference regarding the difference and implementation.
“It’s not just what it looks like and feels like. Design is how it works.”
Objects should be accelerated swiftly and decelerated slowly to avoid abrupt changes in velocity.
Keep in mind that the mass of an object will determine how fast or slow it will accelerate and decelerate.
Use motion to guide the user’s attention and focus through an experience and not simply as an embellishment.
A detailed guide by Google on meaningful transitions and why transitions should be both beautiful and functions. Includes animation examples and best practice tips.
A guide to basic physics-based animations and interactions models and the kinds of interactions and animations that can be constructed from them.
The basic principles set forth by Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation.
A comprehensive guide to UI Animations by Mark Geyer which covers a wide spectrum of topics in-depth. Also includes resource recommendations and tips.
A guide to adding motion to our work to make it more meaningful and functional.
The animated collection of UX Archive, a useful resource for useflow reference and inspiration from a large variety of popular iOS apps.
An excellent overview on how animations can be used functionally to help provide context for our interfaces by leveraging the dimension of time.
Some lessons drawn from various interation & animation models.
A brief guide by Steven Fabre on using animation to improve usability while remaining invisible.
“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.”
Using familiar common UI patterns will keep the user comfortable using your interface.
Avoid unnecesary content: a website's function should be at the forefront.
It is crucial that your interface allows the user to focus on what is most important.
Your job as a designer is to eliminate ambiguity: your designs should be obvious and self-explanatory.
Ensure that touch targets are easy to select — 44x44px area is recommended.
Text on the web should be generally larger to ensure optimal legibility.
A look at common design concepts for enhancing the usability and appeal of your user interface.
Knowing your design principles is crucial. This Smashing Magazine article provides a nice overview.
A wealth of useful UI resources and tools, such as this responsive web design cheat sheet, useful sources for design patterns and wireframes guides and a ux patterns library.
Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.
A brief guide by Luke Wroblewski for some of the ways to make important actions in mobile applications more accessible to one-handed use on large smartphones.
A well-written article outlining how to become a UX leader.
Five principles on creating great wearable design by Fjord — complete with great illustration and suggestions.
UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true.
A collection of best practices for designing user interfaces by Android.
Learn about design principles and see how they can be applied from architecture to product design.
A detailed look at navigational patterns and the importance of knowing which navigation type best suits your content.
A blog devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business.
A quick overview by Luke Wroblewski on determining how big UI controls must be to capture fingertip actions without frustrating users with erroneous actions and tiny targets.
A fundamental set of guidelines by Diogenes Brito that he regards as touchstones of a successful interface.
UX thoughts to inspire you to do something differently in your design work.
The ten commandments of good design as defined by the great Dieter Rams.
An in-depth look at accordions, pontential issues, and easy design fixes to improve the usability of these UI elements.
A running ideas list of guidelines regarding good user interfaces.
A site full of thorough reports and articles regarding groundbreaking research in user experience. The content includes groundbreaking research, user interfaces evalutations, and real findings.
A great blog featuring regularly-posted articles discussing usability methods.
An excellent collection of tips by Luke Wroblewski on designing for mobile.
A quick, entertaining article by Magnetic Zero containing high-level lessons on interface design.
A non-artsy primer in digital aesthetics by Erik D. Kennedy.
A short and informative article by Luke Wroblewski on the use of menu controls when designing mobile interfaces.
In this practical book, Lara Callender Hogan helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical.
A playbook of 13 key “plays” drawn from successful practices from the private sector and government that, if followed together, will help build effective digital services.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Alternative text is read out by screen readers to blind users when using assistive technology and should describe the image's purpose. If the image is pure decoration, provide a null or empty alt attribute.
By making use of focus on your pages, you ensure that keyboard navigation is enabled.
This makes text inaccessible on the page and should be absolutely avoided.
Using proper HTML markup helps assistive technologies to interpret the content of your web pages more effectively.
Two pages on the same website should not share the same title tag.
Be mindful of components that can make your site content inaccessible, especially pop-ups.
Make sure color contrast is high in order to maximise readability for color blind users.
Making your website accessible to all users is crucial and should be considered throughout the design & development process.
Video players can be diffucult to locate and not all respond to keyboard control.
Steven Clark on a “cascade of inclusiveness”: the idea that we consider a multi-levelled approach to web accessibility that tries to identify and overcome ethical dilemmas where they appear.
A concise overview by Shaumik Daityari on how to check your website for accessibility and some tools available to aid in the process.
Takes a set color palette and shows contrast values for every possible combination. This is useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.
Wave (Web Accessibility Evaluation Tool) is an excellent evaluation tool for any accessibility-minded designer.
An extensive online course by Google that introduces tools and techniques for web developers to easily ensure that websites are more accessible to users who are blind or have low vision.
A good tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.
A simple tool by Lea Verou that checks text color against background color and provides a WCAG score.
A thorough collection of articles focused on web accessibility by WebAIM, a non-profit organization based at the Center for Persons with Disabilities at Utah State University.
Léonie Watson's detailed article on how to not only use SVG content, but how to make it more accessible.
Andrew Hoffman on why we should not treat accessibility as the icing on the cake, but rather as an essential part of the mix. Includes an awesome demo on practical application.
The Readability Test Tool provides a quick and easy way to test the readability of your work. It is the most flexible readability software for assessing readability formulas.
A short, informative guide to how accessibility enables people with disabilities to perceive, understand, navigate, interact with and contribute to the web.