Sunday, January 31, 2016

Popular design news of the week: January 25, 2016 – January 31, 2016

http://ift.tt/200Puon

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

The 9 Graphic Design Trends You Need to Be Aware of in 2016

 

The Future is Near: 13 Design Predictions for 2017

 

Tips for Designers Who Don’t Code

 

Minimal Homepage

 

Timelined: Customizable CSS-only Vertical Timeline

 

Google Revamps their Webmasters Portal with Clean New Slick Design & Resources

 

The Genius of WordPress (and Why It’s Doomed)

 

Google will Soon Shame all Websites that are Unencrypted

 

Dribbble and the Creation of the Useless Designer

 

Codepen’s New Feature: A JavaScript Console!

 

Guilt and Shame as a UI Design Element

 

Best Practices for Content Planning in UX Design

 

The Problem with Dribbble : Tobias Van Schneider

 

Posters 2015

 

How to Wow Me with your UX Research Portfolio

 

The Real Legacy of Steve Jobs

 

Facebook’s Condensed the World’s Emotions into 6 Reactions, and They’re Coming Soon

 

The ‘Memoire’ Typeface Changes like a Memory as You Use it

 

“Please Stop” with Times New Roman

 

Why Fonts Matter, and How They Impact your Mood

 

Adobe Just Launched a Squarespace Competitor Called Portfolio

 

Is the Internet Killing Creativity?

 

Entrepreneur Porn is a Dangerous Fantasy

 

How Much are You Worth to Facebook?

 

19 Glamorous Graphics from the Golden Age of Cuban Design

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Fully Customizable Infinity Color T-Shirt Mockups – only $9!

Source

Vía Webdesigner Depot http://ift.tt/1VyLQRc

Saturday, January 30, 2016

Comics of the week #324

http://ift.tt/1OWozXN

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Watch the cutlery

A different point of view

 

Politics aside

Can you relate to these situations? Please share your funny stories and comments below…

1200+ Lightroom Presets Mega Bundle – only $24!

Source

Vía Webdesigner Depot http://ift.tt/1PoC3go

Friday, January 29, 2016

Essential design trends, January 2016

http://ift.tt/1nCIdPV

Apps are everywhere. They have become an integral part of our daily lives thanks to the number of smartphones and wearable devices that we own.

And because of that, apps are one of the single biggest driving factors when it comes to website design trends. Let’s take a look.

Return of the scroll

Small, vertically oriented screens have brought the scroll back in a major way. Once thought to be something you wanted to avoid because users would not move down the screen, scroll is a pretty integral part of the design process again.

And scrolling now is better than it’s ever been. Thanks to great animations, parallax effects and plenty of creative content ideas, scrolling is a lot of fun and a good way to engage users.

Don’t stop with an ordinary down the page scroll; consider a horizontal scroll or animated option that can delight users thanks to the small surprise. Just make sure to include a visual cue to two for users with scrolling effects that are outside the norm, so that they don’t get confused or abandon your website because they don’t understand how to use it.

Material Design goes mainstream

Google’s Material Design concept started as a mobile interface. The flat inspired, physics-based layered interface started as the aesthetic for Android devices, but quickly spread to iOS-based apps as well.

Designers are expanding the concept for use on full-screen websites as well.

The Material concept is simple, intuitive and rooted in realistic elements so it’s easy to use and understand. Designers are having a lot of fun with the interface style with bright colors and plenty of nifty animations.

Hidden navigation is everywhere

This is one of those carryovers that is really changing the way you think about homepage design. Hidden navigation is having a major moment right now.

The debatable design of the hamburger icon is the most widely-used application, with a icon that pops out a full menu. Website designers are opting for one of two options: A menu that pops out over part of the screen or full screen navigation. The full screen option works almost identically to how slide out styles work in apps, and with the extra real estate designers have a lot of room to create a navigation page that’s more than just a few internal links.

What’s especially nice about oversized navigation styles is that they are easy to read and click through. (Nothing is worse than tiny navigation elements that are designed almost as an afterthought.)

Cards, cards and more cards

