Popular Design News of the Week: June 12, 2017 – June 18, 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.

RIP Web Forms – You will not Be Missed!

 

10 Common Mistakes When You Create Website Buttons

 

How 17 Lines of Code Improved Shopify.com Loading by 50%

 

New & Improved Google Design

 

The Web Designer’s Guide to Flexbox

 

The App that Does Nothing is What your Smartphone Needs

 

Nutella Uses an Algorithm to Design Millions of Unique Jars

 

AmplitudeJS: The HTML5 Audio Player for the Modern Era

 

iOS 11 Preview

 

A Better Web Launch Checklist

 

Houzz: A UX Case Study

 

2017 Logo Trends

 

10 Basic Principles of Visual Design

 

Programming is not a Craft

 

Crello: A Graphic Design Tool for Everyone

 

Why Green Branding Needs to Die

 

How to Create the Perfect Design Resumé

 

Topol.io: Beautiful HTML E-mails Easily

 

Why Scalable UX is the Next Revolution

 

This Tool Reveals What WordPress Plugins & Tools Other Sites Use

 

Binky – A Fake Social Media App that’s Better than the Real Thing

 

The Perfect Paragraph – A Web Typography Learning Game

 

25 Sites to Download Free Stock Images in 2017

 

Results of the Ultimate CSS Survey 2017

 

An Interesting Day 2017

 

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

Source

Comics of the Week #394

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…

Job security, but…

Designer simulator

 

Insecure designer

 

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

Source

Twitter Launches a Redesign

Twitter is launching a redesign of its iOS, Android, TweetDeck and Twitter Lite apps. The redesign is intended to make the service “feel lighter, faster, and easier to use” and features a number of changes that mean an update is pending for twitter.com too.

As with any redesign, there’s some good, some bad, and some probably-ok-once-we-get-used-to-it.

The new design is expected to start appearing worldwide over the coming days and weeks, although much of the update seems to be aimed at bringing iOS in line with Android meaning iOS users will likely notice the changes first.

Twitter’s biggest UI fail still hasn’t been fixed

Like Twitter for Android, Twitter for iOS now puts all your settings, profile, and access to additional accounts in one place, keeping the main UI focussed on the primary functions. Links now open in Safari viewer, so if you’re signed in to other services, your login will be carried over.

iOS and Android versions now update live, so you can see your retweets, likes, and replies ticking up without refreshing.

Typography has been refined across the board for greater consistency and bolder headlines. There are also improved accessibility options, including increased color contrast.

Twitter’s biggest UI fail still hasn’t been fixed: Despite the fact that the majority of users tweet in a language that’s read top-to-bottom, the Twitter feed is still laid out chronologically from bottom-to-top. This means that new tweets are added above older tweets. The logic is then overturned by replies, which appear below the original tweet. This results in a series of awkward saccades as our eyes—and thumbs—flick up and down the feed.

The most notable changes are the new icon set. The home icon now looks a lot less like a birdhouse; the notifications icon has lost its angle—and its character with it; the direct message icon has been distorted, it now fits the scale of the other icons, but consequently looks less like an envelope. These icons were already really well designed, and probably should have been retained.

However, there is a huge positive change to the reply icon: the previous version was commonly misinterpreted as a back arrow, the new version is a speech bubble, indicating a conversation. Not only does this clarify the function, but it redefines the concept from ‘reply’ to ‘discuss’—a far more open and egalitarian action.

Source

4 Tips for Building a Standout Creative RéSumé

Most of us are familiar with the saying, “Show, don’t tell.” For those of us working in creative industries, this should be your mantra when building up your résumé. With the rise of the gig-economy and freelance job platforms, which are now home to an abundance of talented freelance designers, illustrators and more, it’s essential when looking for work that you build a stand-out résumé.

Before you start filling up the pages with every job you’ve ever had, it’s important to consider the various factors that make a great résumé. Whether you’re a writer, designer, or content marketer, a good résumé has to showcase your best work in a professional, inventive manner. For creative types, a great résumé is like telling a story. So before you hit the ground running, here are 4 tips for building a standout creative résumé that will help you along the way.

1. Invest in a Portfolio

