Friday, February 23, 2018

5 Ways to Design Like a Dungeon Master

Storytelling is great for design, so long as you aren’t trying to sell a fairy tale…

Do you tell your users a story about how you’ll save them from their troubles? It’s not very realistic, and users generally know this. You might try a different approach.

Once upon a time in the videogame industry, some game developers got tired of writing stories and quests into their games. So they made a bunch of sandbox-style games where the player could do almost anything they wanted. They just had to want to do it. The “story” would be formed in the player’s own mind, as they took actions and saw consequences in the game.

This was called “emergent storytelling”, and the game developers were very proud of themselves. But they didn’t invent it. Not at all. Emergent narratives have a long history, but were perhaps perfected by the “Game Masters” and “Dungeon Masters” of the tabletop roleplaying games, like Dungeons & Dragons.

There’s a lot we designers can learn from the experiences of Dungeon Masters.

The crash course: Remember when you were a kid playing pretend with others, and then one kid suddenly had a pretend gun, another had a pretend bazooka, and another a nuke? Roleplaying games are basically codified sets of rules that allow people to play pretend without that sort of instant escalation.

The Dungeon Master is a person who referees the game, enforces the rules, tells the story, and doles out consequences for actions. They’ve been telling stories for a long time, often with main characters who are stubborn, ignorant, and determined to break everything the DM might create.

Does that sound familiar to you? There’s a lot we designers can learn from the experiences of Dungeon Masters. They’re experts in both telling pre-planned stories with input from the players, and letting players tell their own stories altogether, and we need to learn both, too.

1. Make Your User the Main Character

Whether a DM has a specific story he wants to tell, or intends to let the player write their own, one thing remains mostly-constant. The player is the protagonist. They are not necessarily the hero, or the “chosen one”, but the protagonist. It is this perspective that allows players to quickly get invested in their character, and the world.

So much of the storytelling I see in web design would have you believe that the product they’re selling is the main character. Worse, sometimes they try to tell you that the website itself is somehow the protagonist of the story. To the Pit with that idea!

Your product is just a tool in their inventory, like a handy rope, or a +4 Vorpal Longsword. They’re the ones making things happen. Remember that, and do your best to play that role. Fight against your role, and they might see you as more of a cursed weapon, to be discarded and dismantled at their earliest convenience.

2. Players May Not Do What You Want

Writers have it easy-ish. They can make their characters do whatever they want, even when it doesn’t make a lot of sense for the character. (Sure, that’s bad writing, but whatever.) Dungeon Masters have to deal with real people playing characters who will do what they want, when they want. Yes, they can punish players for undesired behavior, but that’s a fast way to drive players to another game.

Users are pretty much the same. Learn to adapt to the way your users want to do things. Remember that even if you have a greater narrative going on, it’s still their story in the end. They won’t always be content to go from the Home page, to the Features page, to the Buy Now page every time, in that order. They will find their own path somehow, but it will be easier on both of you if you give them more than one.

3. Players Will Abuse Every System They Can

D&D players and users alike will eventually find the most efficient way to get something done…

A corollary for the point above is that D&D players and users alike will eventually find the most efficient way to get something done, and you may not like it. This is called “meta-gaming” and in D&D, it involves combining classes, special gear, and abilities to create characters that are far more powerful than they should be.

In using web sites or apps, it means that if users find a way to get what they want without jumping through any hoops you have set up, they’ll do it. And they’ll get annoyed if you take their shortcuts away.

4. Have a Big Plan Anyway

Good Dungeon Masters have stuff going on in their world. The players themselves may or may not decide to interact with all of the people and events around them, but “life” will go on. Usually, players will eventually come face to face with the big boss in any case, if only because that boss is bent on dominating the whole world anyway.

Unless your users leave your site altogether, they’re at least going to look at your prices and a big “Buy Me” button eventually. Just because some people won’t follow the plan doesn’t mean you shouldn’t have one. Most users are less obstinate than your average D&D player, and will be glad to have a quick and easy route to their goal.

5. Have Another Plan for When Things Really Break

