5 Ways to Ensure Your Fancy Site Doesn’t Suck

Macromedia has a lot to answer for. Flash may be on the way out; but flashy websites reminiscent of the ’90s are very much alive and kicking. They just use JavaScript now. And they take up a lot of bandwidth.

Okay, I promise that this won’t be yet another rant extolling the virtues of minimalism, and websites that are hard to break. I mean, I prefer them. I always will. However, I am coming to realize that we minimalism-loving designers are outnumbered by designers who like to make things move around the screen (excessively), and the customers who hire them to do it.

you can make your websites all kinds of fancy, while still making sure they don’t suck

Just look at any of my portfolio review articles. Fancy, “flashy” websites are here to stay, and they’re going to eat our data plans alive. You blew it up! Goddamn you a… okay, that’s out of my system.

All hope is not lost, however. Best practices are still a thing. There are still ways you can make your websites all kinds of fancy, while still making sure they don’t suck. Here are some basic tips for making sure your dynamic, power-point-style, parallax extravaganza still converts users instead of frustrating them:

1. Use Moderation

Fancy effects stand out more when they’re not everywhere. When everything is animated, then animated stuff isn’t all that special, is it? Try to limit the number of elements on your page that get hit with the innovation stick. If that’s not an option, make elements that users have to interact with fancier and flashier than other elements. Use more subtle animation for hero images, and especially for anything in the background.

Limiting the number of things you animate or otherwise make fancy will drastically decrease the amount of time spent optimizing your site for speed. It can also drastically reduce the cognitive load on your user’s brains, as they spend less time figuring out what they can or can’t tap on.

2. Navigation Should Never Be Too Fancy

It’s frustrating to do the same thing over and over. Navigation patterns all tend to look the same, even more than other website elements. It can feel like there’s no innovation. It can be tempting to go wild with new ideas for website navigation.

You might enjoy creating new design patterns; but users do not like learning them

Here’s the problem: you still need to make sure every user can find exactly what they’re looking for, as quickly as possible. The more unfamiliar your navigation becomes, the harder it is for users to find what they want. You might enjoy creating new design patterns; but users do not like learning them. This is triply true if they’re in a hurry.

Make everything else on the site as wild as you want. Go nuts! But navigation should always be the easiest thing on your site.

3. Make a Fallback For Everything

Do you have a JavaScript workaround for CSS that isn’t fully supported yet? Make a fallback for it. Have a slideshow? Fallback. Animated background? Fallback. I’m going to assume you’ve gotten the idea now.

To put it bluntly, if any part of your site breaks when the JavaScript does, you have failed. And JavaScript does break. If things go really wrong, it can break for thousands of users at a time. The only reasonably foolproof site is one that remains functional even when JavaScript does not.

Let’s take it further: Your site should ideally be functional even if the CSS doesn’t load. Yes, it’s an old argument; but is it really any less valid for its age? The job of any good designer or developer is to make sure their client’s site is usable under the widest possible range of conditions.

So yeah… fallbacks. Learn to love them.

4. Optimize For Speed

Okay, I know I’ve been over this before, but the more fancy schmancy stuff you put into a site, the more important speed becomes. It’s really bad enough that people are using pre-loaders on websites again. Once everything is loaded, everything should run fast.

Forget the classic examples of low-end phones and old desktops. There are Chromebooks being sold even now with only two gigabytes of RAM. 2GB. That’s it. For an OS based on Chrome, one of the world’s most notorious RAM hogs. Even Android phones with only two gigabytes are starting to feel slow and sluggish. Running a laptop on similar specs is basically lunacy.

But it’s still your job to make sure your site loads and runs reasonably fast on those weird, sad little laptops. Your Chromebook-loving users aren’t going to give you a free pass if the site you build doesn’t work for them.

5. Don’t Skip User Testing

You’ve thought outside the box. You’ve broken the mold. You’ve made something new and unique. Look at you go! Now test it… with people. The more fancy and outlandish your design, the more it needs to be tested on regular people, especially those outside the design industry. Even if your site is targeted directly to designers and no one else, designers are busy people. Busy people don’t have time to learn a whole new way of browsing.

Conclusion

The only reason I don’t tend to like showy websites with lots of extras is because every extra feature is another chance for your site to break. That’s it. That’s the only reason. I have seen far too many that basically leave the user with a blank home page if anything goes wrong at all.

