Vector icons and fonts, line and block. Sets from $10 to $199.
Category: Visual Design
Understanding SVG Coordinate Systems & Transformations (Part 2) – The transform Attribute
SVG elements can be transformed by scaling, translating, skewing, and rotating—much like HTML elements can be transformed using CSS Transforms. However, there are certain inevitable differences when it comes to the coordinate systems used and affected by these transformations. In this article we’ll go over the SVG transform attribute and CSS property, covering how to use it, and things you should know about SVG coordinate system transformations.
Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio
SVG elements aren’t governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—at first glance—less intuitive. However, once you understand how SVG coordinate systems and transformations work, manipulating SVGs becomes a lot easier and makes a lot more sense. In this article we’re going to go over three of the most important SVG attributes that control SVG coordinate systems: viewport, viewBox, and preserveAspectRatio.
10 Tips & Tricks for Sketch
- Learn the “Insert”-Shortcuts
- Always have the right zoom
- Scrolling
- Hide/Show sidebars
- Presentation mode
- Ruler
- Moving objects
- See margins while moving
- Resizing objects
- Naming and grouping objects
- Bonus: Resources
On sketchappsources.com you can find a great collection of free design resources for Sketch 3 – I can recommend you to use them in your projects.
Inspecting Yosemite’s Icons
[In June 2014,] Apple released a preview of their new operating system, OS X Yosemite. Following the visual refresh in iOS 7, Yosemite features a significant visual change. Apple has added the familiar blur and translucent materials, a cleaner looking user interface, a new system font and updated icons.
I want to focus on my favorite visual update in Yosemite — the dock icons. Before Yosemite, Apple maintained a system for icon design through a checklist of mostly unstated and understood guidelines paired with a few specific recommendations in the Human Interface Guidelines (HIG). With Yosemite, that system becomes more consistent, and regular, yet the HIG remains silent on the specifics.The first thing people usually want to discuss with an update like this is the look and feel. However, there are plenty of comparisons between the Mavericks and Yosemite icons. They’re cleaner, they’ve removed the gloss, made things happier and brighter looking, and retained some skeuomorphic elements.
Optimizing Images
Friends don’t let friends load 300kb PNG images on their websites no matter how cool the transparent photo of a happy customer waving over a gradient background looks. That said, when raster graphics are required, one should always optimize them. My favorite tools for this are ImageOptim and ImageAlpha. The more I use them, the more they inform how I design.
Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study
CONCLUSION
Johnson’s warning against using hollow icons in user interfaces just isn’t supported by evidence from real users. For one thing, an icon’s style doesn’t exist in isolation, but interacts with other attributes like color to create compounding effects on usability. Furthermore, less than half of the icons in my set of 20 performed better in a solid style than a hollow style. A different set of icons would likely result in a different overall result.
In any case, the small differences in recognition speed that I observed are not likely to cause any lasting fatigue for users. Research has shown that users begin to map the meaning of icons to their positions in the interface, so it’s not like users have to reinterpret each icon during every use. It is also important to consider that a two-style approach may have an accessibility benefit over using color alone to show an icon’s state, since it gives people with color blindness additional visual feedback. Of course, the first image in this article shows that Apple uses a combination of style, color, and labeling to reinforce usability.
My ultimate conclusion is one that most designers probably felt intuitively upon encountering the solid/hollow debate: designing icons to be both semantically clear and visually attractive is a complex exercise that doesn’t lend itself to simple binary rules. In fact, a closer look at Apple’s Human Interface Guidelines, which lay out its recommendations for solid/hollow icon design, acknowledge that some icons simply won’t work well in both styles.
Finally, I hope that this study highlights the importance of using real evidence to back up UI design decisions. Designers of all types need to think critically about best practices and back up their recommendations with solid (pun not intended, but embraced) research.
Improving the hamburger button
The hamburger button is the three-line “collapsed nav” indicator on a mobile app or mobile display of a website.
It’s pretty safe to assume that this guy will stick around on our screens for some more time. So instead of sounding like a jerk talking about the pros and cons of the mobile icon, I’d rather discuss potential improvements in the context of website navigation.
When we created the new Holtzbrinck.com, one of the world’s leading media companies, we had to reduce all the existing information to one single page. Readability was key, but we also realized that the page became far to long to browse on a small screen. We needed to provide users a means to navigate at all times. A Tab-bar like menu would have been far too intrusive, even if we had applied the “scroll up and show” pattern. Instead of using the classic sticky navigation bar on top, we decided to implement a different behavior.
Sketch Tutorial: Colorful Switch
Good beginner tutorial for Sketch 3.
Animating SVG Gradients
Three demos of animated svg gradients from designmodo.