You can hardly surf the web without coming across a card-style interface. These content containers are highly usable and stack well in responsive frameworks.

Cards are a popular option because they can be a lot of fun to design as well. Cards can be custom-tailored to fit any design style and work with almost any content type. They one thing to remember about cards is that each container should hold once piece of content and connect to one click. This one “thing” can activate a video, submit a form, move to another page, buy an item or any other number of single actions. Different cards in the same website can all do different things. (As long as users understand the actions.)

It’s an interface style that needs very little explanation as well. Social media websites such as Facebook, Twitter and Pinterest are rooted in card-style interfaces with infinite scrolling so that new content is ever-populating. Users overwhelming seem to like and accept this design pattern.

Micro-interactions are essential

Not that long ago, micro-interactions were almost exclusively an app element. You might want to rethink that idea. The line between apps and websites is completely blurred. Users want to visit and app and then maybe the website later on and get the exact same experience.

This applies to micro-interactions as well. A micro-interaction is anything that helps the user communicate with the interface, see an action take place or manipulate the interface. Each of these bits of communication are so tiny the user hardly thinks about it, such as an alarm, text message or swipe to refresh content. (Just think of how many meeting notifications you get on your work computer or phone; those are micro-interactions.)

The linking factor to making this seamless transition is a touch of personalization and plenty of options for user customization. Using micro-interactions is tricky because there is a fine line between wanted notifications or alarms or messages and overwhelming the user.

When integrating micro-interactions stick to some of the most basic functions first to see how users react. Then you can add to the mix if your user-base is accepting of it.

And now…wearables

The next phase of website design is already happening. As wearable devices increase in popularity, so will design elements from these tiny screens.

Elements that will have an impact include small, status-based animations, such as scrolling wheels that fill up to show accomplishments, more micro-interactions and plenty of trackers. (Users are practically obsessed with data right now, from fitness-based data to earning points for shopping.)

Wearables also add another layer of gamification to daily life. This will likely carryover to website design as well.

What wearables will really do is further the line between all of our devices. Websites, apps, wearables – they all need to provide integrated experiences for users so that moving from device to device is seamless and the experience is consistent.

Conclusion

As screens change size, so does the way we design for them. To create immersive interactions that users want to engage with, regardless of device, each interface must work in the same way. The idea is dramatically influencing the way all websites are designed (even those that don’t necessarily have app or wearable counterparts).

By creating something that users like on the smallest of screens and expanding that to larger devices, designers can build interfaces that are easy to understand. It also makes your interface a little more in-demand.

InDesign, Illustrator and Photoshop Hands-On Video Tutorial Bundle – only $39!

Source

Vía Webdesigner Depot http://ift.tt/1SobokJ

Thursday, January 28, 2016

Yahoo unveils its latest redesign

http://ift.tt/1lYvfdv

Yahoo is currently rolling out updates to its homepage and mobile app. The new design is being launched in the US, with other territories expected to follow shortly.

The new experience, which visually is an incremental evolution of the last few designs Yahoo has employed, is built around a news feed concept. The feed uses a variation on the infinite scroll, delivering a far more immersive user experience than previous iterations have managed. Hand picked stories by Yahoo’s editorial team feature at the top of the feed, ensuring that the premium content gets an airing. Alongside the curated stories are personalized suggestions for each visitor. The new site also prominently features breaking news stories; you’ll be able to track breaking news as it happens, and Yahoo will even push notifications to you as stories you’re interested in are updated with fresh details.

Yahoo’s business problems are well documented, and it desperately needs to foster some brand loyalty, while also boosting its revenue stream. The personalized news feed is central to its strategy for achieving this. As you use Yahoo, your preferences and interests will be recorded and used to deliver more content that Yahoo’s AI thinks you’ll like. The more time you invest with Yahoo, the better your feed will be; in theory, eventually resulting in a feed that’s all killer and no filler.

feed

Yahoo’s new news feed

Having identified session abandonment as one of its key problems—SVP Simon Khalaf cites the case of users opening stories in tabs, which are all too easy to close—Yahoo hopes that a seamless browsing experience will deliver greater visitor retention, translating into longer sessions, and result in higher advertising revenue.

