Many teams still work with static mockups to visualize their ideas and communicate them to stakeholders and other team members. Jarrod Drysdale looks at the many advantages prototypes have over static layouts, like better communication between designers and developers, an increased understanding by stakeholders for interactivity and user flows, and better feedback from user testing.
Working with realistic data as early as possible in the design process can be invaluable because you can design and prototype content-first. Pulling in realistic data into your prototypes is not limited to coded prototypes anymore. With plugins like Data Populator, you can also pull data from APIs into tools like Sketch or Adobe XD, for example. But what if you want to use realistic data while the API is not ready yet? That’s where mocking an API can prove useful and in this post, Tapas Adhikary walks you through the process of setting up a local fake REST API that responds to your requests with generated but realistic fake data.
If you are looking for some prototyping inspiration, have a look at this list of 20 prototypes and their animations and micro-interactions. Fredo Tan collected a broad range of examples, from mobile apps and voice interfaces to dashboards and desktop applications. All prototypes are made with ProtoPie.
Prototyping is not only invaluable to explore comprehensive solutions but equally useful to get the small details and micro-interactions of a project right. Polo Chen takes a look at one of the most basic interaction patterns on the web, the hover effect, and how it can be prototyped in four of the most popular prototyping tools. And in case you also want to know how to prototype an auto-animated hover effect in Adobe XD, watch this Adobe XD Hover Effect Design & Prototype Tutorial video by Caler Edwards.
Image placeholders are super useful for HTML prototyping and you can use services like PlaceIMG, Placeholder.com, or placekitten to get placeholders via a URL that can then be used in a prototype. External requests can significantly slow down local development, though, so Tyler Sticka made a tiny, dependency-free library called Simple SVG Placeholder that generates data URIs for placeholder images. In this post, Tyler explains how the library works and how you can use it in your prototypes.
CSS Grid is a game-changer in how quickly different layouts can be prototyped directly in the browser with only a few lines of code. If you are not yet convinced, watch this 5-minute video by Jeremy Osborn. He does a great job of explaining why prototyping in the browser with CSS Grid is so powerful.
Adobe XD lets you intuitively link screens to create prototypes quickly but it is equally suited for building high-fidelity prototypes with multiple interaction triggers – like touch, voice, and keyboard input –, different component states, and animations. In this session from Adobe MAX, Jonathan Pimento and Arun Kaza explain in detail how to prototype effectively with XD, including a lot of pro tips and tricks.
Play is a new tool that promises to revolutionize how you design apps – directly on your mobile phone. You can build your product from scratch or by using over 100 customizable components. Play will export to Xcode supporting Swift, with plans to roll out more languages in the future. You can sign up for the private beta now.
Whether you want to create a sitemap, visualize a software architecture, or prototype a user flow, diagrams are a helpful tool in the design process. Diagrams is a new diagram editor for Mac that lets you easily create beautiful and structured, well, diagrams.
Besides star shapes and drag-and-drop support for XD plugins, the January release of Adobe XD introduced powerful smart layout controls: In its initial release, Content-Aware Layout finally brings padding to groups and components in XD. So you can now create buttons that adapt to different text lengths or components that grow when you add new layers to the group.
The Sketch team announced the first beta version of a new Cloud Inspector in January. Cloud Inspector lets you share designs more easily with developers and provides details like measurements, fonts, or colors for selected artboards and layers.
Creating a color palette that meets accessibility criteria such as minimum contrast ratios defined by the Web Content Accessibility Guidelines can be quite a challenge. This is where Leonardo comes in, an open-source tool for creating adaptive color palettes based on a target contrast ratio.