In D&D, player’s characters can die, and they have to make new ones. In one campaign, a mistake the DM made allowed us to blow up an entire (alternate) plane of existence with most of us in it. Long story. Anyway, he was able to continue the story with new characters, and some fast adjustments to the main story between sessions. Long-time DMs learn to account for catastrophic turns of events like that one.

In web design, we don’t have the option to fix things between sessions, though. The story has to keep going, even if your players are on, say, an error page. If you’re going to use storytelling as a metaphor for your user experience design, then you need to use it everywhere. The story shouldn’t end just because a link went missing.

And with that, have fun. And happy adventuring!

Bouncy Castle Modern Calligraphy Font Family – only $9!

This content was first posted here:
5 Ways to Design Like a Dungeon Master

Thursday, February 22, 2018

Should You Follow Design Trends?

Across all disciplines of design, from fashion to architecture, trends largely define the styles and directions of an industry at a particular time.

Trends are often determined to be a reaction to a previous style. Whether that’s swaying from maximalism to minimalism, or colorful to monochrome, trends by their very nature focus on short termism rather than the larger picture. They also tend to be cyclical, meaning across design industries, a trend is likely to come back around at some point, in some form.

The question therefore presents itself as to why trends exist

In design industries, there is limited scope for constant progression: Architecture is limited by regulation and the development of new materials; Web design is limited by web technologies and the medium by which it is consumed. Over time these develop, presenting opportunities for new design directions and approaches. However, in the medium term, industries such as web design have remained very much the same for the end user. While we can now view websites on our phones and use modern technologies to produce more complex designs, much of the styles we use now could have been achieved decades ago.

The likes of minimalist and brutalist trends do little to push design forward, and tend to do the opposite, pushing design around in a circle. Even more complex visual animations were achieved over a decade ago—albeit using Flash.

The question therefore presents itself as to why trends exist. It’s not to push an industry forward, nor is it to improve the final output for users, whether it be in fashion or web design. Why trends exist is to maintain visual interest, not just for consumers and clients, but for the designers themselves too.

If we take web design as a case study for trends, we can see that we have essentially stripped websites back of their detailing. While currently this is visually appealing, since it’s on-trend, it actually does little to improve the experience for the end user. This is the website design for Abduzeedo in 2010, via the Wayback Machine.

And here is Abduzeedo in 2018. It follows a number of popular trends; from ridding of any design detailing such as gradients, to replacing key elements like search with less-intuitive solutions.

Is it more usable, or simply more on-trend? It’s harder to scan the latest article posts, more difficult to understand the content hierarchy, and lacking the wonderful, contrasting design visuals and details included in the earlier version.

Abduzeedo is not alone in its reductionist techniques, and similar transitions have occurred across the majority of websites over this period. But what if it had simply remained the same? I can’t speak for other Abduzeedo loyalists, but for me a great design is near-timeless, even in such a fast-paced industry.

Some sites have indeed remained the same over long periods. They have found a structure and design language which resonates with users’ needs. Rather than chopping and changing as the trends grow and subside, they stay firm, trusting in their design decisions and reasoning behind them. An excellent example is The Drudge Report.

It’s not following a minimalist or brutalist design trend. It has looked like this for the best part of two decades. Users of the site love the simplicity and consistency of the design. In an industry defined by cluttered news websites with breaking news alerts, The Drudge Report has taken a step back from the race for user’s attention and stayed true to its original purpose.

Much of it can be traced to boredom

Of course there are exceptions over this time, namely with the way trends contribute to design systems like Material Design, which continues to develop a current and user-friendly design language for all to use and benefit from. It’s implemented throughout Google’s products, improving user experience through well-defined user interface assets and consistency. But on the whole, design trends are largely about tweaking styles continuously to provide something new to users, consumers, clients, and designers that is fresh and unique. Much of it can be traced to boredom, not just from consumers, but designers too. Who wants to enter a creative industry and turn out the same style app designs, or websites, time and time again? Cityscapes, computers, the web, mobile apps, clothing, they’d all be samish, and lacking in a great deal of emotion or feeling. Not to mention, a market economy is built upon companies continuing to present new products and new designs, regardless of how good an existing one is.

