Unless your project is structured beautifully, certain animations are a pain to tweak. Just let the client know what your intentions are for the animations, and let the tweaking and finetuning happen in the code of the final product. Until then, you are simply painting a functional and visual picture for the client and developers, giving them a clear view of your vision. Web design transitions and animations are great to prototype in After Effects. In this article, Matt Reamer will be scratching the surface of how to fit After Effects into your UX Workflow, and he’ll share details, advice, experience and links that you could use as influence and thought starters in your next project.
Read more…
Tools are an extension of our hands, and as such, they should be versatile, quick and intuitive. A lot has changed between the print era of offset presses and the digital era of cross-platform screens. Developers have attempted to adapt our tools, but Sketch is perhaps the most successful app in this regard. In this article, Patrick Keenan will not only show you a new tool, but also start you on your way to a new design system. Remember, no matter how good it looks, the greater focus is not on the pixels, but on the user. If your sight is true, all else will follow.
Read more…
Toward the end of 2014, a Google spokesperson hinted that the mobile user experience would become a ranking factor. In January 2015, a number of website owners received messages warning about mobile usability issues on their websites, linking to a section of Webmaster Tools where they could review the problems. In this article, Tim Jensen will review how to flag mobile issues in Webmaster Tools, explain the most common issues and show you how to assess mobile usability problems on your website based on these flags.
Read more…
Flex items are truly accommodating and a pleasure to work with. Most web apps consist of a series of modular, reusable components. You can use flexbox for those bits of layout that induce headaches and that depend on brittle CSS hacks to work. It takes a while to have your “Aha!” moment with flexbox, because it involves unlearning what you already know about CSS layouting. But once you speak the flexbox language fluently, your process of designing responsive apps will become effortless and your style sheets will get leaner!
Read more…
Product Hunt is a community where people post, vote on and comment on new products they’ve discovered or launched. Whether you’re looking for the next big thing to invest in or just want to find a better weather app, Product Hunt has got you covered. As Product Hunt’s success has shown, there’s a big demand for websites that help us deal with information overload by streamlining and centralizing content. Telescope is a fast, modern platform on which to build your own community, social news app or link-sharing website. In this article, Sacha Greif will show you how easy is to extend it. He encourages you to give it a try!
Read more…
Proto.io is powerful solution for prototyping native and web apps for use on a variety of devices. The learning curve is a bit steeper than with Axure, but it can be mastered with a little time and practice. Proto.io’s real strength is its built-in support for many device types and native app libraries, and its support for gestures and transitions. The first thing to know is that unlike most prototyping tools, Proto.io is a web application, so you’ll need an internet connection to do your work. Assuming you’ll have access when you need it, Proto.io offers a lot for mobile designers to love, built right into the app.
Read more…
Something interactive will almost always communicate more than a picture ever could, and you’ll have better conversations because of it. On the other hand, Sketch is an excellent UI design tool, lightweight and quite powerful, and it works great with Flinto, InVision and the like because they live in the borderlands of flat images and HTML or native code. In this article, Joshua Mauldin will talk you through why you should prototype and how you can do it with Sketch and prototyping tools such as Flinto and InVision. He’ll also get a nicely documented freebie Sketch file to help you.
Read more…
Print style sheets is the main thing that comes to mind if you mention printing with CSS. But CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all. In this article, Rachel Andrew will take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. She’ll explain how the selectors, properties and values that they introduce work. She’ll finish up with a working example that you can use as a starting point for your own experiments.
Read more…
The World Wide Web is not static. Quite the opposite: It’s responsive, fluid, evolving and ever changing.
Web designers need to be familiar with HTML and CSS code and front-end technologies when they conceive a website or application’s interface. In Creative Suite version 6, a CSS Properties panel was added to its toolset — a tool that, if used properly, could help both designers with CSS coding experience and beginners alike. By the end of this article, you should have a better overview of this feature and also know how to use it with CSS Professionalzr, a free extension developed by Matt Stow to further optimize the code generated by the panel.
Read more…
In this article, Daniel Sternlicht walks you through the development process of a Chrome extension with modern web tools and libraries. It all begins with an idea. Daniel thought it would be nice to create a Chrome extension that enables you to mark your reading progress in articles so that you can continue reading them later — anywhere. “Markticle” is the name he chose for this extension. He’ll share here the technologies that he used to develop it. After reading this article, you’ll have a ready-to-use “Save for Later”-like Chrome extension.
Read more…