It doesn’t have to be like that. Your site can be as robust as it is pretty, dynamic, and innovative. It’s just gonna take some extra work. That work is worth it.

LAST DAY: Convert Photos to Stunning Paintings with Digital Painter – only $9!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/11/5-ways-to-ensure-your-fancy-site-doesnt-suck/

How Designers & Copywriters Can Collaborate (and Why They Should)

The online world is dynamic and constantly evolving. One method holds the high ground today only to lose it tomorrow. But in spite of this volatile nature, one thing remains the sine qua non of online success: Content.

However, the question remains whether there’s a type of web content which is one-size-fits-all.

The short answer is no.

Big brands beat online competition by churning out high-quality content—well-knitted text and visuals in the form of blog posts—as a tool for lead generation. Doing this, they know that using a one-way approach to content creation in today’s age of big data and visual culture will take them nowhere.

Let’s face it, designer-copywriter collaboration is a great idea every freelancer or solopreneur operating in the digital marketing world should consider, for creating good web content.

Here’s a thumbnail analysis of why, and the benefits of going down that road.

All-in-one Content Offers Greater Value

Because the Internet is jam-packed, attention is perhaps the most expensive thing online. According to Jakob Nielsen, an average web visitor is likely to read only 20-28% of a blog post. The only power to extend the duration lies in truly compelling content.

And what is that? Any beautifully crafted article that’s saturated with high-value, attention-grabbing images and visuals.

But if you’ve never tried this before, you might doubt its efficiency. Luckily for you, experts say that articles with images get 94% more total views than text-only posts. And there’s more: infographics deliver up to 120-180% more engagement thereby increasing viewers’ retention, engagement and, ultimately, sales.

Better Illustrations

What makes the above possible is the extraordinary power of visual content in making a digestible illustration of textual messages. Indeed, “a picture is worth a thousand words.”

It’s not only about illustration, however. Readers retain 65% of any information three days later, when communicated through visuals.

Text-Visual Content is Brain Friendly

One of the top reasons why brands go blogging is to provide sufficient insights, thus making it easier for prospects to comprehend how their products and services work. Simply put, the method yields well, as 37% of marketers say visuals are essential form of content.

The reason, is that the human brain processes visual data 60,000 times quicker than text. Brain Rules also notes that:

We [human beings] are incredible at remembering pictures. Hear a piece of information, and three days later you’ll remember 10% of it. Add a picture and you’ll remember 65%.

It’s clear: web visitors do not struggle to remember details when they’re given all-inclusive memorable content.

SEO, SEO, SEO

Visual content is just so amazing. Going from merely adding glamour to a blog post, to creating other essential values, visuals can boost webpage ranks on search engines when seamlessly integrated into a body of valuable text.

If SEO were key to content marketing success, creating all-inclusive content is a task that you cannot ignore – and that’s easier done through collaborative efforts, both from SEO and ROI perspectives.

Why Collaboration Matters

The significance of having the right visuals alongside written content has become more evident. However, choosing the wrong content is as disadvantageous as having none. If you find yourself falling victim to such issues, or copyright infringement, it’s probably time to partner with an expert designer and up the game like a pro.

When graphic artists and copywriters work together, they can both flourish. Part of the reason is that design connects directly with the side of the brain that is responsible for creative thinking, image recognition and such like, while writing occupies the other side that handles logic and critical thinking.

For any content to hook prospects and compel immediate action, these forces must come together. And to get the best results designers and copywriters should not transfer works, but handle it side-by-side.

Other Benefits

There’s a plethora of them, but following are the key benefits of copywriter-designer collaborations:

Unlocking New Ideas

According to William and Phyllis Mack of the Mack Institute for Innovation Management, choosing the right partners is the first step to successful innovation:

In today’s globalized business environment, firms are no longer developing innovations in a vacuum. Instead, companies often work with partners from all over the world to develop innovative strategies and products.

Are innovative ideas important to copywriters and designers? There’s no other answer than yes, and experience has shown that more ideas emerge when these sets of creatives work together.

Even in science, it’s easier to make new discoveries when scientists share ideas rather than working as a lone genius. “The best ideas don’t come from working in a silo,” says Michele Kamenar.

Enabling Premium Service / Increased Authority

To deliver excellent service and drive better bottom line results for all parties, you probably know already that you cannot thrive in isolation as a copywriter or designer. You must collaborate!