When it comes to applying for jobs and projects within the creative industries, having a portfolio is a must. This is especially important if your work is primarily visual. For example, even if they already have a perfect résumé, the majority of designers today compliment their CV’s with an online portfolio. And, thanks to the likes of user-friendly platforms like Squarespace, Wix, and WordPress, it’s pretty easy these days to get your site up and running in no time.

No matter your expertise, it’s vital that your portfolio makes a great first impression. Ensuring that your portfolio is user-friendly, will allow potential clients and employers to get a sense of your skills right off the bat. So when you are ready to send over your résumé, remember to include a link to your portfolio in the contact information.

2. Do Not Show Off Just Yet

While developing your résumé, it’s important to not show off too much. Save the bulk of your creative energy for when you actually get the job. Striking a balance between eye-catching material and a professional format is key when still in the application process. If you are a designer or an illustrator you may certainly be tempted to jazz up your CV, but in most cases, it’s better to keep it simple. If your work is dependent on visual content, make sure you stick to just a few examples of your best work.

Again, having a digital portfolio will be where you’ll place the bulk of your visual work, letting your CV act as a foundation.

3. Content is Key

You don’t have to be a professional writer to ensure that your résumé has great content. If you struggle with expressing yourself through the written word, you can start off by making a list of the most important elements of the work you want to add to your résumé. If you have exhibited work for example or contributed to multiple freelance projects, make sure to stay bare bones. There is no need to write an essay about each project, even if it might be tempting. Better to stick with the “who, what, when, where, and if relevant, maybe give a couple of sentences highlighting “why”.

After you’ve finished writing, don’t forget to proofread your CV! It may sound obvious, but a surprising amount of résumés are still submitted with typos. It’s always a good idea to print out your résumé, read it aloud, and make sure you cross your t’s and dot your i’s.

4. Tell a Story

There was a time when résumés were expected to follow strict guidelines, asking potential employees to give information about education, previous work experience, and additional skills. But that was also a time when people had way fewer jobs during their working years. Today, especially if you’re freelancing, you may have more jobs in the last 6 months than some people will have in their entire lifetime.

Instead of overwhelming your potential employer with superfluous details from each and every project you’ve ever worked on, focus on your more interesting work. Imagining your résumé is like telling a story, where your best work represents the milestones of your experience. Again, this is the story of your work life, so make sure it’s one that keeps your audience enthralled.

Source

Supercharge Your Site With a CDN

As a web designer, you already know that great design is essential for a website—it’s the concept of design you trust, unless a website looks absolutely amazing, it’s going to be hard for new visitors to trust that site. That’s how essential great design is to a website.

However, there’s another essential part of having a trustworthy website, the positive UX which comes with a fast, snappy website.

After great design, speed is one of the most important factors which contribute to the success of a website.

But Why is Speed so Important?

The importance of a fast website has been researched over and over again.

Sites which are not fast enough create a negative perception, with the actual loading time of a site significantly affecting the conversion rates of websites.

As the loading time gets higher and higher, the conversion rate goes down significantly, with the optimum conversion rate happening at a page load time of 2.4 seconds.

What is a CDN and How Can it Help Speed Up My Sites?

Whilst there are many benefits to using a CDN which we will discuss shortly, there is one basic premise of how a CDN makes your site faster.

Simply put, a CDN is much better equipped as a network to handle the traffic of a website than most hosting services.

Shared hosting is typically optimized towards delivering a stable environment where your website can run PHP or other popular hosting environments.

It’s not geared towards optimizing for speed most times.

On the other hand, a CDN’s primary aim, and actual infrastructure setup is geared towards helping deliver a lightning fast website.

But how does a CDN actually speed up my site?

How a CDN’s Infrastructure Speeds Up Your Site

There are a few reasons why your website could be slow:

  • your shared hosting server is overwhelmed and responds slowly;
  • the images and content of your site are large and take a lot of time to download;
  • your website is using too many different scripts and images which are not optimized for a fast loading website;
  • the server location of your site is in a geographically different region than the visitors of your website.

There are other reasons, but these are the major ones.

You can address each and every one of these individually, we’ll focus mostly on the latter two here…

