Popular Design News of the Week: May 8, 2017 – May 14, 2017

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.

Wireframes are Dead

 

17 Awesome Sources of Web Design Inspiration

 

15 Inspirational Examples of Minimal Web Design

 

Have We Entered the Era of Bad Graphic Design?

 

50 Best Resources When Learning to Code

 

Material Components for the Web

 

Design Principle: IKEA Effect

 

Visage 4.0: A Brand Design Tool for your Whole Team

 

20 Awesome Animated Infographics with Interactive Designs

 

OMG-IMG: Insert Icons Directly into HTML with Just One Line of Code

 

What’s Coming in WordPress 4.8 (Features and Screenshots)

 

Messenger – A Small Alternative to Slack

 

Basic Patterns of Mobile Navigation

 

Page Weight 2.0 – Find and Fix Heavy Images on your Website

 

Instagram Opens Publishing on the Web

 

The End of Web Forms

 

Creating your First E-Commerce Site: 13 Top Tips for Success

 

Illusion.ai – Conversational UI as a Service

 

Site Design: Sidewalk Labs, an Alphabet Company

 

Google’s Fuchsia OS Interface Hints at a Bright Post-Android Future

 

UberData: Designing with Real Data in Photoshop

 

The Weird Words and Phrases Designers Use to Test their Fonts

 

How to Boost Usability with Intelligent Color Choices

 

The Dark Secret at the Heart of AI

 

Designing Forms for Gender Diversity and Inclusion

 

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

Source

Comics of the Week #389

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…

Pain in the neck

Designer’s Mess

 

Changes coming…

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

Source

Free Download: 48 Nolan Business Icons by Icons8

We can never get enough icons, especially icons with a fresh approach to business concepts. So we’re delighted to be able to bring you this free set of icons designed by Icons8.

Created in their new “Nolan” style, the icons are great for adding some personality to an otherwise corporate site. Startups will love them, and they’re super flexible.

The 48 icons include UI elements like files and folders, app elements like alarms and email, and e-commerce elements like carts and charts. Some of our favorites include the goal icon, the loose change icon, and the Bart Simpson-esque check icon.

Every icon is delivered in EPS, PDF, PNG, and SVG formats. They are all free to download and use in personal and commercial projects. Download the file beneath the preview:

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

Source

How to Design Gesture-Driven UI

Remember the days when hovering and clicking with the mouse were the most used triggers for interaction with a site or app? Those days are gone. When Apple introduced the first iPhone, multi-touch technology became mainstream and users learned that they could not only point and tap on the interface, but also pinch, spread, and swipe. Gestures became the new clicks.

Today the success of a mobile UI can be made by how effectively it uses gestures.

How to Choose a Good Gesture

When it comes to incorporating gestures in your UI it’s essential to know your market and the other apps your target audience may be using. Try to employ the same types of gestures in your app. This way, you aren’t only optimising your UI based on your target market’s behaviour, but also designing a more comfortable approach for users right from the beginning.

Teaching Gestures

Gestures are a must in every mobile app but it’s always a challenge to make them obvious for users. Touch interfaces provide many opportunities to use natural gestures like tap, swipe and pinch to get things done, but unlike graphical user interface controls, gesture-based interactions are often hidden from users. So unless users have prior knowledge that a gesture exists, they won’t try.

Therefore design for discovery is crucial. You need to be sure you provide the right cues—visual signifiers that help users discover easily how they can interact with an interface.

Avoid Tutorials and Walkthroughs During Onboarding

Tutorials and walkthroughs are quite a popular practice for gesture-driven apps. Incorporating tutorials in your app in many cases means showing some instructions to the user to explain the interface. However, a UI tutorial isn’t the most elegant way to explain the core functionality of an app. The major problem with upfront tutorials is that users have to remember all of those new ways of using the app once they get in. Too much information at once might lead to more confusion. For example, the Clear app starts with a mandatory 7-page tutorial and users have to patiently read all the information and try to commit it to their memory. That’s bad design because it requires users to work upfront even before they actually try the app.