Sara Duane-Gladden of Specky Boy says:

The jobs of copywriters and designers are very similar. They are both masters of their crafts. They express complex concepts and ideas in bite-sized bits that convey meaning in a moment. The fact that one does all this with words while the other accomplishes it with images isn’t important: They are kindred, creative spirits that can amplify their abilities when they work together.

So if you do not want to keep going back and forth, but rather accelerate quality service and build more authority, you should collaborate.

Reducing the Burden

As a copywriter with a long list of deadlines, you’re always on the search for an expert designer to turn some text into visuals. Found one, you’re still not off the hook. You keep reviewing because only an impeccable job would satisfy your clients and win you more referrals. On the other hand, a designer goes through a similar situation each time there’s a need to come up with a masterpiece that would complement an infographic or other visuals.

The process can be time-consuming and difficult. With collaboration, however, it can be lessened and streamlined. In fact, a teamwork approach will enhance efficiency on both sides.

Growing from Solopreneur Status to an Agency

Successful collaboration offers a chance for freelancers to move to the next level of establishing an agency.

A freelance copywriter with a web design expert needs only a person who offers technical SEO. Why not add that, combine all the skills, start an agency, get more clients and charge more?

Going Forward

Designers and copywriters are important personalities in the world of digital business. Media and SEO companies, PR organizations, marketing and advertising agencies, all need them to meet their bottom line.

If you’re one, not only can you generate new ideas through efficient collaboration, you can also increase the quality of your service, minimize the hassles, and expand your business.

Mega Snow & Winter Bundle from Feingold Design – only $11!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/11/how-designers-copywriters-collaborate-and-why-they-should/

Ultimate UX Design Guide to SaaS On-Boarding, Part 4: First Login

This is the 4th part of The Ultimate UX Design Guide to SaaS Customer On-Boarding.

SaaS Customer On-boarding is the process that users have to experience while initiating their journey on a company’s software application. Customer on-boarding initiates from the experience that employees previously had to undergo while joining a firm. The on-boarding process sets the tone for a good user experience.

Long story short, special emphasis should be given to making the on-boarding process as flawless as possible.

The SaaS customer on-boarding process is based on 6 comprehensive aspects, the first three of which we’ve already covered:

1. Sign up Form
2. Welcome Email
3. Drip Campaigns
4. First Login & Product Tutorial
5. Data Import & Notifications
6. Check up calls & Swag

All the aspects of the process play an equally important part in forming a desirable reputation of the brand in the eyes of the customers during the on-boarding process.

Today we will be focusing on First Login & Product Tutorial.

First Login

I cannot stress the importance of crafting a first login experience to delight your customer enough. The first login experience is where you should be looking if you want your churn rate to go down.

Rules of Thumb:

• Do not present your user with a UI that is empty. You need to keep that in mind because with a SaaS product that is B2B oriented, the user isn’t going to have everything in front of him from the beginning. Services requiring extant data to function will need that step to be performed after first login.
• Give clear directions to users for what they should be doing first. They are completely new to the interface so they would need a nod in the direction of the first step.
• They have gotten to this point—it would be great to thank them again and tell them of how cool it’s going to be, once they have set up everything.

The first log-in screen at Mention is a great example of this. The dashboard is not empty, there are immediate options with simple captions that you can explore and there’s a very clear CTA at the end, which directs you to create your first alert.

Product Tutorial

An initial tutorial can be a great way to start building a rapport with your customer, now that you’ve gotten your first login. Depending on how you design your tutorial, you can quickly familiarise them with the interface of your app so that they can get down to using it.

Rules of Thumb:

• Users have to be able to skip it. Going through a tutorial that cannot be skipped can really turnoff your user. If they don’t want to see it just yet, they should have the choice of opting out.
• It should always be something that users can revisit. It is very common to skip any pop up or notification upon logging in for the first time; users just want to start getting their hands dirty. Just ensure that it can be easily located.

These are some guiding principles that you should keep in mind when designing your first log-in page and product tutorial(s).

Making the Experience an Improvement

A famous programmer called Kathy Sierra says that the app should be able to make its users amazing at something within the initial five minutes of using that app. Ultimately the user should be taking an action that causes a result relevant to your business. Try to generate an experience that would be bound to bring the user back.

User Communication