To the same end, Yahoo is bucking the industry trend by closely integrating user comments with its news feed. As most of the news industry moves away from comments onto social media, Yahoo is aiming to harness its community to engage users who previously only dropped in for a quick visit. It’s one of the riskiest aspects of the new design, because news sites worldwide are plagued by trolls in comment sections, and it only takes a few bad apples to make a comments section an unpleasant place to spend time. Unless Yahoo’s feed is diligently moderated it’s an approach that may well backfire.

comments

Yahoo’s new community engagement

Yahoo has never had a problem attracting visitors, it’s a household name around the globe; its problems stem from an inability to retain visitors once they hit the site. The hope is that the dual strategy of a seamless, personalized news feed, coupled with community engagement will be the formula Yahoo needs to carve out a new niche for itself.

LAST DAY: Massive Discounts on Stock Photos – 90% off!

Source

Vía Webdesigner Depot http://ift.tt/1QIyjas

CSS goes 3D with voxel.css

http://ift.tt/1PCYvy4

The web is often seen as a decidedly two-dimensional medium. And, to be fair, it is. That’s what it was designed for.

What’s more, the addition of three-dimensional graphics, rendered live, has traditionally required plugins. Macromedia gave us Shockwave, Unity gave us the Unity Web Player, and all the while, we’ve used 3D graphics for games, mostly.

HTML5, CSS3, and some inventive JavaScript have done a lot to change this, however. Oh, it’s still mostly used for games, but you can take it further, and integrate the graphics into a regular site more easily than ever.

Sure, we still have usability concerns. A site that depends on 3D graphics for navigation or essential content is still a terrible idea. However, when used with progressive enhancement, 3D is a viable, and even performance-friendly way to take things up a notch.

To that end, I present voxel.css.

voxel.css is a framework that uses CSS3 to do the heavy lifting of rendering 3D objects. JavaScript is used to add interactivity, trigger the animations, and pretty much everything else.

Style

Well, this is CSS we’re talking about. You’re not going to get Crysis-level graphics. As the name of this framework suggests, what you get is a lot of cubes. Think Minecraft in the browser. (And someone will build a Minecraft clone with this in three… two…)

Still, you can do some impressive things with blocky graphics. Think of it as taking 8-bit art to a whole new level.

Easy 3D rendering

The basic implementation of voxel.css only requires the inclusion of the library, and 15 lines of code. This creates a savable virtual scene where you can edit your models, point-and-click style.

You can then display these scenes to any web page, and animate them as desired.

Use any image type for textures

Use a PNG for transparency, a GIF for animation, or an SVG file for unlimited scalability. Use a JPG for reasons unknown, or the WebP format because you like things that aren’t implemented in all browsers yet.

There’s even a demo that uses live footage from your webcam as textures for the blocks.

GPU acceleration

Again, it’s CSS3. You can use the superior rendering power of a device’s graphics card (or chip, as the case may be) to display your work. You won’t have to worry about choppy graphics on anything but the slowest of mobile devices. (You should be using a fall-back for those in any case.)

Conclusion

voxel.css is a simple, no-nonsense way to get some three-dimensional goodness into your web app, page, site, or game. Try it out, look at the demos, and see if it’s right for your project.

LAST DAY: Massive Discounts on Stock Photos – 90% off!

Source

Vía Webdesigner Depot http://ift.tt/20uNy9T

Wednesday, January 27, 2016

8 more predictions for web design in 2016

http://ift.tt/23tnpuu

2015 witnessed a lot of changes and innovations, but 2016 has a lot more in store. With more people accessing the Internet via mobile devices than desktop computers, a sharp and continued decline in human attention span, and web users becoming increasingly impatient, the web design community is in for a treat this year.

If you are a web designer, or even if you have a website, you should pay attention to the following trends in 2016:

1. User-centered design