Educate in Context of the Action

When it comes to teaching users to use your UI, I would recommend doing so mainly by educating in the context of the action (when a user actually needs it). In order to teach people a new gesture you have to start slowly. Given some iteration, instructions can be transformed into a more gradual discovery. Use just in time tips and focus on explaining a single interaction rather than trying to explain every possible action in the user interface. Hint at gestures by providing obvious, contextual clues.

Below you can see a gesture education screen from the YouTube app for Android. The app has a gesture-based interaction but doesn’t use a tutorial to instruct users. Instead, it uses hints that appear on the first launch for new users, one at a time as the user reaches the relevant section of the app. The technique is based on text commands which prompt users to perform a gesture and describes the result of the interaction with a short and clear description.

Use Animation to Communicate Gestures

Gestures, usable as they are, would be nothing without animation. As a designer, you can make use of animation to convey information about available actions. For example, in order to make users aware that they can interact with a certain element, you can create a text command right on the interactive element and animate the result of interaction as shown in example below.

3

There are three popular techniques to help educate users, based on the use of animation. The first is a hint motion. Hint motion, or animated visual hint, shows a preview of how to interact with an element when performing the action. It aims to create associations between the gesture and the action that it triggers. For example, Pudding Monsters’ game mechanics are based solely on gestures, but they allow users to get the basic idea of what to do without having to guess. Animation conveys information about functionality—a scenario is showcased with animation and it immediately becomes clear to users what to do.

4

A second technique is content teases. Content teases are subtle visual clues that indicate what’s possible. An example below demonstrates a content tease for cards—it simply shows that other cards exist behind a current card and this makes it clear that swiping is possible.

The third and last technique that I would like to mention is affordance. You can give some elements of your UI a high affordance to point users to features in an interface, and use bounces or pulses as an indicator of an available gesture. An example of this technique can be found in Apple iOS. When a user taps the camera icon, the lock screen bounces up, revealing the camera app underneath.

Conclusion

While it’s true that touch gestures are mostly invisible to us, there are a number of design techniques that can give users a peek at what’s possible. Just in time tips, animation cues and content teases are some of the ways hidden gestures can be revealed.

Source

Opera is “Reborn”

Opera have released a major update to their browser. Codenamed “Reborn”, the new browser has been in development for months and includes several features that were pioneered in Opera’s experimental Neon browser.

The most prominent feature is the addition of native support for WhatsApp, Messenger, and Telegram, via the sidebar. Quick-access icons have been added for these services, and they’re always available via speed dial. If you like to chat while browsing you can pin the side panel in place.

Chat applications typically work best on mobile devices, but Opera assert—correctly in my opinion—that desktops are a more powerful multi-tasking tool.

Still, there’s no escaping the fact that desktops are, for the most part, work machines. Whilst native chat in parallel with your workflow is certainly useful—I would kill for a Slack panel built into Creative Cloud apps—it’s questionable whether WhatsApp is a great business communication tool. In actuality, Opera’s native chat is likely to disrupt more work than it facilitates.

This new direction serves a very small niche—users that work on desktop, with Opera as their primary work tool, and communicate via WhatsApp; it seems unlikely that this feature will be emulated across the industry.

Of course, the native chat proved popular enough in the Neon experiment for it to not only be ported into the main browser, but to be the central feature in Opera’s current marketing.

Happily, there is a lot more in Opera’s latest release: the browsing experience feels more modern; there’s a dark mode if you’re as tired as everyone else of inoffensive grey; there’s more control over ad-blocking; the whole UI has been updated, with redrawn icons for different pixel densities and some charmingly understated animation. On top of all of that, there’s the usual round of security and performance enhancements.

Sidebar

Opera is a good browser, and it’s incredibly healthy for there to be challenges to Google’s monopoly. What Opera does, it does well. However, what it lacks is a clear identity. As the new messaging features show, Opera still isn’t sure who its main user is.