Your Shared Hosting Server is Overwhelmed and Responds Slowly

Shared hosting servers are not meant to be fast. They are meant to be affordable.

The economics of shared hosting means that to drive down the costs, the number of different websites hosted on the same server is significantly high.

That means, each time somebody visits your website, the hosting server is competing for resources with ALL of the websites hosted on the site, which means it typically takes more than a second to start serving your website.

Now, when we’re talking about making a website, a penalty of a second before we start doing any optimizations is a terrible way to start.

So a couple of recommendations:

  1. If your website is hosted with WordPress, you need to find a reliable WordPress hosting company, with great reviews, which is not cheap.
  2. Opt for a higher payment plan, ideally a VPS, such that your site will have enough resources and won’t be competing with hundreds of other sites

The Images of Your Site are Large

One of the largest impacts your site can have in terms of loading time, typically comes from the images hosted on your site.

You’ll find plenty of blogs touting the value of using images in your website and blog, and of course, this is excellent advice.

Images are necessary to break up large chunks of text and make for better readability.

Who also hasn’t heard of the phrase: “An image is worth a thousand words”

Yes, images are vital to the success of your site.

Yet, they have a drawback.

Unoptimized images can kill the loading time of your site.

Now, in an ideal world, we’d take the recommended approach of saving each file in a web-friendly format, optimizing large images and compressing them to a size which is acceptable without losing any of the quality.

Yet in reality, we simply don’t have the time or the inclination to go through an optimization process for each and every image.

But, there is a solution. Automation.

Once, again, CDNs come to the rescue. Image compression and optimization is typically a built-in feature of a CDN.

In essence, you go about your business of creating a great-looking website with awesome imagery, the CDN will handle the compression and optimization of the images.

Your Website Uses a Lot of Scripts

This is another speed killer.

When we are just starting out as web designers, we enjoy discovering new plugins and testing them out and installing them on our website, never realising what the impact of the plugins will be.

Even established web designers tend to fall into this trap. Using tens of plugins to make sure the functionality required by the customer is delivered has its side effects.

In reality, each plugin you install on your site adds Javascript files, CSS files and requires more performance from your site.

You’ll see that in the form of a lot of requests on performance testing sites and a very-long loading time.

Again, a few recommendations:

  1. Keep your site as lean as possible from plugins, less is more
  2. Combine, compress and minify scripts
  3. Enable HTTP/2

Whilst a CDN won’t help you decide which plugins to keep and which plugins to dump, a CDN is able to actually perform on-the-fly compression and minification of scripts, to make the total size of the content of your site smaller, and thus faster.

The third and very important recommendation is the setting of HTTP/2 – we’re not going to go into much detail, because we’ve already discussed HTTP/2 extensively, both on this site and elsewhere.

HTTP/2 has been written specifically to optimize the loading time of websites, particularly those websites which have a lot of different resources to serve.

Most CDN services allow you to quickly and easily enable HTTP/2 on your website giving your site an instant speed boost.

Even if you’ve done all of the above optimizations, there’s still one thing which can totally kill the speed of your website.

How do you fix that?

The Location of Your Website Server

Ok, if you’ve followed our advice your website should now be significantly faster than it was before.

But, there is one thing which can kill your website’s loading speed.

If your website is aimed at a local audience, your solution is simple: choose a good hosting service which is as physically close to your target location as possible.

However, this is more difficult if your if your website is catering for an international audience.

You simply can’t chose a server location which is physically close to all of your website visitors.

You can do the next best thing and host in the visitor location which is the most popular, but there’s a 2nd, more effective solution.

A CDN service is aimed specifically is fixing this problem.

A CDN’s infrastructure is designed specifically to fix the problem which we have just described.

CDN’s have a network of hundreds of servers in tens of locations around the globe. These servers called edge or caching servers will replicate your images and static resources such as Javascript and CSS files to these locations.

When a user then hits your site, the heavy resources will get served from a location which is as physically close as possible to your visitor.

This reduces significantly the problem of distance and gives your site a very significant advantage in terms of loading speed.

How to Setup a Free CDN

The great thing about using a CDN, is that you can easily boost the speed of your website without having to pay anything extra, particular if your website is still growing.

