Are you designing at “Retina” resolution in Photoshop? In this article, Murdoch Carpenter will walk you through the problems he faced in creating Retina mockups to be displayed on a tablet device. He will then explain a way to work that is easier and gives you better performance. This is about Murdoch’s experience with Photoshop, but it could be applied to Illustrator and other software. Throughout this article, he will use the @2x and @3x notation. These represent the Retina buckets for iOS. A great example is the app’s icons.
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…
When it comes to providing pleasure or delight in our websites and apps, animations contribute a lot. But always remember that they must be functional first. In this article, Amit Daliot shows us video examples that show functional animation. The following rules map well to every animation Amit encountered so far. They helped him to assess animations that he saw in interfaces, and they are a strong set of guiding principles in deciding how to add animations to a wireframe design.
Read more…
With CSS’ clip-path property you will begin to think outside the box, literally, and hexagons, stars and octagons will begin to take form on your web pages. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values. In this article, Karen Menezes will provide demos referenced to an inline SVG, in order to gain additional support on Firefox. Generating a responsive SVG clipped shape is trivial once you have created a responsive shape with CSS’ clip-path. We’ll look at this in detail later.
Read more…
The “learn to code” movement is gaining momentum among designers, but you’d be hard pressed to find a similarly strong movement for other disciplines within a team. Perhaps there should be. We should all be striving to learn, but… what exactly should we learn? Maybe it it’s about learning to communicate and collaborate, to respect the nuances of each other’s craft — and the artistry and reason that they both demand in equal measure — without attempting to master it for oneself.
Read more…
Despite our pursuit to do a better job every day, sometimes we forget about accessibility, the practice of designing and developing in a way that’s inclusive of people with disabilities.These days, we build a lot of client-rendered web applications, also known as single-page apps, JavaScript MVCs and MV-whatever. AngularJS, React, Ember, Backbone.js, Spine: You may have used or seen one of these JavaScript frameworks in a recent project. Common user experience-related characteristics include asynchronous postbacks, animated page transitions, and dynamic UI filtering. In this article, Marcy Sutton will explore techniques for building accessible client-rendered web applications, making our jobs as web creators even more worthwhile.
Read more…
By inserting a single element in your markup, you can tell any web browser to render an interaction control, and you can completely modify that interaction – from a text field to a checkbox to a radio button – by simply changing a keyword. Now imagine a world where creating these interactions means also creating custom interaction controls, and you begin to realize how taken for granted inputs really are. That’s what the HTML 5.0 specification was intended to solve, by expanding the concept of the text input to allow for specific data types, such as numbers and email addresses, as well as rich interactions, such as task-specific on-screen keyboards and date- and color-pickers.
Read more…
The extend directive can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using extend effectively that can prevent these side effects and produce clean, organized CSS. Understanding how extend works and keeping the guidelines above in mind will enable you to use @extend to its full advantage — reducing CSS output and keeping relationships intact, no matter what exported selectors (classes, attributes, etc.) you use. Make wise use of both the @mixin and @extend directives — they’re meant to coexist in your well-organized style sheets.
Read more…
As designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This post features free desktop wallpapers created by artists across the globe for May 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper! This creativity mission has been going on for seven years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.
Read more…
Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays. You have a lot of control over where people look when they’re viewing a webpage you’ve designed. On a text-heavy and graphic-light page, a visitor’s eye likely follows something like a Z-pattern or F-pattern across and down the page. However, as soon as you design page elements and add graphics, those patterns no longer apply. Your visitor’s eye will follow the flow, movement and rhythm you create.
Read more…