Opera’s latest update is available as a stable release now, and will be pushed out to all Opera users over the coming days.

Source

Getting Started with Vue.Js

Vue.js is a micro JavaScript framework for creating reusable and reactive components on your site.

Front-end frameworks vary widely in both size and scope, where Vue.js stands out is in its minimal design and focus on adaptability. You have the choice of building your entire site using Vue.js, just a making a single element of your site reactive, or anything inbetween. Because of this, it is very approachable with a shallow learning curve.

In this article we are going to take a look at the core components of Vue.js and how to get setup and started, but first let’s take a look at when you would want to use a front-end framework like Vue.js and why.

Why Use a Front-End Framework

Front-end frameworks, like most frameworks come to abstract common tasks, the common denominator you find between projects. Vue.js specifically comes to abstract the process of creating HTML components which are dynamically updated through JavaScript.

A few of the pain-points that Vue.js solves for you, is generating the dynamic HTML, binding the HTML elements actions to your data keeping scope and context, and keeping track of when the HTML needs to be re-rendered automatically.

For example let’s say you have a page where you have a dynamic list of names. You may have written code that looks something like this:

When you build up the HTML manually—besides the fact that the code quickly becomes hard to manage in larger examples—there is no real connection between the data and the generated HTML. If the array of names changes you have to be aware of that and re-render the list. All this is also for just displaying dynamic data, if you want to add event handlers like an on click handler, in-order to save scope you will keep nesting your code further and further in:

With Vue.js you separate the HTML as a template which depicts what to generate based on the data given, and Vue.js will render it automatically.

This same example in Vue.js would look like the following:

We have full separation between the HTML aspects of the JavaScript code to the logic of the JavaScript code making everything self-contained and a lot more manageable. We are getting a bit ahead of ourselves though, let’s take a step back and look at how the core of Vue.js achieves this…

Data Driven DOM

At the core of Vue.js you define a correlation between your HTML and some data, and any time the data changes the HTML will be updated. The way this works is when instantiating a Vue.js component you pass it some data in the form of a JavaScript object, this object is then modified replacing its properties with trackable getter and setter methods.

Vue.js analyzes the data object while constructing the HTML and sees what data you used in-order to render the different HTML elements inside. Using this it monitors for changes made to the data object and knows exactly what to update and when.

Having such a tight binding between the data and the view drastically simplifies the development of front-end applications and minimizes errors due to misrepresentation. This separation of concerns allows you to focus on the logic of your application without needing to deal with updating the view at all.

Creating your first Vue.js app

Installation for Vue.js is as simple as including the library:

Now like I mentioned a Vue.js app is composed of a data object and an HTML template in which to embed the data. So for our first app to see Vue.js in action lets add to the body:

First we define a div which will be our HTML template for our Vue.js app. Inside we use the double braces for data interpolation into the HTML.

Inside the actual Vue.js app we simply define the data and connect the div as the element for the app to both render to and use as the template. Next, for added flare, we increment the count variable on our app once per second.

That’s all there is to creating a Vue.js application, opening this in your browser, you will see the page automatically updates every-time we update the data property.

Events and Methods

Now in most applications having the DOM react to the data being changed is only half the story, you also need a way to update the data, Vue.js takes care of this with events and methods. Methods are stored functions run in the context of your Vue.js app.

Let’s update our counter example to add the ability to start and stop the timer instead of it simply running:

In the HTML template, we added a button to start and stop the counter, to accomplish this we need the text on the button to be dynamic and we need an event handler for when the button is clicked.

To declare an event in Vue.js on an element, you prefix the name of any standard HTML DOM events with v-on:, so the mouseover event becomes v-on:mouseover or the keyup event becomes v-on:keyup. In our example we are using the v-on:click attribute to handle the click event.

Something you may have noticed is that for button’s text we are calling a method as opposed to just referencing a stored property. In many situations the data you store is not necessarily in the format you want to display it on the page. Methods can be used here to process the data, and all the reactivity you get from properties applies when using methods, if the underlying data changes the template will update accordingly.