Most CDN services offer a free plan, which will provide the essential caching functionality we discussed above. Typically, besides content optimization, you’ll also got a boost in your website’s security too, through the security mechanisms implemented by CDNs.

As your website grows and the needs of the site grow, you’ll then be able to upgrade to a plan which suits your needs better.

There are a couple of ways of setting up a CDN, this mostly depends on the actual CDN you will be using.

Install a CDN Plugin

The first way of setting up a CDN is by using a CDN plugin. When setting up your CDN, you will get a URL which will be the new location of the static images of your site.

The CDN plugin will rewrite the URL of static resources such that they will be served from the CDN.

https://www.example.com/images/logo-default.jpg

is now rewritten as

https://cdn.example.com/images/logo-default.jpg

You’ll need to perform a few slight changes to the DNS entries of your site, such that cdn.example.com will resolve as the URL provided by your CDN.

You can use the CDN Enabler plugin if you’re using URL rewriting service such as KeyCDN (the authors of this plugin),  MaxCDN or Incapsula.

Once you’ve installed this plugin, the only thing you’ll need to do is enter the URL provided by your CDN service, and you should be good to go.

Install a CDN as a Reverse Proxy

Another, better way of installing a CDN is using a reverse proxy.

This also requires minor changes to your DNS, which are typically specific to the CDN you will be installing.

This implementation is advantageous because it removes a significant load from hitting your server directly.

Are You Ready to Take Your Website to the Next Speed Level?

As we’ve seen above, installing a CDN is not as prohibitive in terms of price as one may think. Besides that, the performance boost given to your site will be a significant UX improvement.

If you’re looking to speed up your site quickly, a CDN is a must-have.

Source

3 UX Rules for Conversational UI Design

You may have heard that “conversational interfaces” are the new hot trend in digital product design. Industry leaders such as Apple, Google, Microsoft, Amazon and Facebook are strongly focussed on building a new generation of conversational interfaces. Several trends are contributing to this phenomenon—artificial intelligence and natural language processing technologies are progressing rapidly—but the main reason why conversational interfaces become so important is pretty obvious: Chatting is natural for us since we primarily interact with each other through conversation.

What is a Conversational Interface?

A conversational interface is an interface that mimics chatting with a real human. Conversational Interfaces are currently of two types:

  • Chatbots (Facebook’s M Virtual Assistant)
  • Virtual Assistants (Siri, Google Now, Amazon Alexa etc.)

Building a genuinely helpful and attractive conversational system is still a challenge from a UX standpoint. Standard patterns and flows which we use for graphical user interfaces don’t work in the same way for conversational design. Conversational interface design demands a fundamental shift in approach to design—less focus on visual design and more focus on words.

While we still have ways to go before best practices for good UX in conversational interfaces are established, we can define a set of principles that will be relevant both for chatbots and virtual voice-controlled assistants.

1. Clear Flow

One of the most challenging parts of designing a system with good conversational interface is to make the conversation flow as naturally and efficiently as possible. The major objective of conversational interface is to minimize user’s effort to communicate with the system. You want your conversational interface to seem like a wizard, rather than an obstacle, right?

Defining the Purpose of the System

Don’t try to design your system to do everything all at once. It’s better to create a specialized, purpose-driven chatbot/voice assistant to engage your target audience. It’s important to anticipate users’ needs and provide the right solutions with minimum user input. Answering on following questions will help you to define the purpose of your system:

  • What user/customer problem will it solve efficiently?
  • How will it benefit the target audience and you?

Provide Hints

The biggest benefit of the graphical interface is, that it shows you directly the limited options it is capable to fulfill. Basically, what you see is what you get. However, with conversational interfaces, the paths that the user can take are virtually infinite. It’s not a surprise that two questions most frequently asked by the first-time users are:

  • “How can I use it?”
  • “What exactly can this thing do for me?”

Users aren’t going to know that some functionalities exist unless you tell them, so it is important to guide the user promptly to start the conversation by telling them to how/where to start and how the conversational interface can help them. For example, if you design a chatbot you can start with a quick introduction and a straightforward call to action.

Avoid Asking Open-Ended and Rhetorical Questions