You want to establish a relationship with the user that is of mutual benefit to both of you. That happens when you begin to communicate with them frequently and that too in the initial stages. The product tutorial is one of the easiest ways to establish that channel of communication. Ideally a product tutorial should accomplish:

• Basic Guidance on how to use the software
• Allow the user to do something really cool
• Do this within as limited a time frame as 1-2 minutes

One of the best examples of this is Canva.

1. The sign up is simplicity itself. You can create an account by just giving your email address or use a social media sign in (Recall our discussion on Sign Up Flows)

2. Decide what you want to start doing. There’s a general orientation that you can select at the beginning that will affect the images in Canva’s database that you will get to see initially.

3. The guide starts. How long will it take? 23 seconds. As soon as you click “Show me how it’s done”, a tutorial will guide you through the simple drag and drop process of selecting an image and modifying it. As mentioned above, the defaults are “intelligent” ones. A graphic is created for you and then you’re invited to give it a try.

4. The interface is colourful, engaging and very easy to use. You’re immediately looking at the Beginner’s Challenge, which attracts the user even more.

5. Finally, you get to do something fun, like selecting a hat that you drag onto a monkey’s head! The whole process takes under a minute, and you’ve already mastered the basics of using Canva.

Within 23 seconds, Canva manages to capture the attention of its users. The interface is intuitive. The tutorial is simplicity itself as it shows the process of dragging and dropping images from its database, adding the relevant headings and downloading the image. It then gets the user to do the same. It’s light hearted as well as it gets you to put a hat on a monkey!

Analytics

You can analyse the effectiveness of your first sign in and product tutorial. The sign in and product tutorial can be grouped into an experience called the first run experience. The series of steps that need to be taken can be defined and then you can do something called funnel analytics to evaluate the effectiveness of the experience. Tools I would recommend in order to build and measure your funnel are Mixpanel or Amplitude. The idea of funnel is that many users enter the beginning of the user experience and a few come out at the end.

Measure user progress through the experience by observing the completion rates for each step.

So usually, you’ll get rates of completion that look something like this:

• Step 1: 1,773 people
• Step 2: 1,701 people
• Step 3: 1,399 people
• Step 4: 1,211 people
• Step 5: 1,152 people

Now it’s between Step 2 and 3 that a lot of people opted out of the user experience, which indicates that that’s the area where you should focus.

In this way you can refine your first login experience so that it retains the most users.

Contrastica for Photoshop: Smart Contrast Intensifier – $15!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/11/ultimate-ux-design-guide-to-saas-on-boarding-part-4-first-login/

3 Essential Design Trends, December 2017

All three of this month’s essential design trends have to do with typography. And the trends showcase some pretty stellar ways to use beautiful type to create user engagement and make a great first impression.

One common theme among these designs is that all of the typography styles are highly readable. If you plan to work with a more trendy or funky text element, choose a typeface that users won’t struggle to read. The trendy technique is the trick with these designs, not the typeface itself.

Here’s what’s trending in design this month:

1. Just Type Above the Scroll

While a great image can help draw users into a design, sometimes the right words and space are the ticket.

The key to making the most of this design trend is to refine your message. The words need to be simple, say something meaningful and create value for the user.

So how do you do it?

• Start with a key phrase. It can be your mission or a value proposition for users. Tell users what you bring to the table and why your website will be important to them.
• Pick a simple typeface that has the same mood as the messaging for longer copy blocks.
• If the text block is short, such as with Types of Type, consider a funkier type option to draw users in.
• Make the most of space. Note that in each of the examples below, text has plenty of room to breathe, making it easier to read at a glance. Space can also help draw the eye to text, and can balance text elements if you don’t want to center them on the screen, such as Design Ups.
• Use color to help add visual interest. Bright, trendy hues can help draw users into the design. Color can also help set a mood that correlates to messaging.

When working with a type-heavy design, don’t force it. Sometimes you won’t have enough text to fill a full “screen.” Less is More and Type of Type use color blocking to create multiple panels that are sized perfectly for the text content therein.

2. Text in White Boxes

With so many bold visual elements in website design projects—and so many responsive breakpoints to deal with—white boxes are re-emerging as a container element for text. White boxes with dark text inside can ensure readability when it comes to messaging on top of photos, video or illustration where there is color variance.

And while this trend might sound a little, well…sloppy or lazy, it actually looks great when done well.