Designers have to consider whether trends are a primary consideration, or whether the user experience should define the styles and direction. This largely comes down to the sub-industry and whether a design is primarily visual or user-orientated. Aspects such as logo or poster design have much greater scope to follow these trends.

Digital product design should always place the user experience over conforming to trends. In many ways trends should be entirely redundant in these cases and have little-to-no influence on design decisions.

LAST DAY: Mega Bundle of Illustrator Brushes from Artifex Forge – only $21!

This content was first posted here:
Should You Follow Design Trends?

Wednesday, February 21, 2018

8 Ways to Make DesOps Work For You

In the modern world, it’s the development team’s speed that often defines the viability of a product. At the same time, there is one key element which is most important, and most problematic: design.

Design often becomes a bottleneck and significantly impacts the whole development process, no matter the size of your team. Sometimes superhuman efforts from a design lead help drive the design process, but as soon as workload increases, you have to scale your team.

How often have you seen:

  • developers sitting idle, waiting for artwork;
  • developers lacking design assets;
  • mysterious new components that look suspiciously like duplicates of existing components;
  • diverse design elements from different designers, for the same project.

If any or all of these sound familiar, then it’s high-time to implement DesOps (Design Operations).

DesOps Specialists

The term DesOps or DesignOps is a replica of the term DevOps which is a software engineering practice that aims at unifying development processes to create greater efficiency. Similar to DevOps specialists, DesOps specialists are experienced designers with management skills who understand the design process within the larger context of product development.

While we may not all have the “DesOps” term in our job title, many senior designers are already responsible for the same role. From establishing design processes, to developing design systems, to creating strategies and managing design teams, DesOps is an increasingly in-demand role.

8 Ways to Start DesOps

What really matters, is that this approach is scaleable, and relevant even in teams with a single designer. So, how do you start implementing DesOps?

1. Develop a Criteria for a Completed Design

Designers need to know when their job is complete and ready to be passed to the development team. For example, designers need a clear understanding of which states each screen needs to have, and which assets will be required for the development team to build those assets.

It may feel like this is an area that designers should inherently understand. But it is actually one of the most common points of friction in a project and shouldn’t be ignored. If you articulate what is required clearly, then you’ll reduce conflicts, and ensure that everyone understands their responsibilities.

The benefits of this are: it allows a steady development pace to be maintained; it reduces the total development time; it reduces the number of discussions necessary between designers, developers, and leads.

2. Define Design & Delivery Requirements

For the last point, we were considering specifically what the designer should convey to developers. This point is about what form the designer should use to convey the design—mockups, polished design, prototypes, moodboards—what does the designer need to provide in order to effectively convey their intentions in a format that the developers can understand.

There are numerous options, such as Zeplin or InVision but one of the most common complaints from developers is that these formats don’t provide everything they need (such as exported assets). However, that is usually because designers haven’t properly exported their designs. By clarifying for designers what they are expected to produce, they can pass the right assets on easily.

You should create an internal document that will contain specific technical requirements for assets, design tools, collaboration with developers and other team members; finally, this document should clearly define when and how designs must be delivered.

3. Develop a Design System

A set of design and engineering solutions, as well as guides for their implementation, will ensure a number of advantages: product integrity; simpler and faster onboarding of new team members; more efficient work of both designers and developers (as they can communicate in one language defined by the design system).

The benefits of this include: improved overall quality of work; reduces “sag” when you scale the team; increases the speed of both design and development.

4. Select, Monitor, and Restrict the Team’s Toolbox

We all love cool new tools, but an effective team works with a uniform set of tools, and ensuring this unity is your responsibility.

All tools should be up-to-date, but if an update is skipped for any reason, then everyone should skip it.

The benefits of this include: increased team engagement; increased design and development speed; improved team collaboration.

5. Develop an Approach to Version Control

Developers are luckier in terms of this task, because version control for code is a mature industry with plenty of options. It’s hard to produce a similar approach for designers, as processes are so diverse, but in the last year tools like Abstract, Kaktus, and Plant have been increasingly popular. You can even have multiple designers working on a single layout with something like Figma.

The benefits of this are: improved communication; simplified team scaling; fast tracks design processes as multiple designers can work on a single project productively.

6. Implement Prototypes and Visual Documentation

