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.

Source

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.

Summary

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.

Source

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

Source

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.

Less+More

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

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

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.

galgo.studio

galgo.studio’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.

Kickpush

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

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.

Amateur.rocks

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 amateur.rocks 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.

Source

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 – Apple.com

 

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.

Source

Comics of the Week #428

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…

The list

 

Hectic home office

 

Over thinker

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

Source

8 Best Free Libraries For SVG

All modern browsers support the SVG filetype and it’s quickly becoming a favored choice among web designers.

You can design beautiful icons as SVGs and scale them to any size without quality loss. This is one of the biggest benefits of the SVG format considering retina displays are on the rise.

If you’d like to animate or manipulate your SVGs that’ll take a little more work. But these free libraries offer the best tools for the job if you’re willing to roll up your sleeves and get your hands dirty in some code.

1. SVG.js

The first library I have to recommend is SVG.js. Naturally this is totally free and open sourced for use in any type of web project.

It’s very lightweight totaling only 16KB when gzipped and about 62KB minified. Granted this is pretty large as a whole, but compared to similar libraries it’s on the smaller side.

Installation is pretty simple with support for npm and a whole page dedicated to getting started.

Each page in the documentation has plenty of JS and HTML codes for you to look through and get started. Plus you can find embedded demos hosted on JSFiddle to see how this library works in action.

2. Snap.svg

Another popular SVG library is Snap.svg. It’s a JavaScript library with zero dependencies and a fairly large support community running through websites like Slack.

Currently the project is in v0.5.1 so it’s got a long ways to go before a full v1.0 release.

I would still consider this ready for commercial use since it’s been tested heavily for bugs in each release and built to work across any type of SVG. This includes exported files from Illustrator, InkScape, or hard-coded SVGs in your HTML.

Have a look at the demos page for a taste of what Snap can do.

3. Bonsai.js

For a more general graphics library I highly recommend Bonsai.js. It’s been around for years and it’s one of the more well-maintained projects with a core group of supporters.

This lets you build some pretty cool stuff with SVGs and the canvas element. You can design little icons for landing pages or more complex graphs like pie charts.

Not to mention you get full control over paths in SVGs along with animation effects using keyframes in the Bonsai library.

Take a peek at the examples page for a few live demos and visit the online docs to get started with your first Bonsai graphics.

4. Paper.js

Paper.js calls itself the Swiss Army knife of vector graphics scripting. And in many ways this is right on the money.

By default Paper.js works on top of HTML5 canvas elements with its own DOM model to manipulate. You can edit bezier curves right inside the code which gives you far more control with even basic scripting.

Have a look at their examples page if you’re curious to see this in action.

I’d say this is more of a canvas manipulation library than just a custom animation or SVG library. But it’s definitely powerful and a great choice for anyone getting into SVGs for the web.

5. Raphaël

Here’s a classic JS library for graphics manipulation and SVG scripting. Raphaël is totally free under the MIT License and available on GitHub for download.

As of this writing it’s currently in v2.2.1 and has a pretty large base of contributors. All of the code runs in plain JavaScript but that can include TypeScript if you prefer faster coding.

Each graphic on the page gets its own DOM section and can be manipulated just like a DOM element. Custom functions in Raphaël make this a great library for beginners just learning the ropes of HTML5 canvas.

There’s also quite a few crazy demos if you dig through the main site.

6. Two.js

The open source Two.js script is a custom 2D drawing API built in JavaScript.

This is not meant for just canvas elements although it does work best for those types of layouts. But you can use Two.js for manipulating a few common formats on the web: SVG, Canvas, and WebGL.

I would say Two.js has a steeper learning curve for someone who’s not super familiar with JavaScript. This is because you can do so much with this library and the features can seem endless.

But one look over the examples page and you’ll get an idea of how much is possible.

7. Velocity.js

Technically the Velocity.js library is a free animation library, however it does support SVGs making it a fantastic choice for all UI/UX animation.

You can also run Velocity with jQuery or on its own using vanilla JS.

If you look through the main page you’ll find all the setup info you need along with documentation for each type of animation. Most of them even have demos on CodePen so you can see how they work in the browser.

