Research is the first step in every UX project. Here are our top website picks for coming up with interesting insights, sharp conclusions and fresh ideas.
Reading the brief for your new project can be an enticing experience, pumping you up with newly found energy and promising ideas. At other times, the brief seems to drain all inspiration out of you, making even that sink full of dishes seem like a more enjoyable activity. Whichever the case, the first stage in UX design is some serious, in-depth research. There are, of course, the Muses – those major online goddesses of design inspiration that we all know and love. Behance, Dribbble and Muzli are some of the big names that are especially close to our UX hearts. But there are also smaller, more targeted resources, that can make for extra-productive research. We’ve compiled a list of seven websites that provide the best tools, galleries and tips for your upcoming UX design projects. Take a look – your wireframes (see wireframe examples), buttons and prototypes will not regret it.
1. Pttrns: Spot repeating design trends
When something recurs over and over again, it’s probably for good reason. And if you know what that reason is, you can start bending the rules in your favor. That’s what makes the self-proclaimed ‘mother of all design resources’, Pttrns, into such a useful tool. Edited by Robin Raszka, this website showcases screenshots of thousands of user interfaces from different apps. Divided into categories, the screenshots present different answers to the same problem, allowing you as a designer to note similarities and differences, and analyze UX design trends.
These repeating elements can then be interpreted as common denominators – making them design patterns, hence the name. A quick browse through the ‘Empty States’ category, for example, can bring some interesting points to mind, such as the dominant use of white and light gray in displaying empty pages (carts, lists or other pages without any added items). It’s equally relevant to note how some apps spitefully break the rules, opting for very bright or very dark colors. With this sort of insight at hand, Pttrns offers a simple and intuitive way to research for the common thread and spot patterns in current design trends.
Pttrns.com is available in free and Premium options. Premium members enjoy an ad-free version of the website, and an unlimited access to the screenshots.
2. UX Archive: How things are done on mobile
UX Archive shares a similar logic of observing existing design patterns. Only this time, the website is focused on user flows in mobile apps. Meaning, the chain of events required for performing a specific task on mobile. UX Archive collects screenshots of actions performed on some of the bigger apps, and displays them in order of performance.
By breaking down a specific action performed on an app (such as searching or booking) and displaying a screenshot of each step, you can get a better understanding of the process and see how each stage is communicated. This leads to some interesting, analytical questions. When reading a news article (categorized under ‘Consuming’), for example – what happens when we want to watch a video embedded in the article? And once we’re done watching it, how do we get back to the text? How do we know when we’ve reached the end of the article? The owners of the site, Arthur Bodolec, Chris Polk and Nathan Barraille, stress the importance of downloading the apps yourself, and really playing around with them on top of comparing static user flows. “It will help you visualize all the flows and steps,” they write.
3. Media Queries: Responsive web design in all its forms
Named after the CSS3 feature that enables responsive web design, Media Queries is a collection of responsive websites curated by Eivind Uggedal. Responsive web design is, simply put, design that can flex and adapt when viewed on different devices, from the large desktop screen to the much smaller smartphone – and any tablet in between.
Media Queries displays each website in a row of four screenshots that gradually grow in size. Seeing the different versions of the same design side-by-side, allows for a thorough probe into the main adaptations required for successful responsive design. What happens to the logo, for example, or how the layout is rearranged, and what design elements don’t make the cut into the mobile version. Mediaqueri.es allows browsing the collection chronologically (by posting date), or by popularity. Users can submit more responsive sites, or vote for their favorite designs via Twitter.
Want more? There is also a convenient list of all sites showcased in the collection.
4. UserOnboard: The good, the bad and the ugly in user onboarding
You only get one chance to make a great first impression. On UserOnboard, that crucial first encounter is picked apart and critiqued with elaborate slideshows. The website, run by Samuel Hulick, is dedicated to how design and textual copy can improve the user’s success when meeting a new app or website.
With elaborate teardowns, UserOnboard walks visitors through screenshots of each screen in the onboarding process of different websites and apps. With accompanying text bubbles and meme-like images that point at important aspects in the design, the teardowns detail why these websites work well, and what can be improved. These critical observations are on-point, and their fun and light tone makes UserOnboard a great way to freshen up on what to keep in mind when designing your next onboarding experience. One such useful advice can be found on the site’s PayPal teardown: “Pro tip: remove all the words from your app and evaluate what remains – does it still provide guidance? Can people still learn from it?”
5. CollectUI: Ideas are everywhere
There’s something special about participating in web design challenges. With no client to supervise your every move and no brand guidelines to follow, it’s all about quick, stress-free briefs that pop up in your feed or inbox, awaiting to set your imagination free. The end result, often refreshing and original, is then shared with the design community for feedback and mutual inspiration – only to be quickly forgotten in the abyss of Internet oblivion.
This is where CollectUI comes in, handpicking the best Dribbble shots from the Daily UI Design Challenge, and curating them for future reference and an inclusive design research. “The challenges chosen are so good that you they serve as a great source of inspiration,” writes Ahmet Sülek, who runs the website. And we tend to agree. The site, which can be viewed either by chronological order or by category, showcases the best UX design solutions for almost any website feature. It goes from simple ones, such as a search bar or an on/off switch, to more large-scale designs, like sign up pages, or user profiles. Some of the submissions are wild creations that can only exist as an exercise, while others seem so sharp that they could easily make their way into a new app. Browsing through all of this together is bound to get your wheels turning with new ideas.
CollectUI.com also offers a Chrome Extension so that you can easily browse for similar designs and submit your own Dribbble shots.
6. Sketch App Sources: Winning us over with high-quality freebies
Sketch App Sources offers free design resources to be used on Sketch App, created by designers around the world who share a love for Sketch and UX design. The website fosters a feeling of a growing design community, with members learning and helping each other by sharing tools, knowledge and tips – and giving credit where credit is due. Among the many design resources available for download are UI kits, wireframe kits, templates, icons and more. These useful tools can come in handy as assets for your own projects, and you can also download them to take a look into the layers and thought process behind other designers’ work. The website, active since 2012, also features tutorials, plugins, articles and much more.
7. Medium: Sophisticated reads for your inspiration
Not all design inspiration comes in visual form. As a platform based on the written word, Medium is all about the quality of the content, and not the big names behind it. Readers can promote their favorite texts, so that the best articles come up first. You can also follow and subscribe to writers and publications you appreciate, or search according to tags. Some of our favorite writers for you to check out are Saadia Minhas and Mei from Prototypr, Ariel Verber from Muzli, as well as the excellent UX Collective publication. Medium houses many other great reads in all fields of design (and pretty much any topic you can think of, from tech trends to cultural phenomenon). You can also publish content of your own, as Medium is an open platform, and share some of your UX thoughts, or other musings, with the world.