There are two types of questions:

  • Closed-ended question (e.g. What color shirt are you wearing?)
  • Open-ended question (e.g. Why did you choose this color for your shirt?)

While open-ended questions may seem the best in terms of human conversations, it’s better to avoid them whenever possible because they usually result into more confusion. Also users’ answers on open-ended questions are much harder to process for the system (the systems are not always smart enough to understand what the answer means).

The same goes for rhetorical questions. Most users tend to respond to them anyway, even if the system is just being polite.

2. User Control

As one of the original 10 Jakob Nielsen’s heuristics for usability, user control and freedom remains among the most important principles in user-interface design. Users need to feel in control, rather than feeling controlled by your product.

Provide Undo and Cancel

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state. A standard GUI allows you to refine inputted data easily when processing it. Conversational interfaces should provide the same feature: neither conversation interfaces nor humans are perfect, so undo and cancel are essential functionalities for a smooth experience.

Make it possible to start over

Users should be able to reset the conversation at any time during the interaction.

Confirm by asking, not stating

In order to eliminate error-prone conditions it’s important to repeat and get a confirmation from users after they provide an input (especially for critical inputs such as payment information). Formulating confirmations as questions allows users to correct their input:

  • If the answer is valid, repeat it to ensure that everything is correct, and then move on to the next step.
  • If the inputted data isn’t valid, explain again what kind of answer you need.

Provide help and assistance

Add help messages and suggestions for when the user feels lost.

3. Personality

Not only the flow of the conversation is important, it is also important to make the conversation sound natural.

Humanize the conversation

Nobody enjoys talking to a robot that actually sounds like a robot. Follow the same user flow as you would if you were actually speaking to a person and be sure to design a system whose vocabulary and tone resonates with your target customers.

Be concise and succinct

Long sentences sounds like paragraphs. But people don’t speak in paragraphs, we usually speak using single short sentences. Avoid asking multiple questions at once, request information from the user or ask questions one by one. Once you get the right information, proceed to the next thing.

 

Source

10 Sites Doing Vertical Navigation Right

The majority of web navigation menus flow horizontally across the page. This comes from a history of traditional monitors being wider rather than taller.

But with so much screen space it’s now possible for websites to use vertical navigation menus instead. And many of them look fantastic.

These 10 examples of vertical menus are perfect to study for the unique design style and distinct usability.

1. Petersham Nurseries

On the Petersham Nurseries website you’ll find a nested vertical navigation. This technique is not something you’ll find very often but it works well on this site.

Each main nav link uses an icon in the background to convey the links visually. And the first two links open sub-menus aligned next to the primary menu. These take the place of dropdowns which you typically see on horizontal menus.

This site is responsive so at smaller sizes these links disappear behind a hamburger menu. This creates a reasonable divide between desktop users with enough space for vertical links, and mobile users who do better with a horizontal navbar.

2. Arbor Restaurant

Another very unique example is Arbor Restaurant which has a clean vertical nav with plenty of space between links. The content appears in a sliding container which also aligns vertically next to the navigation.

This content style is pretty unique. Most vertical nav sites keep their content aligned with the main page, but in this case you can show/hide the content with ease. It adds a certain flair into the vertical navigation which keeps the page’s momentum flowing down with the content.

3. Smokey Bones

Smokey Bones has two things going for it: awesome food and a killer website.

Every page uses the long vertical navigation fixed to the left-hand side. This is a staple for most websites because the majority of western readers consume content from left to right, and the top-left corner is the traditional place for a site logo.

One added feature I like is the menu flyout listing all the restaurant’s dishes. If you click the “menu” link you’ll see how this also works like a sub-menu added vertically. Definitely a cool idea that works well for a small restaurant site.

4. Mammoth Media

When you have less content you can get away with more offbeat navigation choices. Mammoth Media is a good example which only has five main pages on their site plus a blog.

One specific facet of this navigation is the hidden dropdown feature. If you click the “work” link you’ll get 2 alternative links you can click through. They appear beneath the main link so they take the role of a smaller dropdown.

Even on mobile this navigation follows a similar style. It’s proof that when you don’t have too many links you can really push creativity.

5. Amazon