In order to describe all functionality related to designs, try to use “visual documentation” instead of writing tech specs. In most cases, it is enough for a developer to have an interactive prototype to understand the basic logic and find answers to most questions.

The benefits of this include: reduced time writing tech specs; reduces the scale of work for technical writers; developers spend less time reading documentation and more time writing code; designers are more productive; accelerated development pace.

7. Integrate Designers into Your Development Framework

There is absolutely no place for design in many popular software development methodologies; whatever development process you’re using, find space for designers.

The benefits of this are: a united team with improved communication; increased development speed; reduced rework, and developer downtime.

8. Present Measurable Indicators of Improvements to the Whole Team

You should constantly demonstrate the growth of quantitative and qualitative indicators thanks to the implemented changes, for both team members and top-management. Without this, a team will be reluctant to change, while top management won’t be able to understand where and why additional resources are spent. Constant collection and presentation of positive results after implementing changes will help you obtain credibility and necessary authority for further changes in team workflow.

Benefits include: increased motivation and a stronger team; facilitation of new rules and practices; support for future innovation.


The term “DesOps” is quite new and is just starting to acquire its meaning; the first DesOps conference was only held in November, in New York.

For now I would simply call this a culture that aims at developing and facilitating solid design processes. But I feel that in the near future we will have this as a separate design role in every product team. However I feel we can already safely talk about the importance of introducing these practices in order to improve the efficiency of design workflow and product development in general.

8 Professional Graphic Design Magazine Templates – only $17!

This content was first posted here:
8 Ways to Make DesOps Work For You

Tuesday, February 20, 2018

Making It Pop — 5 Ways to Combat Subjective Design Feedback

“It looks great, but can you make it ‘pop’ more?”

We’ve all been there, the dreaded subjective design feedback, no use to anyone; let’s stop a moment and look at what led to this subjective nonsense, what chain of events instigated this horror show of unusable feedback? Actually, how clients receive your work and how you frame the feedback request is often just as much to blame as the person asking you to make your designs ‘pop’.

Ask yourself how often have you simply sent over an email to a client with a .jpg attached and the seemingly innocent request “let me know what you think”.

recognising how your own process often invites completely unhelpful feedback can help you change

The truth is there’s never a 100% right answer when it comes to web design, so everyone is likely to have a different personal opinion. If you really think about it every design is the result of hundreds of tiny decisions that could have gone any one of a thousand different ways (light blue buttons instead of dark blue, 10px padding instead of 14px etc etc).

Design is, by its very nature, is perceived as a subjective exercise. So the truth is we don’t actually want to know if a client or stakeholder ‘likes’ our design or not, we want to know if it meets their business needs. We don’t want to know if the Legal Department gets a warm fuzzy feeling when they see our work, we want to know if they’re able to sign it off.

It’s also important to bare in mind that some subjectivity will always make it’s way through into the feedback you receive and that’s not always such a bad thing. Often at the heart of it is some really well meaning and useful insight but recognising how your own process often invites completely unhelpful feedback can help you change and weed it out.

1. Ask the Right Questions

The easiest way to start preventing subjective feedback on your project is to be clear on what you’re asking for. Instead of flinging over a completed design with a cheery “let me know what you think” email, try and steer the feedback conversation towards what you actually need.

Now this can take a little more effort and sometimes after finishing a super difficult project at 2AM the only thing you want to do it get a design sent off and never look at it again, but believe me in the long run it’s worth it.

if you’re sending your design to a client you should be pleased with it, so don’t be afraid to sound positive

Take some time to think about who you’re sending your designs to and why. Is it a business owner reviewing a design for their new website? If so, be positive, tell them that you’re really pleased with how the design represents their brand and you’re ready to move onto to the next phase of the project, do they agree? If not, which specific elements would they like you to focus on changing. Don’t forget if you’re sending your design to a client you should be pleased with it, so don’t be afraid to sound positive and ready to move on.

Essentially what you’re doing here is trying to frame what you want from people in an objective way. Think ‘yes or no’ questions rather than ‘what do you think’.