Stick to Velocity if you’re looking to create practical animations for a website. I specifically recommend it for basic page UX motion or more complex microinteractions.

8. Vivus.js

With Vivus.js you can build one very specific type of animation: the drawn outline effect.

You see this with SVG images all the time. An SVG path can be animated into view one point at a time so it looks like the entire graphic is being drawn by hand.

This is a really neat effect and with Vivus it’s super easy to setup. Granted this doesn’t radically improve the user experience or increase usability, but it is a really fun library to work with.

Especially if you’re brand new to SVGs and you want an easy JS library to play with for testing.

Source

Why Managing a Creative Team Is So Hard (and 5 Tips to Do It Better)

Starting any new business venture is exciting. You’re free from the shackles of corporate life and you’re finally able to control your own schedule, rates, client base, and workflow. Life as a freelance web design professional rocks, doesn’t it?

But what happens when you rock it too hard? In other words, you have too much work coming in and not enough time or energy to throw at it without compromising on quality. You want to be a successful and happy freelancer, but you know something has got to give as your design business grows.

When you’ve decided you’ve had enough of the long hours, perpetually high levels of stress, and waning output of creativity and productivity, it’s time to start hiring. But it’s not as simple as hiring a few contractors to outsource work to. Managing a creative team for your web design business can be difficult if you’re not properly prepared to handle it.

5 Tips for Successfully Managing a Creative Team

So, you’ve decided it’s time to get assistance for your business. Here are 5 tips to keep in mind when managing your new creative team:

1. Decide Who Will Manage Them

You run a web design business, which means you need creatives to round out your offering and offload some of your work. This may entail hiring:

  • Web designers
  • Web developers
  • Copywriters
  • Video designers
  • Animators

Ideally, you should start with hiring people to cover tasks that are not within your wheelhouse. This may include hiring a creative director or production manager if you don’t feel up to the task of managing a creative team yourself. Consider the following:

  • Do you enjoy building relationships with coworkers?
  • Do you handle conflict well?
  • Have you been told that you are a good coach or trainer?
  • Do you enjoy leading meetings and brainstorming sessions?
  • Do you give practical, helpful, and positive feedback to others?
  • Do you enjoy receiving feedback from others?

If you answered “no” to more than three of these questions, then add creative director to your list of new hires. If you answered “yes” to more than three of these questions, then you’ll do a fantastic job managing your creative team and can keep reading for more management tips.

2. Understand What They Do

One of the more frustrating parts about working as a freelancer is when clients—and sometimes managers—claim that the work is “easy”. While it may be true that a design layperson can use a program like Canva and “design” an image for a website, or a manager can craft an op-ed for a blog, the quality of work these untrained individuals produce won’t match the quality of work you get from well-trained and educated creatives.

Of course, you already understand this as a web design freelancer. However, do you really understand what goes into the web development process and why it may take a programmer a month to complete a website? Or how about copywriting? Do you understand the intricacies involved in optimizing content not just for user readability, but also for search engines?

While I’m not saying you need to train in each of these fields, it’s a good idea to have an understanding of what each of your team members do. That way, when they encounter an issue or push back on a request you’ve given them, you understand the underlying reason behind it.

3. Encourage Controlled Creativity

In your line of work, you know that clients don’t always appreciate unique or experimental designs, which can make the management of creative freelancers somewhat difficult. While you don’t want to stifle anyone’s creative efforts, you also don’t want too many deviations from client-mandated guidelines to constantly put you behind schedule or over budget.

In order to pull off this balancing act:

  • Provide team members with a formal training process that acquaints them with how to use style guides and abide by best practices.
  • Always give your team clear guidelines and instructions with each new project.
  • Encourage creative input from your team. You can do this with regular brainstorming sessions that allow them to contribute to your design strategies and plans.
  • Assign work that challenges their skill sets and provides a more stimulating environment. This will keep them from going too far off the rails if they’re feeling bored.

Just remember that without underlying training or clear instructions, your contractors may feel like they’re free to take their work in any direction they see fit. So, it’s ultimately up to you to create a secure framework they can work within.

4. Streamline Their Workflows