Everyone and their grandma knows about Amazon. The online retailer has an amazing selection, but they also have a fantastic UI design with vertical nav links on product search pages.

Amazon has dozens of categories for every search term. This means they need a way to present refined search features without overcrowding the page. Vertical navigations just make sense because they can tuck away to the side while still being fully accessible.

If you’re designing any similar type of filtering nav I definitely recommend studying Amazon’s strategy. They’ve optimized their site to no end so there’s plenty of reason to believe their vertical sorting links work well.

6. Corum

Corum’s website has another clean vertical navigation, with very simple features. All-caps links, dark text, clear hover styles and a strong contrast against the main page.

This is one of the biggest aspects when designing vertical navigation. You typically want to create a strong divide between the vertical navigation bar and the page content. In this case it’s done using a lighter background color with the Corum logo near the top.

And mobile responsive users instead get a dropdown menu which works well as an alternative for screens that are longer than wider.

7. Nua Bikes

One of the best ways to use a vertical navigation is with a single page layout. Informational sites like Nua Bikes don’t always need dozens of pages full of content.

So with a vertical nav menu it’s far easier to browse through content on a whim using animations and custom page areas. In this case the Nua Bikes nav does blend into the page since it’s directly tied to all the content on that page.

8. Michael Ngo

Another site that follows the single page vertical nav trend is Michael Ngo’s portfolio.

It has quite a captivating header image which immediately grabs your attention and draws you in. But the content is the most interesting part since it all works through 3 different links: home, work, and contact.

The nav links have their own subtitles too so you can see what they do even at a glance.

One thing to note is how the nav stays fixed while scrolling down the page. This keeps all links accessible from any point which is crucial in a smaller vertical menu.

9. Medienstadt.koeln

The German site Medienstadt.koeln has quite a different take on vertical navigation. Their nav remains hidden behind a hamburger menu at all times, but it still spans the entire height of the screen.

It also includes more links than just the typical top horizontal nav. This makes sense but can be confusing to some visitors.

What I like most about the vertical style is how it stays tucked away even on desktops until needed.

Granted there are debates about discoverability issues with hamburger menus. But I think this icon is quickly becoming recognized and this design is an excellent example of a hidden vertical navigation in action.

10. The Metrick System

The ad agency Metrick System keeps their navigation simple and to the point. It does follow the vertical style but it’s also much different than all the others in this post.

I like the hidden dropdown that only shows extra links when a primary link is clicked. Their “journal” link is a good example. New links appear off to the side and they fade into view with a single click.

Mobile users get a similar experience except these sub-menu links appear beneath the main link. But this nav is so small that it can work for pretty much every screen size.

The Wrap Up

Vertical navigation works best on sites that rely on extra screen space. These typically include portfolio sites, restaurants, small businesses, and ecommerce shops.

But regardless of the site you can always try to add a vertical navigation into your design. And I hope these examples can get you started with some great ideas for wireframing and mockup design.

Source

Beaver Themer Review: Build Page Templates With Ease

The original Beaver Builder plugin lets anyone create their own WordPress theme from scratch. It’s a powerful plugin and it comes with so many default features for customizing the look, style, and functionality of your WordPress website. Recently the team announced a new product called Beaver Themer. This is technically an add-on to the original Beaver Builder plugin and it’s…. Continue Reading

The post Beaver Themer Review: Build Page Templates With Ease is written by Jake Rocheleau and appeared first on WPKube.

20 Best New Portfolio Sites, June 2017

Welcome readers, it’s June, and the Brutalism bug is back. No, really. After disappearing into the phenomenon I called “post-minimalism”, plain old Brutalism seems to be making a comeback.

Oh, it’s had a few refinements; good designers would never let their brutalist sites actually look bad. But the underpinnings of the style are definitely there, and present in more than a few of this month’s entries. Beyond that, it’s a fairly varied assortment of portfolios for you all to dig into. Enjoy.

UI Viking

Our first entry this month is actually from a designer we’ve featured before, only he’s gone and redesigned his portfolio. The inimitable UI Viking brings us a star-studded design that’s just plain loaded with color, personality, and illustrations of a badass viking. In space. In true commitment to the joke, things like “continue reading” buttons on the blog say “Kill This Post” instead. The contact form says, “ODIN OWNS YOU ALL! I’ll respond you ASAP… between robberies and lootings.”