This approach can be especially useful if your intended recipient is reviewing your design for a very specific single reason, for example if you need the legal team to sign off you should be asking if there are: “Any reasons the design would not be acceptable from a legal perspective,” rather than: “What do you think? Is this ok for you?”

…you’re actually helping people when you ask for this simple yes or no type feedback.

A lot of the time you’re actually helping people when you ask for this simple yes or no type feedback. You are, for a lot of people, removing the subconscious pressure for them to contribute something if asked. When presented with a blank canvas request for ‘their feedback’ most people will force themselves to think of something even if it’s just a random point that in reality they don’t care about—simply because the alternative feels like they’re saying “nope sorry—I can’t think of anything I’d change—I’m not required—I don’t need to be involved—I’m useless really”. Inviting a simpler yes or no answer is often enough to lift the pressure and gain a positive response.

2. Let Less Cooks Near the Broth

Another great way to avoid subjective feedback hell is to work hard on limiting the number of people you invite to feedback. Design feedback has a nasty habit of snowballing as more and more people are CC’d into an ever growing email chain of contradicting opinions. Instead, don’t be afraid to limit your feedback loop, you can even separate stakeholders off into groups if needed. For example if two stakeholders are brand and two are legal, why not reach out to the legal sign off team separately for specific legal feedback and vice versa for brand (it can save you the legal person’s often unwelcome brand feedback).

Now it’s not always that easy and there is the risk you can create even more problems for yourself if you exclude people (especially in large organisations). What you can do to combat this is to share design output with a wider group but be specific that it’s purely for their awareness and that feedback is not need at this stage, thank you very much.

3. Position Your Design

Don’t just leave your design to stand on its own, this opens it up to misinterpretation—instead share it with context, easy to understand explanations around why certain decisions have been made. There’s plenty of ways you can do this, the simplest being to provide a version of the designs with easy to follow annotations, but ideally you want to actually talk people through it step by step in a design walk through.

A walk through of your designs moves away from the rather old school concept of sending designs over to clients or stakeholders for feedback like an exam paper being sent off to be marked. The actual best way to share designs and squash unwelcome subjective feedback is to present in person, walk your stakeholders through your design step by step answering any questions as you go. Obviously there’s a number of issues with this, logistically it can be difficult, it can be costly to find the time but not least of all… it can be quite frightening.

But if you’re up for the challenge there are definite rewards. Getting your clients or stakeholders together to walk them through your designs will give you the opportunity to remove even more subjectivity from feedback as you explain not only how the proposed design would work but also the reasoning behind your design decisions. Right off the bat this cuts out any questions in amongst your feedback about “How do you see component X working?” or “Why have you opted to use color Y here?”.

Getting everyone to attend a walk-through can feel like herding cats

Obviously design walk-throughs no longer need to be done face to face either, there are plenty of amazing tools out there to help you walk a client through design remotely. But the most useful tool in this scenario is you as the designer explaining your design decisions and answering questions—sharing your enthusiasm.

Getting everyone to attend a walk-through can feel like herding cats sometimes, getting all your stakeholders in one place at one time is certainly tricky but it’s worth persevering because it helps you out in another key area where subjective feedback often creeps in.

4. The Curse of Contradictory Feedback

This occurs when stakeholder no.1 loves the new header image but stakeholder no.2 hates it. Before you know it you’re playing stakeholder top trumps deciding who is more important and who you should to listen to. If you do find yourself in this situation is can be useful to ask your client or internal stakeholders for a single point of contact through whom any and all feedback is filtered (leaving it to them to have to battle to decide who’s top dog).

Another great way to keep people away from contradictory feedback is to be very upfront and honest around the number of amends that are available or the time impact of unnecessary feedback. This may feel uncomfortable to some but believe me its infinitely better in the long run to be honest and direct early on rather than let people down later after you’ve received 8 rounds of subjective feedback that’s delayed your project and pushed you way way over budget.

5. Too Late it’s Happened…

If after all this you still find yourself on the receiving end of some subjective feedback that you just don’t know how to proceed with with (maybe such classics as “Can you make it pop?”, “Can this page look more exciting please?”, “I’m just not sure about these colors”) don’t despair. A great way to bring your client back on track at this point is to politely ask them to send you some links to sites they’ve seen that do ‘pop’ or do look ‘exciting’. You’ll be surprised how often this works and a client will send you a couple of links to similar sites and you can decipher their meaning and implement something that… ‘pops’ :)