You can’t just slap a box anywhere on an image and hope for the best. White boxes need to be placed strategically so that they don’t cover important parts of the image and so that users do move to them in the course of looking at the design.

White boxes need to be big enough to contain a reasonable amount of text and you should have a plan for this element on smaller screens, such as allowing everything in the text box to drop below the main image. Don’t try to put a text box over an image on smaller screens because you’ll end up with a box of text that’s too small to read or the box will cover most of the image itself.

If you pot for the white box treatment, have fun. Each of the examples below use white boxes in completely different ways.

Do Space cuts a white box into the bottom corner of the image so that most of the image is visible. The white box bleeds into the white space below so that it almost looks like it comes up out of the panel below. This technique helps connect the main slider to the content below (and can even encourage scrolling).

HowIt uses circular blobs so that the white text boxes better match the tone of the background illustration. This subtle shift in shape, so that the boxes appear more fluid helps connect the elements so that the boxes and background have a consistent feel. You don’t want white boxes for text to feel like they are haphazardly placed on the background. (That doesn’t work and won’t help create a cohesive feel for users.)

Macaulay Sinclair has more text than the other examples using one part of an image-panel grid to hold the text element. Here, the image behind the white box serves no information value. It has a color and movement scheme that looks similar to other images and mostly serves to create cohesion between the text element and rest of the design.

3. Typography Cutouts

No one ever said that text has to be a series of solid filled letters. More designers are opting for typography cutouts that feature a color block over an image so that the image comes through clear lettering.

This technique can work with still or moving images and with full screen overlays so that only a small amount of information comes through letters (almost to create a texture) or with more of a block-over-image-style with more of the background image visible.

The trick to making this work is the right typeface. Letters have to have thick enough strokes so that the image or texture in the background is visible. You can’t do this with a thin or condensed font with any consistent success.

This technique also works best if the number of words and letters is fairly limited. Stick to one to three words with 10 or fewer letters or use very common words that users will know at a glance.

Danbury uses a bright text cutout as a draw to encourage users to engage with the video call to action. The entire orange box is just a giant button.

Fusion Winery uses a background video of a vineyard in the lettering. What’s great about this design is the triple layer effect: Video background below white text cutout below a product image.

The Kaneko uses an unidentifiable image as the fill for letters. If you opt for this style, keep this background simple as done with this design. There’s just a touch of color and texture that draws the eye to the text on the stark canvas.

Conclusion

The collection provides inspiration for those projects that might not have a great image or video, so that you can still find a way to create something that users will respond to. Don’t be afraid to use text as a visual and informational element in this design.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Special Exclusive Black Friday Deals!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/11/3-essential-design-trends-december-2017/

Popular Design News of the Week: November 20, 2017 – November 26, 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.

CSS Tip for Images Missing “Alt” Attribute

 

Simple Patterns for Separation (Better than Color Alone)

 

10 Free Tools to Inspire Color Choices for your Website

 

Iris – The Definitive Design Tool to Create Beautiful Color Schemes

 

Google Maps Updated with New Design for the First Time in Years

 

How We Adapted the Booking.com Mobile Site for the iPhone X Notch

 

The Desks of Top Creatives Prove that Offline Workspaces Still Matter

 

Neil – AI Content Curator for your Reading Pleasure

 

We’ve Curated a List of the Best Black Friday Deals for Designers

 

Facebook is Killing a Feature You Forgot You Hated

 

Faux Grid Tracks

 

Battle for Net Neutrality

 

The Atoms of Programming

 

7 PayPal Alternatives for Freelancers to Collect Payments in WordPress

 

Feel Homey: Handy Tips for Home Page Design

 

Canecto – Out of the Box Website Analytics and Optimization

 

Site Design: Edwin de Jongh

 

9 Must-Have Extensions to Get You Started with the New Firefox Quantum

 

How Freelancers Can Make Sure They Get Paid

 

Why Artificial Intelligence is the Future of iPhone’s iOS

 

The Pocket Guide to Creativity

 

What’s the Best Design Advice You’ve Ever Received?

 

Fontjoy Combines Fonts Via Deep Learning

 

Landbot: Build Conversational Websites

 

The Declaration of Neutrality – Internet Freedom as a Constitutional Right

 

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

LAST DAY: TT Limes, a Fresh Font Family of 23 Unique Typefaces – only $9!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/11/popular-design-news-of-the-week-november-20-2017-november-26-2017/