Editor’s Note: This article contains many video examples that show functional animation. Therefore, it may take longer to load on slow connections. A good UX designer can easily explain the logic behind each decision in a design concept. This includes the information architecture, the content hierarchy, the flow and the assumptions made.
Sooner or later, animation will be introduced to the wireframe concept, and then making design decisions or explaining them becomes harder. Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength. Animations deserve a far better ground in our design considerations. We should be justified in defining animations and explaining their purpose — just the same way that we explain all other elements in a design.
Some things just don't change: SmashingConf Freiburg is taking place again this year, on September 14th-15th 2015, in our lovely hometown in Germany. Two days, one track, 16 brilliant speakers and 300 fantastic attendees, sharing practical insights into their craft. And the best bit: lots of networking in good ol’ beer gardens, at the very foothills of the legendary Black Forest. Tickets are now on sale.
Trends don't matter, but techniques do. With another friendly, intimate conference in our lovely hometown, we'll explore practical techniques, design patterns, lessons learned and other tasty recipes from real-life projects. As you know, we care about interesting problems and smart solutions. The goal of this event is that everybody — speakers, attendees, as well as the fellow designers and developers watching the videos later — discover new techniques and strategies that can be applied to real-life projects right away.
CSS’ clip-path property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design. 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.
While the focus of this article is on clip-path using polygons with CSS, all of the demos provide a reference 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.
As the web continues to evolve at a breakneck, Moore’s-law pace, the divisions between traditional design and development are increasingly shifting. The “learn to code” movement is also 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 the question remains, what exactly should we learn? Maybe it isn’t as simple as “learn to develop” or “learn to design,” but is 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.
If a framework encourages best practices in development while also improving our workflow, it might serve both our users’ needs and ours as developers. If it encourages best practices in accessibility alongside other areas, like performance, then it has potential to improve the state of the web. 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.
The lowly form input. It’s been a part of HTML for as long as HTML has had a formal specification; but before HTML5, developers were hamstrung by its limited types and attributes. As the use of smartphones and their on-screen keyboards has flourished, however, inputs have taken on a new and incredibly important role — but they’re also riddled with browser and device inconsistencies. The eight original input types were brilliant in their simplicity. (Well, OK, maybe <input type="image"> hasn’t aged very well.)
Think about it: 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.
The @extend directive in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors. However, it 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.
By examining @extend in detail and exploring these various strategies, you can accurately predict exactly what happens when you use @extend, and make more informed decisions about when to use a @mixin and when to use @extend, to ensure optimal organization and to restrict unused styles in your style sheets.
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and 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 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. 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!