Some Key Things to Try

  • Be specific not general in what you ask for in feedback
  • Limit the number of people you ask for feedback
  • Walk through your design with stakeholders to give it context
  • Limit the number of rounds of feedback available
  • Ask for feedback to come through a single point of contact
  • Make it pop
DLEX UI Kit with 1,000+ Elements & 400 Components – only $24!

This content was first posted here:
Making It Pop — 5 Ways to Combat Subjective Design Feedback

Monday, February 19, 2018

20 Best New Portfolio Sites, February 2018

Hey everyone! It’s February, and you know what that means: Hallmark executives get bonuses! Also, people make a special effort to show love and affection to those they care about, which is cool too.

The theme this month is minimalism and motion designer portfolios, pretty much. Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea (TM), kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

Christopher Kirk-Nielsen

Christopher Kirk-Nielsen is a WDD reader who sent in his own site for review, and oh my God I think he’s been listening! You see, he is a front-end dev / motion designer. Typically, sites built by motion designers tend to suffer in the usability and accessibility department.

In this case, however, the site looks good. It looks original. It appeals to the love of the ’80s aesthetic. And so far, I can’t get the thing to break without going back to much older browsers. Even without JavaScript, everything has a fallback.


Next up, Less+More is perhaps the very embodiment of the “white space and thick heading type” school of design. It has big type. It has big images. It has… a lightly-animated Venn diagram? Okay, I like that.

No prizes for originality, but it looks good.

Marina Rachello

Every time I see a site so brazenly colorful as Marina Rachello’s portfolio, I always wonder if my tendency toward monochromatic palettes is wrong somehow. While some of the bolder tones don’t contrast too well with the black text, it must feel freeing to just go nuts with the colors and shapes.

The only change I’d make (besides fixing the potential contrast issue) would be to make the background an SVG rather than a PNG.


Antoni brings us another videographer’s portfolio that goes all in on the motion design. It’s got a visually pleasing combination of background video, and simple, solid minimalism that would just scream “professional” if it weren’t so darned professional.

Nikos Pandazaras

Nikos Pandazaras’ portfolio is as artsy as his photography, which is par for photographers’ websites these days. You have the minimalism, the somewhat unconventional layout, and even rather artsy animation. The whole thing really fits the theme.

Dow Smith

Dow Smith adheres to the trend of ever-more-minimalist sites, with the big, thin text, and the love of literal white space. Tons of it.

There’s also a fair bit of distracting animation, but I actually rather like the way it’s been used. Each portfolio piece is presented as a short video (embedded with HTML5) that shows how a user is expected to interact with the site. It shows how they work, not just how they look.


Prollective’s website is minimalist and professional, but isn’t afraid to preen a bit. Gradients and bright colors haven’t looked this good since people kept mistaking Web 2.0 for an aesthetic trend. Despite relying far more on type than it does on imagery, this site still feels vibrant.

Blue Productions

Blue Productions properly commits to their theme by, well, using a whole lot of blue. Video is what they’re all about, so expect a fair bit of background video, and stills from their work. I particularly appreciate the cinematic presentation for all of their work.’s style of minimalism is bound to remind you at least a little bit of Google. They’ve worked with Google on at least one project, so that sounds about right. It’s clean, it’s smooth, it has that thin text you see on pretty much every Google site now. Some small usability issues on the home page aside, it’s a pleasure to browse.

Julie Bonnemoy

Julie Bonnemoy’s portfolio hits you with some rather chaotic lava lamp effects before revealing a classy layout that revels in its asymmetry and imagery in equal measure. I feel like this is one of those sites that is perhaps a bit over-animated. Even so, when it calms down a bit, it’s just plain beautiful to look at.

Dinner for Five

Mitsugu Takahashi’s portfolio is elegant. I don’t mean that it uses fancy type (well, it does), or that it uses imagery to project a high-class brand (it does that, too). Those are just surface level indications of a deeper understanding of the way something elegant is supposed to feel.

