“Design Trends: The Present, The Future, and You” plus 1 more - Speckyboy Design Magazine Feed

Design Trends: The Present, The Future, and You

Posted: 28 Mar 2012 12:13 AM PDT

Whether you agree with them or not, design trends can teach us important lessons on what works and what doesn't for users. They're popular for a reason. The true value of a trend, however, lies in its longevity. If you can identify trends that have the potential to last in the distant future, you will have a great advantage in making your own work successful — especially if you manage to pinpoint and isolate the core element in the trend that allowed for it to strongly resonate with users in the first place. So take a look at these trends below, identify what makes them work, and consider incorporating their lessons into your next design.

Hipster Design, aka Crafted Design

Hipsters have recently garnered a lot of attention in the world, and why is that? Is it because of their attention to detail on certain aspects of their fashion and lifestyle? Maybe it's due to their notorious attitudes and passionate outlooks on life. One thing's for sure: they're hip and passionate in what they love and do — and it shows.

Lately, there has been a lot of hipster essence in design, and I'm not just talking about stylish arrows, distinguished typographic treatments, and bold color palettes. No, I'm referring to that special element of passion and craft that has been shining in the design world.

For every drop shadow, arrow, or pattern you see in a hipster design, you know that undoubtedly, some amount of time was poured into determining how much craft and personality that particular graphical element would add to the overall impression of the design. When a simple but humorous notification pops up in your favorite app, you know that some time was spent designing that interaction to evoke an intelligent, emotional response from you. There is an increasing amount of intentional crafting that goes into reaching you, the user, at a deeper and more personal level. This crafting, in turn, creates relationships and emotional impressions that are made to last.

Really, the lasting element of “hipster” design will be thoughtful, well-crafted, and meaningful interactions. The web is at a point where users are more than ready to appreciate and embrace the effort and meaning behind well-crafted design. Crafted design certainly creates a more visually pleasurable experience, but more importantly, it adds new intrinsic value to your project's identity and core.

Special Effects

It's becoming more and more frequent that I get tickled by a fun special effect or interaction. This can come from an unexpected animation of a button that actually presses down when I click it, or from a fun rolling of avatar bubbles in a graphical circle. But soon it's not just going to be a pleasant surprise to experience these effects as a user, it is going to be commonplace, and expected.

There are two significant roadblocks that, up until recently, have prevented more complex interactions and visual effects from having more of a presence in design. One is current technology, and the other is the learning curve of user experience and interaction.

As to the first roadblock, there have been marvelous improvements to technology (such as HTML5, CSS3, innovative CMS systems, etc…), as well as progressive enhancement and graceful degredation methods to help support those who aren't yet on board with these improved technologies. With the technology obstacle out of the way, designers are beginning to play more with the idea of introducing innovative special effects.

The second roadblock, the learning curve of user experience and interaction, has also been falling due to the increasing integration and reliance on complex applications and devices. Users are being introduced to and trained in rich interactive experiences through the usage of diverse and innovative mobile and web applications; in turn, designers are becoming increasingly bold and creative in designing and enhancing the interactive experience.

As the barriers to special effects continue to fall, designers will push new trends in user experience and special effects. We're already seeing more interactive and “touchable” buttons, sliding and fading visual elements, subtle glows and hover treatments, parallax experiences on scrolling sites, elements of augmented reality, reappearing sticky navigations, and the list goes on and on. So long as you're keeping your audience in mind and designing responsibly, now is the perfect time to use crafted special effects and interactions to bring an enhanced, rich experience to your users. After all, as these trends become more commonplace and technologies continue to improve, users will begin to expect less friction in their experiences.

Responsive

The multi-screen experience is something that we can't put off any longer. Designing for various browsing experiences is a necessity that we must address in our design.

The current resolution to this requirement is the use of responsive design to accommodate for different screens and devices. Through responsive design, web experiences can be tailored to various browsing experiences, thus maximizing the number of users who can easily enjoy a design interface. There's a world of potential for creativity and innovation that can be explored through responsive design. As a matter of fact, you can see this creativity being put to good use via responsive design techniques like media queries.

One of the best parts about responsive design is that the world recognizes its importance. Sure, your clients might not recognize the terminology of multi-screen experiences or responsive designs. They will, however, acknowledge the importance of reaching larger audiences by accommodating the various devices and platforms that users are accessing sites and apps from.

Fingers vs. Pointers