Overall, it’s a great-looking site that—despite the inherent simplicity of the layout—is just overflowing with personality. You’ll never mistake it for being anyone else’s work.

Nick Jones

This is the first time I’ve ever seen a website designed around a golden spiral. Nick Jones’ portfolio is exactly that, and it feels ingenious. Hit the down arrow on your keyboard (or click any of the content cards), and you’ll spiral right on into his site, giving the experience a weird feeling of depth.

It’s playful too. Go to the site and hold the up arrow. Just try it out. The whole site is pretty, though the text might be a bit small. It also loses points for not letting me use my scroll wheel to move into the site. I mean, it’s the one kind of site where I might forgive scroll wheel hijacking.

On the other hand, it gets massive points for having a more accessible version that is linked to right at the start.

Senthil

Senthil’s portfolio just about makes me nostalgic for the days when everyone wanted their site to look like Apple’s. Oh, this is by no means a rip-off, but the influences are certainly there. It actually reminded me of the beautiful things inherent in this kind of minimalism: the perfectly distributed white space, the type, the focused use of imagery…it’s all there, and it all still works.

Rick Waalders

Longtime readers of this series will know how I feel about the over-use of animation, and how that can affect accessibility. On the other hand, there’s something to be said for just going all in like Rick Waalders.

The site looks good, with solid type, plenty of contrast for the dark layout, nice color palette… oh, and the huge spinning 3D thing that stays with you throughout the whole site. Every element is pretty much animated out the wazoo. In a weird way, it works. I guess if you’re going to create an experience like this, you may as well commit.

Doberman

Doberman is a design firm that likes to mix things up, apparently. Their use of collage-style layout, color, and typography combined leave me feeling like the site is a mix of post-minimalism and brutalism. It’s not often you see a designer successfully tie two bandwagons together and charge ahead at full speed, but that seems to be what happened here. The clash of styles is surprisingly effective.

Leszek Juraszczyk

Leszek Juraszczyk’s portfolio is almost aggressively post-minimalist. From the monospaced type to the bare-bones layout, to the near monochrome palette, it hits all the right notes. It also looks refined, and elegant even, with some of the imagery overlapping other elements to give a sense of depth. This is everything ’90s print designers dreamed of when they started designing websites too.

Roger Burkhard

Roger Burkhard has opted for a horizontal layout to showcase his projects in a somewhat brutalist—but still good-looking—design. As this style permeates the rest of his work, it seems appropriate.

Mario Hugo

People involved in the arts seem to adore masonry layouts and serif-laden type. Mario Hugo is no exception. It’s a fairly simple site whose only concession to flashiness is the fact that the gallery thumbnails rotate when you hover over them. For all that, it’s well-made and just plain pleasant to look at. Part of that is the organization. Part of it is the focus on putting the art front and center.

Chris Biron

Chris Biron’s portfolio believes in keeping it simple. no really, it says that on the home page. The rest of the design lives up to the promise, with a simple, minimalist layout. The site is stylistically separated from others by skewed text, and slight ripple effect when you hover over images. All in all, it’s well done, if occasionally reminiscent of WordArt.

dn&co.

dn&co. puts the work front-and center, with just the slightest hint of brutalism hiding around the literal edges of the design. And between the images in the case study. Well, it’s either brutalism or post-minimalism, and I’m having a hard time telling the difference at this point.

Cole Townsend

Cole Townsend’s portfolio reads a lot more like a resume, and studiously avoids using images. Always a bold choice, as you have to rely on the user’s willingness to click through links. That said, the text is very beautifully laid out, so I enjoyed this one nonetheless.

Kennard Lilly

This is certainly one of the more colorful portfolio entries this month. The use of a painting as the background gives the site an unforgettable style, even if it sometimes makes the text hard to read. This is toned down when you click on a portfolio piece, but you still get the sense that “vibrant artsy stuff is going down” all throughout the site.

Julia Chistiakova