Whenever possible, provide your team members with better, smarter, and faster ways of doing things. Again, this isn’t about snuffing out creativity. This is about freeing them from the mundane parts of their jobs so they can get excited about and have more time for the fun stuff.

Consider investing in:

  • Project management systems that enable closer collaboration;
  • Wireframing, storyboarding, and other brainstorming and planning tools;
  • Design-specific tools for creating mockups, prototypes, and more;
  • Writing tools for quality checks, headline optimization, SEO assessments, and more.

And be sure to have documentation created for each role. This will streamline the on-boarding and training process and serve as a good future reference point.

5. Schedule Regular Meetings

Whether you hire full-time employees, part-time employees, or contractors to fill your roles, these individuals are now valuable members of your team and need to be treated as such. Of course, applying the above principles to your management style will support that type of working relationship. However, you will also need to go beyond that and dedicate time each week, month, and quarter to check in with them.

These check-ins are up to you to define, but should serve a clear purpose. They shouldn’t just be to say “hi”, to micromanage, or to compromise your relationship in any way. Here are some ways in which you can use these regular check-ins properly:

  • A weekly meeting to discuss projects in the pipeline and any questions/concerns with deliverables or timelines;
  • A monthly meeting to talk about wins as well as areas for improvement;
  • A quarterly meeting to review individual goals and to devise a plan for meeting them;
  • A yearly meeting to review overall performance and discuss future goals and career tracks for the team member.

“No Man Is an Island”

…and when it comes to the world of web design, that statement has never been more true.

While the beginnings of your business may find you working solo, you will eventually need to hire others as you scale. Just be careful about how you manage them. There’s a fine balance to be struck when managing creative individuals and the 5 tips above will ensure that you keep everyone’s best interests in mind as you do so.

Source

Achieving Simplicity Beyond Complexity in Design

Simplicity Beyond Complexity is essentially the point at which the complications of a product, and its code, become obscured to the end user.

It’s a design process different to simplicity, in that it does not look to simplify the core product. Rather than reducing functionality and feature sets, it looks to ways of making the product simpler and easier to use which do not include stripping back elements of the product itself.

It’s a more complicated and difficult task than simplifying design and product. It requires much greater levels of design thinking, problem solving, and user experience considerations. However, the results are often impactful in positive ways to both the user base and company itself.

Achieving simplicity beyond complexity is about taking the complex and developing new user interface solutions to maintain and even extend functionality, all while making it much simpler to use for the end user.

The core of the product itself could not be simplified without negative consequences

In its most simple form, this method of design thinking accounts for the solution that saw FaceID replace TouchID, or GitHub release a desktop application. They realised that the future of their products and companies relied on adding more complexity. The core of the product itself could not be simplified without negative consequences for both users and company growth. So they had to look for solutions to aid the user in making best use of the complexities, and being able to understand them through good design and user experience.

There are two examples relating to this form of design thinking. The first of which is where a company has arrived at a point where complexity is at an all time high, and future growth and usability requires a long-term plan to achieve simplicity beyond this. The other example is a design which has successfully achieved this, is enjoying the rewards of its hard work, and has a foundation upon which to grow their product in the future.

1. Complexity Working Towards Simplicity: Amazon

Amazon is notorious for the complexity of its website. It’s full-width and crammed with images, products, cards, and confusing grid layouts. With one of the up and coming design teams in the technology industry, Amazon is focused on making their site easier to use, and simplifying the experience for the end user.

As it stands, there are notable issues not just around the design, but around the functionality too. Delivery costs are one of these components that need to be made more clear and consistent to users. On a design front, there is simply so much going on from a visual standpoint that it can seem overwhelming.

Aspects such as product options and sizings are often repetitive and utterly confusing. Items like product type thumbnails are small and hard to see, with little done to make an obvious indication as to which are unavailable.

It’s the complexity of Amazon which makes it so popular