In the Vue.js app, we now have a new property holding the timer variable, and some methods. The toggle method which is bound to the button’s click event checks whether or not the timer property is set, starting or stoping the timer respectively and the counterAction method is used to display the correct action in the button, again based on the timer variable.

Since the toggle method changes the timer property, and the counterAction method—which is in the Vue.js template—uses the timer property, any time toggle is called the template will re-render the button’s text.

It is worth noting that even though we don’t have an initial value for the timer property, it still needs to be declared when creating the Vue.js app. If you don’t declare the property from the beginning the property won’t be reactive and won’t cause the HTML to re-render when changed.

In our example, the view gets updated once a second while the timer is running, and so once a second our counterAction method will also be called when the button is redrawn. Vue.js lets us optimize this by caching the result of a method and only recalling the method if the underlying data specifically used in the method are changed. This is also useful if you use the same computed property in multiple places on the page, instead of processing the value multiple times, by caching the value, you can reduce a lot of overhead.

Let’s update the example to include cached properties:

The main difference besides for the caching, is that methods under computed are referenced as properties as opposed to methods, so in the HTML template we had to remove the brackets from counterAction.

Source

Is .Design the Must-Have TLD for Designers?

You’re a web professional, so we don’t need to explain the value of a good domain name. Your domain is your identity, and that’s priceless.

Sometimes it feels like an appropriate domain name is as hard to find as a unicorn playing an accordion. There’s a few tactics you can use, misspellings and hyphens being the most common, but that leaves you explaining away your poor domain name to every client you meet.

The best option, and the only really positive move, is the new TLD for designers: .design.

Branding with .design

For years, the accepted wisdom has been that you must register a .com, anything else is secondary. But for the design industry .design is now the must-have TLD.

.design domains work just like any other, but they immediately communicate to your clients what business you’re in. As a branding exercise, you can’t do much better than to put “design” front and center on everything you do.

What really makes .design stand out as a domain is that it’s an internationally understood word. From New York to Berlin, from Paris to Mogadishu, “design” means design to billions of people. And for millennials, “design” is as important as “cool” was to their parents.

The best thing about .design? The domain squatters haven’t moved in yet, which means you have a limited-time opportunity to register the domain you’ve always wanted, but couldn’t get.

Boosting SEO with .design

Despite rumors to the contrary, there is no inherent benefit in using .design over any other TLD; Google will not prefer your website when it ranks sites. It is possible that a .design domain benefits sites thanks to the keyword “design”, but the jury’s still out on that. And to the human eye, .design clearly communicates what you do and will provide context to your branding, boosting clicks and interest.

What is undisputed is that the best domain for your site, is one that is appropriate for your content. Rather than misspelling, or using hyphens, .design offers the opportunity to register a domain that is appropriate to the natural keyword searches users perform. There are simply more .design domains available to match your content.

Microsites with .design

.design doesn’t just work as a primary domain, it’s a sensational option for blogs, online style guides, media kits, and more. Huge corporations like Facebook and AirBnB are embracing .design to provide a home for, and give a voice to their design teams.

Most web users understand that domains other than .com, .org, and .net, indicate geographic specificity. For example, most users know that .ca is for Canada, and .jp is for Japan. What this means for .design is that users already understand it represents a specialism. A .design TLD tells people instantly that you’re a specialist in your field.

Register a .design

“Design” is reportedly the most common keyword in .com domains, which means it’s only a matter of time before the domain-squatters move in, register your domain on the cheap, and then demand $thousands for it.

Standing out from the .com crowd, with an appropriate .design domain name, is an essential choice for any design professional.

To help you grab the perfect domain for your design business or portfolio, the registrar Porkbun is offering an incredible deal to WebDesignerDepot readers: register your .design domain for just $5 for the first year. Every domain Porkbun sells always comes with free Whois Privacy and SSL certs as well.