Julia Chistiakova’s site is every bit as colorful as her illustration and web design work. It also uses simple gallery that makes use of modal windows to present each case study. Despite its simplicity, it’s highly stylized, and just plain oozing with personality.

Jack Morgan

Jack Morgan has definitely worked for Google.You can tell the moment you land on his site, because if I didn’t know better, it could be a Google product. It has the same minimalism. It feels a bit like Material design. All the text is set in Roboto. Every div has about ten classes.

Yeah, this guy works for Google. His site is a master class in Google-branded design.

viget

viget marries the familiar portfolio trends we’ve come to know with a distinctly corporate feel. With clients like ESPN, the World Wildlife Foundation, NBC, and more, that makes sense. Corporate is what you want. It never fails to impress me when I find designers who can take designs that seem fairly traditional—and all-purpose and tailor—them to their audience through attention to detail.

Clement Simon

Want a break from all of the flashy new trends? Have a look at Clement Simon’s portfolio. It’s a simple site with a masonry layout, solid imagery, and elegant typography. And by “elegant typography” I mean the text is a bit too small. That said, scrolling through this site is almost like Zen meditation in comparison to others.

Nik Papic

Nick Papic clearly wants to stick with clients who like reading. Aside from the logos of client’s he’s worked with, there’s nary an image to be found. That said, you probably don’t need an image gallery when you have a resume that reads as well as Nik’s. And I mean that both in terms of typography and content.

Bukwild

Bukwild uses a lot, and I do mean a lot of background video. However, instead of letting the background video and imagery do all the talking, each has been carefully chosen and edited to fit the theme of the site, which is no surprise, as Bukwild bill themselves as experts in branding.

The branding is really what stands out about this site. Every element feels like it was very carefully made to fit together, beyond the normal efforts of designers. It takes a fairly normal site (for professional designers), and turns it into something recognizably theirs, even if it’s a bit hipster-ish.

Nicole Saidy

In a world of minimalist sites that are so often monochrome, and super-colorful sites that blind the eyes, it’s nice to see a compromise. Nicole Saidy accomplishes this through using a rainbow of accent colors in very small decorative elements, combined with a sort of pastel gradient for buttons and other larger UI elements. Combined with a design that’s just plain solid overall, and you get a minimalist site that still stands out.

Andrej Cibík

Andrej Cibík’s portfolio is minimalist, and does that thing where a designer forgets to turn off his grid view when he launches the site. I kid. The grid is there for style reasons. Beyond that, the typography on this site stands out as excellent, as do the eye-catching-yet-understated animations, which I love.

He also stands out for having a section in his “About” Page that details all of the thing’s he’s bad at. That certainly helps set realistic expectations for the client.

Source

Popular Design News of the Week: June 5, 2017 – June 11, 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.

Best Practices for Website Header Design

 

43 CSS Headers and Footers

 

Site Design: Be Internet Awesome by Google

 

Dear Designer, Stop Designing for Yourself!

 

Publii – An Open Source CMS for Static Websites

 

39 Must-have Tools and Apps for Freelance Designers

 

JPG, PNG and SVG on the Web: A Beginner’s Guide

 

Angry GitHub User Creates Repository to Shame Sites with ‘dumb Password Rules’

 

Moo.do 3.0 – Your Email, Tasks & Calendar all in One Beautiful Interface

 

What Designers Can Learn from the Museum of Failure (Yes, it Exists)

 

The State of Advanced Website Builders

 

HTML5: Where the Core Web Technology is Headed Now

 

20 Best Fixed Width Fonts You Can Download for Free

 

Meet Framer, the Prototyping Tool Used by Google, Facebook, and Uber

 

Site Design: Eve

 

Design is Urinal. Art is Fountain.

 

Site Design: Amanda Shearon

 

9 Documentaries for UX Designers Online

 

Pattern Libraries

 

Just Keep Scrolling! How to Design Lengthy, Lengthy Pages

 

Graphic Design for Good: The Dos & Don’ts of Pro Bono Design

 

How Google is Gearing up to Destroy Shitty Ads in Chrome

 

Site Design: How Many Slaves Work for You?

 

In the Future, Design Principles won’t Be About Design

 

10 Reasons Why all Designers Should Start Writing More

 

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

Source