Research from Nielsen Norman Group shows that the average user spends 10 – 20 seconds on a web page before leaving, and that the only way to improve this is by having a clear value proposition. Interestingly, this also agrees with Google’s position when they released their Search Quality Rating Guidelines late 2015; one of the highlights of Google’s Quality Guidelines is that having content front and center is now a big deal: essentially, content that is placed above the fold will be ranked better than content that is hidden below ads, forms and other elements.

As we can see, whether it is in terms of users’ response or search engine algorithms, the importance of a user-centered design has never been clearer; in 2016, only websites with a user-centered design will thrive.

2. Expect to see more of Material Design

Material Design was initially announced by Google in 2014, as a design language that uses shadow effects, responsive animations and grid-based layouts to create a realistic design with a focus on UX.

For a very long time, adoption of Material Design has been limited to app design until Google announced Material Design Lite (MDL) in 2015; the aim was to make it easy to add a material design look and feel to your website.

Because of its focus on creating a minimal and realistic look, while still ensuring websites are fast and responsive, you can expect to see more of Material Design in 2016.

3. More of single page design

There’s so much clutter online today, which doesn’t seem to be dying anytime soon, and this has given rise to the popularity of minimalist designs; when we consider decreasing attention spans, increasingly impatient web users and a renewed desire for instant gratification, single page designs will gain more attention this year.

People no longer want to scroll through multiple pages, and many websites are keying into this by having a single-page design; a notable example is the World Food Clock website.

Single page designs work both in terms of UX and conversion, so you can expect to see more of single page designs in 2016.

4. Modular Design will become increasingly prominent

The average media site publishes dozens of articles every day, and content-rich sites have always struggled with organization; Modular Design solves the problem of clutter by making content more presentable using a block grid pattern.

Modular Design showcases more content while avoiding clutter, so you can expect to see more sites, especially media sites, jump on the bandwagon this year. A good example of a major publication that uses modular design is The Next Web.

5. SVG

Scalable Vector Graphics (SVG) became more prominent in 2015; even Google redesigned its logo to a cleaner, smaller SVG file. SVG is becoming more mainstream because it presents graphics as vectors that can scale irrespective of the resolution of the device they’re viewed on. It also makes it easy to create animated and interactive graphics, a feature that is becoming more important in an increasingly visual world.

The fact that pretty much every browser now supports SVG will further help its adoption, so expect to see SVG go mainstream in 2016.

6. Responsive web design

Okay, so responsive web design has been a trend for at least a few years now, but even more so in 2016!

For a long time, website owners have known of the power of responsive web design but they haven’t taken it as seriously until now; a major force in the increased adoption of responsive web design was the “Google Mobilegeddon” in 2015. Basically, this was Google’s attempt to ensure that websites adapt to mobile best practices, when it began to penalize websites that were not mobile-friendly. Many established sites suffered major loss, and they had to choose between having a mobile site/theme and going with a responsive design. This trend will continue in 2016, and you can expect to see more of responsive designs.

7. Widespread adoption of micro-interactions

Micro-interactions are contained product moments that revolve around a single use case. Web users encounter micro-interactions every day; when you update your status, or ‘like’ something, you are engaging with micro-interactions. Micro-interactions can create a better experience for users by enhancing their experience on a site, and its one more trend we can expect to see more of in 2016.

8. Speed is no longer a luxury; it’s a necessity!

In 2016, more than ever before, speed will play a major role: brands that ignore speed will suffer severely, as people are becoming increasingly impatient. This is very important for both website owners and designers.

A Microsoft study conducted in 2015, which studied 2112 people, revealed that our attention span has decreased massively over the years; from an attention span of 12 seconds in the year 2000, we now have an attention span of 8 seconds.

For a very long time, speed and usability have always gone hand in hand and this is becoming increasingly pronounced in 2016; research shows that slow websites cost the U.S. economy over $500 billion annually, and that 40% of people will abandon a website that takes longer than 3 seconds to load. Speed is a core part of design, and it’s a force website owners have to reckon with in 2016.

 

Featured image, web design image via Shutterstock.

84 PSD Mockups for Book Covers and Apple Products from iPhone to Macbooks – only $27!

Source

Vía Webdesigner Depot http://ift.tt/20sHkai