Source

Smart Footer System Review: Enhance Your WordPress Footer

How much attention do you pay to your website’s footer? Is it an afterthought, or are you making your footer work for you? In my Smart Footer System review, I’ll show you how you can make your footer a working part of your website, as well as how you can display different footers for different types of content on your…. Continue Reading

The post Smart Footer System Review: Enhance Your WordPress Footer is written by Colin Newcomer and appeared first on WPKube.

The Best New Portfolio Sites, May 2017

Hello everyone! This month is a much more colorful month than the last few have been. It feels like designers have been shying away from the monochromatic beauties of months past, and are letting loose with the color palette.

I for one, am not complaining. I love my black-and-white-and-maybe-one-other-color affairs, but it’s nice to see some variety in the mix. And now, the portfolios:

 

Unconquered

Unconquered is a pretty metal name, and like many a metal band, they include their manifesto on their site. The site, however, touches on post-modern and 90s grunge. Then it slams you in the eyeballs with big, solid type, and striking imagery. You might feel a little bit confused by the time you get to the bottom, but you aren’t likely to forget what you saw.

Dilo

Dilo is a film productions company. Where many others opt for the default dark theme, or the usual video background, Dilo has gone all in on color. Every project page has a different color scheme. They also mix up the layouts depending on the project. It might be overcomplicated, but it shows their commitment to art direction in all things.

usTwo

usTwo is a veritable cornucopia of design trends with background video and all kinds of layout styles. The two things that really tie the whole design together are the typography and the near-constant onslaught of color. The result is playful-yet-professional look that works for them.

Yorh Ekin

York Ekin’s portfolio is an interesting departure from recent trends. It’s got that classic “corporate elegance” with thin type, and the liberal use of browns, beiges, and a little bit of burnt orange. Man, I haven’t seen a brown site this good since, well, I genuinely can’t remember. It’s strange for a site with such deliberately muted tones to stand out so much, but these are the times we live in.

I don’t know if swearing at potential clients in the fine print in the header is the approach I would use, but I respect his candor.

The Soulist

Federico Repetto is just one letter away from me making a Pinocchio joke. His website is an almost perfect representation of the post-modern aesthetic in web design, only a bit more colorful than other examples. This is mostly due to the imagery, but that counts. It’s stylish, it has lots of white space. What’s not to love?

Nahel Moussi

Where the last site was post-modern, this one is almost post-minimal. It starts with a simple horizontal slideshow, and then transitions into case studies that focus almost entirely on the imagery. Text is kept to a bare minimum, but what there there is is beautifully set.

Eien

Eien, on the other hand, uses only typography to make its first impression. There is imagery — you almost can’t have a visual portfolio without it — but there’s a distinct impression of balance. While there aren’t paragraphs upon paragraphs, the text is definitely a part of the story of each design, as opposed to a simple summary.

Other than that, it’s a lot of white space, a little animation, and a fairly standard layout. But even so, it’s so well executed, it’s worth a look.

Bleed

Now Bleed really sounds like the name of a metal band. The logo even looks like one. It’s an interesting contrast to the rest of the site’s design, which embraces the collage-like post-minimalism that we’ve seen a bit of. That said, it looks good.

Chaptr

Chaptr brings us some classic minimalism. It’s got white space. it’s got great typography. it’s got huge images all over. It’s here because it looks good, and works well. I’d pay special attention to the way they organize small amounts of text on large screens, and the way they choose their imagery.

Ruslan Siiz

Ruslan Siiz’s portfolio may engage in some collage-like layout patterns, but the real strength is in the typography. Even with the large empty spaces, the design always feels…full, but never cluttered. And that’s due to the way the designer uses type. It’s a difficult balancing act that Ruslan pulls off well.

Glitch Paris

Well, the horizontal-slideshow-on-the-home-page thing might become a trend. Glitch Paris is doing it too, and combining it with a bit of video. It’s a simple, but effective strategy. Warning: while there is no audio on the home page, clicking through to a project will start the video immediately.