Page loader aside, the site feels graceful, pleasant, and stylish as you could wish for. It’s almost a miracle that only one of the featured projects has anything to do with fancy weddings. It just hits all of the right notes.

Jermaine Craig

Jermaine Craig makes a bold and risky move by hitting users right in the eye-sockets with a wall of text. The site as a whole seems to be a bit of a work in progress, but it’s already eye-catching enough for this list.

Paper Tiger

Paper Tiger is your classic minimalism that’s had few paint-filled balloons thrown at it. The people at Paper Tiger are apparently good at throwing things, though, as the use of color doesn’t overwhelm the rest of the design at all. It just takes an already-solid design and makes it stand out a bit more.

James Merrell Architects

I’m not sure why architects love the PowerPoint-style site so much, but James Merrell Architects is a fine example of the form. Even their blog is part presentation, and part print publication. The cool thing is that CSS (and JS) has come far enough to make sites like this reasonably usable, and even pretty.

Even though building sites this way goes against my personal preferences — and even though there’s no point in hiding the navigation behind a hamburger menu on the desktop — I have to admit that it just looks good.


It’s one heck of a power move for a company that makes mobile apps (and occasionally websites) to state that they don’t even like the Internet. And yet, Kickpush has done just that. Of course, they also call London “sunny” which is exactly how you know they’re kidding. That brashness permeates the site’s entire aesthetic and experience.


MoreSleep is not just a good idea, it’s also a design studio. This one has gone for that holy grail of alternative aesthetics: the horizontal layout. Well, on their home page anyway.

Nathan Young

Nathan Young has brought us a multiple-slideshow portfolio for our enjoyment. This sort of portfolio is actually growing on me a bit, though I’d personally try for pure CSS slideshows.

Jack Davidson

Jack Davidson’s portfolio makes absolutely sure that you will read the title of every project by replacing your cursor with said title. Don’t worry, it goes back to the regular pointer as soon as you mouse over the navigation, so it remains useful.

The site is interesting, but I want to dock it a few points for using a “screen saver”. I’m getting a bit annoyed with those. At least this one is a slideshow of his work, so it’s still kind of useful.

Okay, a thousand websites have done the “it’s all text until you hover on a project name” thing. I’d just like to point at to say, “They did it right.”

See how the images are kept from overlapping the title of the project you’re previewing? See how they don’t have to worry about text contrast like that? That’s the right way to do it.

Giovanna Silva

Giovanna Silva has taken the unconventional route of allowing people to make their own collages (sort of) with her portfolio. Click on a country/location, then start clicking away to see every picture in the project.

After you’ve exhausted the stack of photos, you can see them all again in a more conventional layout. The rest of the site is a bit more conventional, too, but looks good.

Art Text App for Mac Turns Text into a Masterpiece – only $17!

This content was first posted here:
20 Best New Portfolio Sites, February 2018

Sunday, February 18, 2018

Popular Design News of the Week: February 12, 2018 – February 18, 2018

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.

Next Level Parallax Scrolling with CSS Variables


Paddy Buttons


5 UX Design Principles that Never Go Out of Style


9 Bits of Web Design Advice


Shape and Color in Logo Design—Practical Cases


Google Announces AMP Stories for Creatives


AR –


AMP for Email is a Terrible Idea


Google Thinks the Future of the Web is . . . Email


Site Design: Ballpark Redesigned their Marketing Site


CSS Basics: Styling Links like a Boss


Website Starter Kit from Glitch


Stimulus – A JavaScript Framework


Anatomy of a Winning Email Design


50 High-quality Script Fonts You Can Download for Free


Gangbase — Base for Designers


HTTPS Explained with Carrier Pigeons


How not to Design a Blog


Stripe: Environment


What, Why, and How-To’s of Creating a Site-Specific WordPress Plugin


Really Bad UX Mistakes that even Great Teams Make


SVG Backgrounds Collection


What is Design Strategy?


Demo: CSS Space Shooter


How to Fall in Love with Amazon Web Services


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

LAST DAY: Convert PDFs into Interactive Animated Publications – only $9.97!

This content was first posted here:
Popular Design News of the Week: February 12, 2018 – February 18, 2018