It’s the complexity of Amazon which makes it so popular: the ability to order almost anything, any color, any type, and have it to your door within hours. But as they continue to expand with services like Prime, Video, Music, Alexa, Audible, and others, there has to be a platform upon which these can be integrated without getting lost and further complicating user experience. By assembling a talented product team, they are looking at ways to simplify their product without sacrificing any functionality. It’s an extremely difficult task, particularly as new services and features are being shipped all the time. It explains why we’ve seen only minor changes to the site’s design in the last few years, and even decades. Much of the simplicity for users at this moment in time is in the familiarity they have built up with the site. It’s changed little since its inception in terms of core functionality, and this presents further complications for the product teams when seeking to simplify elements of the design.

Over time, Amazon will make tweaks which will bring the entire website into a more cohesive state. It will find solutions to current user experience issues, and introduce more positive interactions like the 1-Click checkout which enables users to avoid the time-consuming checkout process.

2. Simplicity Beyond Complexity: Google Services

Google has successfully migrated most of its core product line to achieve simplicity beyond complexity. It’s employed a consistent design system across products in the form of Material Design. This has achieved consistency and ease of use across products, websites, and apps.

A Google account maintains coordination between everything from Photos and Docs, to Drive and Gmail. The integration and consistency between each has brought it much closer to a state of cohesiveness. The products feel more like a suite of tools, as opposed to separate entities.

With Google’s venture into mobile software and computer hardware, the experience becomes even simpler while retaining and building upon existing functionality. From Android to Chrome OS, everything is tied to a single account. As a company they offer a suite of services and tools which cover almost every need from a personal standpoint. In doing so, they have done away with one of the primary complexities of modern computing, which is fragmentation of services. When you are required to use a different company’s software, hardware, or service for each requirement, you often lose the ability for those to interact seamlessly with each other. Companies, by their very competitive nature deter this for obvious reasons, often opting to produce their own sub-optimal equivalents—notable examples include Bing and iCloud. This isn’t to mention the issues around pricing, managing accounts and passwords, and switching between different user interfaces and compatibilities.

Finding Design Solutions

As designers work on products, it’s important to always seek the solution beyond complexity. Attempt not to apply reductionist techniques where the functionality is beneficial to the end user. It’s often more difficult to find these solutions and implement them, but continuing to do so as a design direction will equate to a better, more expansive, and more capable product over time.

Source

AMP Stories Are a Thing Now

AMP is a contentious technology, to be sure. People seem pretty sure that Google intends to use it to shackle publishers and users to the search engine (like we weren’t already), and that it’s just another way for Google to abuse its powers. And more importantly [sarcasm alert], it’s just not all that pretty to look at. I mean, it was never bad, but AMP is all about speeding up the web (and that other thing), and that means cutting down on a lot of the fancy visual stuff.

Revel and rejoice, designers! Google is working hard on that second problem. It’s a simple fact [not sure if sarcasm alert] that people can’t read articles on mobile without lots of big images and lots of animation. Google is addressing this by implementing a new feature called AMP Stories.

Sigh. Corporations make me snarky. It’s a reflex. Okay, I’ll stop now. You’re probably reading this on an AMP page, anyway.

AMP Stories is a visually-driven format for your mobile articles, basically. It’s designed to make it easy to implement all those big images, etc. Google went and asked a bunch of journalists and publishers ranging from Cosmopolitan to Mashable what they’d like their stories to look like on mobile, and this was the result.

If you want to learn how to build these for yourself, just head on over to the AMP documentation. There, you’ll find tutorials on how to use the big AMP Story features like:

AMP Pages

Yep, every story is separated into pages, presumably to make art direction more flexible, and keep content down to bit-sized chunks for the reader. Want to design a story that makes use of every single design aesthetic you can imagine? It’s doable with pages.

AMP Layers

At long last, someone (officially) brought the concept of layers to web/mobile design. You basically use these to organize your design and overlay elements on top of each other, just like you would in any graphics editor.

AMP Animation

AMP stories have brought with them a set of built-in animations that you can apply as properties to any element on the page. It’s kind of like in-lines styles, really.

There aren’t too many extra features beyond that. AMP, for all of the problems associated with its implementation, is still about stripping away as much unneeded cruft from the web as possible. All in all, if you’re already using AMP with your site, it’s a great addition to the toolset.

I’m calling it now, though: the first thing people are going to do with the built-in layers and animations is find a way to make parallax effects.

Source