Orthonormai

Orthonormai is yet another example of post-minimalism, but with color! Give it a look. Frankly, I’m starting to think vibrant color is a drastic improvement to this style of layout.

Five & Done

Five & Done is one more Powerpoint-turned-website, and this one experiments with reflections, as well as animation in general. Most of the text is a bit small for a website in this day and age, but overall, it’s a good-looking site. I’m a fan of the art direction they put into it, and the way they change things up depending on the type of content they’re working with.

Yannick Chapron

Yannick Chapron has embraced a trend that we’re actually seeing less of, these days. It’s the Powerpoint portfolio, brought back from near death! I can never recommend these sites as a study in accessibility, but they nearly always have some interesting animation and motion design. This site will be hell on your scroll wheel, but it’s still fun to look through.

Jérémy Levron

Site’s that incorporate playful elements can actually make me overcome my distaste for JS-reliant sites. Jérémy Levron’s portfolio does this by turning the home page into a canvas where anyone can paint. Just click and drag to start.

The entire site is a high-contrast monochromatic affair with good type. That would not be enough to set it apart from so many other sites. That home page, though? That does the trick.

Andy Smiff

This portfolio from Andy Smiff is a good example of a site where the personality is all in the details. The layout won’t win any awards for crossing boundaries, but the use of color to accentuate small elements tells you about the thought and care put into the design as a whole.

Tom Treadway

Tom Treadway’s site gives us that asymmetrical, elements-overlapping, grid-as-the-background feel that we’ve all come to know and…well, I’m not about to make any assumptions about how you feel. I like the aesthetic well enough, but Tom takes a step further by using intensely-colored imagery. Sure, it’s a filter, but that filter is being used artistically, to establish a theme for his website.

eightweb

If eightweb’s site looks a lot like a WordPress theme, that’s because they specialize in WordPress sites. I mean, where else could you get away with intentionally making a site that screams “WORDPRESS!”, right? I have been slowly developing an admiration for designers that play to their customer’s expectations like this. It’s good for business, and therefore, it’s good design.

Bureau for Visual Affairs

The Bureau for Visual Affairs isn’t actually as official as it sounds. But the official-sounding name is just the start of a theme. The whole site has that modern minimalist feel, with sans-serif type, and lots of thin borders all around.

However, thanks to the liberal use of imagery, and some subtle background video, the design feels a lot more “alive” than many of its counterparts. Yes, I said “subtle background video”.

Source

Popular Design News of the Week: May 1, 2017 – May 7, 2017

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.

Eight Design Trends Taking Over 2017

 

How to not Suck at Design, a 5 Minute Guide for the Non-designer

 

RAGrid.css

 

Stunning Examples of White Space… that Aren’t White at all

 

YouTube’s Redesign is Official, and There’s a Dark Mode

 

Introducing Sizzy – A Tool for Developing Responsive Websites Crazy-fast

 

My List of Essential Tools and Apps for Design & Front-end Development

 

The Web Page to Calm a Stressed Designer.

 

Timber.io Redesign

 

Making your Design Optically Perfect

 

Don’t Mess up your Grid like Medium

 

CSS Grid in Production

 

FUSE — a Curated List of Websites, Art + Design, Videos, Articles & Music

 

Wireframes are Dead—why I Haven’t Used Wires in Over A year

 

Why Writing is the Most Important Skill In design

 

The Real Effects of Bad Web Design

 

Dubai Introduces its own Font, Lauding Free Expression it Does not Permit

 

Monte: All in One Platform for Building Websites

 

JIGGY: Build Modern Websites with your Existing Data

 

Storyboarding Vs. Prototyping: When to Use Each

 

See all Colors and Fonts a Site Uses

 

Atlassian Design Manual

 

How to Find Freelance Design Work (updated)

 

Throwing Out the Brand Book: The Power of Unbranding

 

Science Fiction Interfaces

 

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

Source