We are currently in a transitional period where screen interaction is moving from mouse point-and-click to finger swipe-and-tap. By 2016, over 1 billion people are estimated to have smartphones. That's almost 1 in 7 people accessing the Internet through their mobile devices! Many mobile companies have picked up on this point and are leading technology through their innovative and intuitive user interfaces and experiences. One classic example is Apple's introduction of an intuitive reverse trackpad scroll (which they've even deemed in their settings as “natural” mode!) which mimics the same experience as that of a touch screen device.

Whether we label ourselves as web designers or mobile user interface gurus, we should constantly be mindful of the interaction between touch capabilities and traditional mouse usability. Especially in creating mobile applications, we have a responsibility to educate and guide our users toward the most appropriate and intuitive interactions they should be making with their mobile devices. After all, mobile is a growing device platform that more users are familiarizing themselves with.

Other ways of staying ahead of the curve include the utilization of click-and-drag functionality on a website and the introduction of progressive enhancement features like gestures and keyboard functionality. With both of these methods, we're allowing the users to fall back on what they feel is natural to their user experience while at the same time softly training them to enhance their interaction and experience with newer applications and sites.

Less is More

With the wide disappearance of scroll bars, increased attempts at simplification (via the use of elements like modals and autofills), and continued popularity of minimalistic web layouts, there has definitely been a strong call for keeping a user's experience as simple and refined as possible. Usability and user experience are being more valued and prioritized so that users receive the most optimized yet compelling experiences available.

Popular design principles (of simplicity, honesty, and intuition) that many follow give increasing significance to the argument that “less is more.” In addition, the efficiency and impact of simplification in design is being proven through the results of conversion, metrics, and marketing as well as through the success of popular products that pride themselves on honest and simple design.

Ultimately, while we shouldn't get carried away with over-simplifying designs to a point of obscurity, we should always keep an observant eye to evaluating what is necessary to a design. When evaluating a design, consider what you can do to make its experience better. Can that section of “reading more” content be augmented through a modal or some other multi-layered experience? Is that check out process you've wireframed as efficient and painless as possible for a customer? Think about the main points of your design and augment these elements by reducing obstructions that can get in the way of an otherwise effective interaction.

Reducing the Footprint

For too long, the web environment has been plagued with relying on a traditional site map filled with a multitude of pages where often times a page will contain barely enough content to fill the screen.

Whether the movement towards pageless, long-scroll, microsites was brought on by trends like the previously mentioned, “Less is More” ethos, or the growing readjustment of the scrolling experience on touch devices, reducing the footprint on a website has been steadily gaining popularity. Site links and CTAs no longer point to other pages and instead go to internal anchor links within a scrolling site. Furthermore, the usage of layering a site, with unveiled hidden divs, overlayed modals, and sticky navs and CTAs has brought a level of dimensionality to the normally flat and traditional experience of a layout.

While reducing the footprint might not be for every site, it does propose the question of whether or not you're dragging around unnecessary weight through superfluous pages that users would not be apt to clicking. So, check and see if this might be the case with your next design!

Covers

Due to the growing prevalence of rich user experiences, there has been a definite push towards finding that extra little something that tells a story, makes an experience, and creates a lasting impression. The recent trend of covers has been something that more apps, websites, and products are embracing. Facebook timeline covers allow users to put their own unique representation into their personal profiles. Path places a cover at the top of your Path experience in order to enrich the visual sensations a user would experience with the application. Even phone companies are stepping up their game by taking time crafting creative and intuitive lock screen “covers” for their users.

Covers add an extra layer of “tangibility” to an otherwise digital and detached experience. As in the case of Facebook and Path, covers give users some foreshadowing into what they're about to interact with and thus eases them into an experience. Also, similar to the feeling that isomorphic correspondence creates for users, covers can offer a nostalgic and familiar feeling. The experience of a cover is very closely related to other natural interactions that we encounter, such as opening a book, looking at a dvd cover, or unwrapping some packaging. By refining this trend and using it in our designs, we can create more emotional, connected experiences for users.

Drive the Future with Your Design

An understood but silent truth about trends is that they set standards, and that these evolving standards drive innovation. As the core elements of design trends become commonplace and users begin to expect better experiences, new doors for innovation in both technology and design are opened. In this sense, design has the potential to drive trends in user experience, technology, and everything in between. By identifying and building upon the core elements of whatever makes a trend so… trendy, you become a part of an ongoing cycle of innovation in user experience.

Building Websites with a Priority for Mobile

Posted: 27 Mar 2012 09:49 AM PDT

Today it’s more common to find a skilled web artisan who understands desktop support over mobile. This appears to be a symptom of building on the desktop browser for decades as opposed to other screens. Yet there is a growing case to argue that mobile development is the best place to start on new-age websites.

In this article I’d like to discuss a few key points in this argument. Namely that starting on mobile first will give you insight into how the design layout can unfold on larger screens. Prioritizing mobile isn’t always the best solution, but on today’s Internet it appears smartphone usage is growing at an alarming rate. Any web designer truly interested in building semantic layouts will jump at the idea of coding websites for mobile first.

Simplify all Page Elements

When I first started researching the mobile web I was frequently lost in a sea of CSS media queries and JavaScript plugins. Unfortunately these tools aren’t very helpful if there’s no grounding to work on. You have to start with a basic understand of why you would design for mobile and slowly incorporate these ideas.

A solid approach is to consider limiting your website to only key elements. When you can strip down a design idea into bare essentials it makes the process of building on mobile screens all the more easier. But why would you want to start in the mobile realm?

Well, it allows you to approach each project with a clearer perspective on goals and user objectives. You have to ask yourself What do I want my users to be doing? What do my users want to do? Mobile screen real estate is much pricier than monitors or laptop screens. You have to utilize the space you’re given to fit all components neatly in place.

If you can put together such a layout on mobile then it will be much easier transitioning into the desktop environment. There is an old concept that placing limits on your design work will actually help you achieve a more narrow focus. I absolutely feel this holds true for mobile web design which gives all the more reason to prioritize smartphones first.

Understanding User Needs

The requirements of your visitors will change drastically from person to person. Whether you’re building a personal project or working freelance it’s crucial to spend a bit of time thinking about activities on the site.

Are visitors mostly coming into the site via Google searches or social media? Think about what are the most popular features in the layout (search, page navigation, login/logout).

With these ideas in mind you can prepare a much more complementary mobile web design. And prioritizing this first means you’ll have a bit of knowledge when moving into desktop web development. Considering websites are built for the user experience you should spend as much time as needed to plan out these features. Test run a couple of different layout ideas in plain HTML to see how they feel in a mobile browser.

Tablet PCs

Discussing the mobile web would not be complete without a bit on tablets. The new iPad 3 announcement will only increase hype for users looking to make the transition. And browsing a website on your laptop can appear much different than on a touch screen device.

Yet obviously most tablets do not have the same limitations as you’ll find on mobile phones. The iPad 2 screen resolution is limited at most by 1024×768 which should display modern layouts just fine. If you choose to work with a focus on all mobile devices you’ll need to plan ahead for each resolution setting.

I recommend starting with the smallest possible screen size and working your way up. This can be accomplished with CSS3 media queries by including different stylesheets based on the device width. Yet there is also the option of building a single layout with responsive capabilities.

Coding Responsive Layouts

Possibly the simplest solution for supporting all mobile devices is to build your layout with responsive properties. This means the whole website and inner content will re-form itself to fit the particular screen resolution – even as the user resizes their browser window.

If we place a priority on mobile design then building a responsive website makes a lot of sense. You don’t need to include particular stylesheets for different devices since the same HTML markup works on all screens. This also provides the perfect reason to start with mobile first. Once you know that your layout renders properly in mobile screens it’s simpler to fix bugs related to desktop browsers.

The best way to jump into this topic is by looking at similar examples. You must understand how responsive websites perform on a mobile phone vs. a desktop and how you can code these features. I highly recommend our gallery of 40 responsive websites to get you started on the right path.

Shifting the Navigation

Typical desktop browsers and even tablets may support more convoluted link hierarchies. You can use jQuery to enhance navigation with dropdown menus or slideout effects. This is all well and good if you have space on the screen to interact.

Yet touch screen devices do not support mice, and even worse it’s difficult to port over jQuery menus onto mobile. Whether you’re building responsive or coding a separate mobile layout, either way will require some finesse to move around your page navigation. But understand there is no “right” or “wrong” placement for nav links.

I find that building block sections of the page to cascade down is the simplest solution. You can even still use simple jQuery effects to slide open hidden sub-menus if needed. Keep in mind there isn’t a lot of room for links so you’ll have to stick with the most popular root items in your navigation.

Alternatively you could push all these links to the bottom of your page and include a hash anchor such as #btmnav. This alleviates room at the top of your layout once the website loads. But it can be confusing if visitors don’t know where to find the navigation items.

Handling Image Content

In-page media can be the trickiest to work around on mobile screens. If you’re considering building for mobile first then it’s difficult to gauge just how large your photos should be.

With the CSS property max-width: 100% you can setup all images to contract and expand up to their maximum point. This is the best way to respond with users on a mobile screen while also supporting full-sized images on desktops. And the best part is that all forms of media(including HTML5 video) will support this property as well.

Now the alternative solution is to build a set of images targeted towards mobile screens and another set for standard displays. This is trickier since you need to support Android and iOS devices while iPhone also requires retina images at double the standard resolution. To learn more about this method check out Ben Frain’s awesome article on how to serve high-resolution images for retina displays.

Conclusion

There are plenty of reasons to focus on mobile web development from the get-go. It’s a realm of technology which has been widely ignored for a long time. Thankfully advancements in mobile web browsing have forced designers to consider this ever-growing form of screen media. If you have similar ideas for building on mobile first you can share with us in the post discussion area.

Design fricks news

Mittwoch, 28. März 2012