"> Design Archives - Engr Kabir Saleh

Posts Tagged

Design

Popular design news of the week: December 2, 2019 – December 8, 2019

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.

 

11 Web Accessibility Myths Debunked

 

Pay Attention to these Web Design Trends for 2020

 

Google Fonts by Tags

 

Understanding the Golden Ratio in Design

 

10 Rules of Dashboard Design

 

2019 Design Tools Survey

 

Welcome to XD Ideas – Where Designers Go to Grow

 

The State of UX in 2020

 

I Ditched Google for DuckDuckGo. Here’s Why You Should Too

 

Designing for Development

 

End of the Year Desktop Wallpapers (December Edition)

 

10 Things that Helped Me Improve as a UI Designer

 

How Sketching will Make You a Smarter Designer

 

Better Web List

 

Google Confirms Nov. 2019 Local Search Update

 

Runway Palette

 

Vladmir Putin is Extricating Russia from the World-wide-web

 

The Plain Text Project

 

Designers: 4 Must-Have Clauses in a Contract

 

The Power of Social Proofing

 

Pantone’s 2020 Color of the Year is the New Black

 

Spotify 2019 Wrapped

 

ApostropheCMS – An Open-Source Node.js CMS for the Enterprise

 

5 Bad Habits that Can Hurt your WordPress Website

 

Fluiditype for Simple Typography

 

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



Source link

3 Essential Design Trends, December 2019

This month’s collection of design trends is a gift to behold. Each of the trends are highly usable options that are versatile, giving you plenty of room to play and make them your own. That’s the best kind of trend, right?

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

 

Whimsical Illustrations

It seems like whimsical illustrations are practically everywhere. Fun drawings that can be anything from line-style illustrations to full-color pieces of art are popping up in all kinds of projects – even for brands, companies, of business types that you might not expect. Whimsical illustrations are trending for a number of reasons:

  • They create just the right feel for a project that doesn’t need to be heavy;
  • You can design the main imagery to be whatever you want;
  • They provide a source of delight for users;
  • Every project using illustrations looks a little different, creating a custom design;
  • The proliferation of illustration kits has made creating this style easier than ever.

The thing that might be best about using whimsical illustrations is the personality they bring to a project. The right illustrated element – or series of elements – can emotionally tie users to the project while setting a scene. The possibilities are almost endless. Illustrations don’t have to apply only to lighthearted projects, even though “whimsical” might imply it. The illustrations for Violence Conjugale feature a sense of whimsy for a serious topic, and it works. (Maybe we all need a little more whimsy in our life?)

not-violent
dark
soundboard

 

Black and Blue

It’s a classic color combination that’s making a big return to projects – black and blue palettes.

The contrast of a dark background and blue accents is eye-appealing and creates a harmonious and pleasing visual aesthetic. The projects below use this color trend in different ways, all with the same cool result.

Arm Yourself uses a black background with a black and white illustration to make bright blue lettering and accents pop off the screen. Color draws users into the interactive part of the homepage design with a drag to the bullseye instruction.

arm

Carey uses a lighter, more teal blue on a charcoal black background for a lighter feel. The blue color pulls from the logo and brand mark with buttons that have a lot of contrast from the background and brighter elements in the design. The blue continues on the scroll with bold text on a fully black background, showing the versatility of this color choice.

carey

Adera uses a simple blue button on a black and white image to create contrast and draw the eye to the active part of the design. The color palette flips on the scroll to a blue background with darker elements on top. Contrast is a vital factor here, helping dictate user flow and how to digest and interact with information on the screen.

adera

 

Anything-But-Flat Scroll Transitions

Disclaimer: I am totally in love with this trend and can’t get enough of it.

Anything-but-flat scroll transitions is a versatile design trend that’s visually interesting and contributes to usability. (It’s a win-win!) This trend is exemplified by a transition element between “screens” or “scrolls” with a visual that isn’t just a box or flat line. Think of how most parallax designs or screen-based vertical viewpoints advance from one box to another. With this trend the transition is more fluid. The examples below do this in different ways:

Oroscopo takes advantage of the blobs trend that’s been popular all year with blob elements that create waves between content elements. Contrast between light and dark backgrounds magnify this effect, while other blog shapes create visual consistency.

oro

MAHA Agriculture Microfinance uses a simple line between scroll elements but it’s got a texture to it that makes it just a little more visually interesting that having a flat line between the hero image area at the top and the secondary content block.

maha

Akaru uses a pretty amazing animated fluid design to offset the branding in the center of the screen. The animation carries into the background of the content below the scroll. (You’ll want to scroll all the way to the bottom of this one to see the transition from the dark animation back to white.) The effect is stunning.

agence

Here’s why this trend works so beautifully: The fluid transition is somewhat disruptive because the user doesn’t expect this visual and seeing the edge of a transitional element encourages scrolling. Whether the user scrolls to see how the transition changes or to preview more content is irrelevant as long as the interaction happens. It’s brilliant and beautiful, especially on desktop screens.

 

Conclusion

The best design trends are versatile enough that you can use them in new projects or incorporate them into websites that are already live for a little refresh.

A custom illustration can add extra interest to a hero area or page within your website, a tweak to the color palette can create a brilliant black and blue combination, or a neat transition can help users engage with the scroll.

If you want to spice up a project, these trends fit the bill for sure.



Source link

Popular design news of the week: November 25, 2019 – December 1, 2019

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.

 

Fascinating CSS Grid Layout Examples and Tutorials

 

The Defining Movie Poster Trend of the Decade

 

A Brutally Honest Landing Page

 

Hierarchy of Needs in UX

 

Developing a Website Redesign Strategy for 2020

 

Flowkit 3.0

 

Site Design: The Geek Designer

 

CSS Grid Layout Vs CSS Frameworks

 

The Third Generation of Interfaces

 

Buttons: Attention to Detail

 

Building Trust as a Designer

 

10 Essential UI (user-interface) Design Tips

 

WhoCanUse: Find Out Who Can Use your Color Combination

 

Shopify Vs WooCommerce Product Comparison

 

11 Christmas Icon Fonts Free for Commercial Use in 2019

 

7 Ways to Find a Niche for your Ecommerce Store

 

Tips for Choosing a Typeface (with Infographic)

 

Google Also A/B Tests the List Vs the Grid

 

Apple Pulls all Customer Reviews from Online Apple Store

 

How to Expand Globally as a Freelance Designer

 

Mouseless – Unleash your Keyboard’s Superpower

 

Designer Gift Guide 2019: The Best Holiday Gift Ideas for Designers

 

Good Design was Always Accessible

 

Can You Really Convey Luxury Through Digital Product Design?

 

Gratitude Goes a Long Way to Increase Creativity and Innovation

 

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



Source link

10 Outdated Web Design Trends to Let Go Of

If you’ve ever moved from one home to another, you know how difficult it can be to get rid of things you’ve owned for years. While digging through your closet, you find an old pair of pants you used to wear all the time despite the growing holes in the knees. But you tell yourself, “Maybe I’ll wear them around the house when it gets warmer” or “I bet the grunge look will come back in style”.

It’s easy to make these kinds of justifications in web design and development, too. You think:

“I’ve used the keyword meta tag for as long as I can remember. What can it hurt to keep doing so?”

Similar to how your clothes may become outdated or your appliances obsolete over time, the same thing happens with design and development trends. Rather than hold onto techniques that no longer serve you and only add more to your workload, it’s a much better idea to clear them out and make way for modern trends that’ll have a greater impact.

 

10 Popular Design Trends It’s Time to Let Die

When we talk about outdated web design trends, we’re not just talking about ones that have been obsolete for years. We’re also referring to trends and techniques that we know for a fact compromise the user experience and need to go away ASAP.

1. Cheesy Stock Photos

There’s nothing inherently bad about using stock photos. Many clients don’t have the budgets or wherewithal to create their own company photos and stock photos are a viable alternative.

That said, there was a time when “bad” (i.e. super cheesy and unrealistic) stock photos were all the rage. Even today, you’ll find websites that use these kinds of photos because there’s still an assumption that two people shaking hands in a well-lit conference room signals trust. (It doesn’t.)

Good deal. Close-up of two business people shaking hands while sitting at the working place

Image via DepositPhotos.

2. Hero Sliders

Image slider technology was pretty great in its heyday. It allowed web designers to conserve space while displaying a number of promotional offers at once. In addition to sliders often slowing down page speeds, they also have a tendency to slow users down as they distract them from moving onto other parts of a website.

Verizon Wireless, for instance, has a great example of a strong but simple hero image design in 2019:

Verizon Wireless 2019

This is vastly different from the image slider it used back in 2013:

Verizon Wireless 2013 - Slider - Outdated Web Design Trend

For the most part, we’ve learned to be more efficient with this space, though there are still some websites that can’t make up their minds about which offer to show above the fold… which only makes it more difficult for visitors to decide next steps. Take the initiative and do it for them with a single hero banner.

3. Autoplay

It’s not common to find websites with background audio, let alone autoplay audio, these days. That said, what you do occasionally find are websites that automatically play videos or ads with audio. Needless to say, this needs to stop. If your video (or audio) players don’t allow your visitors to take control of when they start, change that up now.

4. The 3-Click Rule

Over the years, web designers have looked for ways to decrease friction in the user experience. The three-click rule was meant to be one of the ways to do this. However, according to a recent report from the Nielsen Norman Group, there’s never been any data to back up this claim:

“In fact, a study by Joshua Porter has debunked it; the study showed that user dropoff does not increase when the task involves more than 3 clicks, nor does satisfaction decrease. Limiting interaction cost is indeed important, but the picture is more complicated than simply counting clicks and having a rule of thumb for the maximum number allowed.”

Rather than minimize for minimization’s sake, consider the complexity of the task or funnel you’re designing when determining quantity of steps.

5. (External) Links That Open in the Same Tab

There are a number of reasons to add links to your content: for navigational purposes, promotional purposes, and referential purposes. But when you add a hyperlink to your text, consider the following: Is it okay if the link directs visitors to a page in this same browser tab?

External links, for instance, should always open in a new browser tab. Your goal in designing a website is to get more visitors to convert. Letting an external link replace your website in the open tab will only decrease the chances of that happening. In some cases, internal links shouldn’t be opened in the same tab either. So, be sure to think about this the next time you add a link to your site.

6. Non-Traditional Scrolling

Although we’ve become accustomed to swipe gestures in mobile apps, horizontal and other non-traditional scrolling isn’t something that’s caught on with websites. While it’s definitely a design trend that helped many businesses set themselves apart from the pack a few years back, it’s just too gimmicky to use these days.

Robby Leonardi’s interactive resume website was one of the first I remember seeing and it was a brilliant way to capture attention — especially from those of us who grew up with Mario.

Robby Leonardi Side Scroll

But today? Any sort of non-traditional scrolling is just impractical and unnecessary. Even Robby’s current website has broken up this side-scrolling design and turned it into a vertical-scrolling page:

Robby Leonardi Vertical Scrolling

If you want to keep visitors engaged with your website in this day and age, don’t make them figure out how to scroll through your website. 

7. Keyword Meta Tag

For years (we’re talking nearly a decade), the keyword meta tag has not been supported by popular search engines. Despite knowing that the meta tag is useless, some designers still take the time to add it in. But why bother if it’s an extra step that gets you nothing in return?

8. Bad Pop-ups

Although pop-ups have undergone an evolution over the years — from the super-annoying pop-up ads that appeared outside the browser to the ever-present privacy notices we now see thanks to GDPR. While there is certainly some value in using pop-ups on a website, there are just too many kinds of bad pop-ups that need to disappear.

“Bad” pop-ups are ones that:

  • Show up too early on a website (like the second someone enters it);
  • Appear too many times during a single or return visit;
  • Send users to Facebook Messenger to collect their lead magnet and then bombard them with messages there;
  • Contain two buttons. Users that accept the offer, get a friendly message. Those that don’t are served up aggressive or shame-inducing language;
  • Repeat an offer that’s already designed into the website as a promotional banner.

9. Slow-Loading Websites

Mobile websites are notoriously difficult to optimize for speed when compared to their desktop counterparts. Unlike in years past where you could’ve rationalized away speed optimizations for mobile, today, it needs to be a priority with Google’s mobile-first indexing. PWAs are one way to give your mobile site an instant speed boost.

On a related note, by designing a PWA instead of a mobile-responsive website, you’d be able to cater to users with poor or no wi-fi connectivity — a segment that’s often been overlooked in web design.

10. Flash

I cannot believe I’m having to include this last one in 2019, but it seems there are still websites using the Flash Player.

Adobe has already told us that it would be cutting support for Flash next year. Web browsers are starting to remove their support for Flash players as well. And good riddance. Flash has long had issues with security flaws and usability issues.

If you’re trying to hold out on this (or your clients are dragging their feet), keep in mind that this is what visitors will see on many browsers in 2020 and beyond:

Kirkland Ellis Flash Player

Bottom line: If the creator of Flash is pulling support, you need to do the same for any of your websites that still use it.

 

Wrap-Up

It’s easy to get wrapped up in what the next big thing is in web design — AR tech, typography trends, color gradients, etc. But what about all of those trends and techniques that have become a habit over the years?

Rather than hold onto outdated design strategies that will only hinder your progress as a web designer and hold your clients’ websites back, start shedding these obsolete (or soon-to-be obsolete) practices now.



Source link

Transform Your Design with Unified UX

Unified User Experience has been a hot topic for years but it’s still hard to find a creative team that really gets it. No, it’s not the quest to understand the origins of the universe, nor a higher calling to be “one with everything”, but it does have the potential to change the way you think about design forever.

Unless you’ve been hiding under a tinfoil hat for the last few years, you probably know that UX and UI are not the same thing because “UX is more ergonomic”, or some such nonsense. But what about the unified part? Normally speaking, I’ve got very little patience for hipster acronyms and nit-picking, but actually it turns out there’s more to this than fake specs and chai latte.

Imagine you’re standing outside two different coffee shops. They both sell pretty much the same coffee at pretty much the same price. How do you choose? Well I’ll bet you a unicorn frappe it’s not one specific thing that sways you, more a general “feeling” that “it’s better”. And you know what? That’s UX.

It’s probably time to rethink everything

It’s probably time to rethink everything. Experience has become much more important to users than product, and from a design perspective, this puts software in pretty much the same space as coffee shops.

For the service industry, each user-brand interaction is a touchpoint. It’s not important where or how that interaction happens: seeing the shop, opening the door, speaking to someone at the counter, whatever. The aim is to create a feeling of familiarity, ease and comfort for the target user.

Now imagine scaling that experience. Say you wanted to take your coffee shop into a mobile vending unit. How can you make sure that your users get the same feeling of comfort and familiarity that they had in the high street? That’s Unified UX.

 

The Broader Context

Unified UX is much more than a DLS or style guide. In fact, you’d be better off thinking about tools like Atlassian and Sketch as…well, tools, to help you achieve the broader aim of unity.

It’s more than responsive design and digital ecosystem too. If you’re still thinking in terms of “mobile”, “tablet” and “desktop” configurations, you’d do well to heed the words of design guru Cameron Moll who urges us to recognise that, for today’s users:

The best interface is the one within reach

Take the Galaxy Fold, for example: Phone, tablet, phablet or plain old monstrous? What about Echo, Dot and Alexa with no screen at all? Or Apple Watch? As Cameron points out in the same talk, the concept of “TV” has also become pretty loose. Do we mean the content, or the device it’s viewed on? Is “mobile” a noun, a verb or an adjective? How is a native app different from a mobile browser experience?

The point is, from a unified UX perspective, it doesn’t matter. The job of the UX team is to create that “brand feeling” across all platforms and in all facets of the design.

Take a look at Southwest Airlines’ “Virtual Booking Desk” from — wait for it — 1998; laugh all you want, but remember that back then, most people were completely new to the internet. Seeing a familiar scene gave users a sense of confidence, which is (still) integral to the Southwest brand.

 

What Goes in to Unified UX?

Everything!

It starts with deep awareness of the needs, expectations and current experience of the user. Watch people using your stuff. Talk to them afterwards about what it felt like. You’ll definitely learn something. If it’s a new project, do focus groups, then do some more. Co-create if you can.

From there, develop a design principles framework. The key concerns of your user group should shine through in every single aspect of their brand experience.

Broadly, there are two key concepts to unify:

  • Form and Function – Yes, you need both!
  • Data Symmetry – Data should follow users.

Here are some questions to consider:

Available Media

How do your users want to interact with the brand?

  • Android/iOS app;
  • Voice Interface;
  • Live Chat;
  • Bot;
  • SMS integration (very popular in the US);
  • Telephone/VOIP;
  • Video;
  • Print Media;
  • Face to Face.

A website doesn’t work for everyone!

Look and Feel

Does your framework include:

  • color;
  • shape;
  • imagery;
  • story;
  • art direction;
  • icons?

Do your choices work everywhere? How do you balance unity of UX and compatibility? How do you merge native OS elements with brand-specific ones?

Layout

Guide users to the content they’re looking for. Will their needs change across:

  • platform;
  • device;
  • time;
  • user journey?

How do you balance usability and unity of UX on small screens?

Interaction

Are some features device specific?

  • Camera;
  • Location Services;
  • Accelerometer;
  • Compass.

If so, is this what users want? How will interactive behavior transfer?

Responsive Behaviour

Remember the device continuum – it’s usually best to think in terms of

  • small;
  • smallish;
  • biggish;
  • big.

(Not specific devices.)

Tone

Important for:

  • Written copy;
  • Voice Interface;
  • Phone Help;
  • Face to Face;
  • Video;
  • Text or Automated Chat.

Does the tone need to change in certain situations:

  • errors;
  • call to action;
  • feedback/complaints;
  • specific user groups?

Are you using dated words like “click” when “tap” would be a better choice?

Continuation

If the user starts an interaction on one device and transfers to another, does their data follow them? If shopping cart items, elapsed time, favourites etc are consistent across interfaces, you’re doing it right!

Single Sign-On is one of those features that’s bound to make your users smile. With this in mind, are your protocols up to scratch? If you’ve got a native app, you need LDAP or similar, for example. Don’t try and use cookies! Is the backend architecture able to handle the load?

 

Development Environment

As you probably see by now, unified UX isn’t something you can do by yourself. The better organised your resource repository, the easier it will be to onboard new team members and maintain consistency. Consider:

  • Toolsets;
  • Documentation;
  • Coding and File Naming Conventions;
  • Standard Elements Repo.

Upgrades and Integration

How will you update legacy material and add new elements as the design evolves?

 

Who’s Doing it Well?

Yes, unified UX can be a pretty large and expensive undertaking, and even the giants still get it wrong. That said, here are some nice little highlights from a few unexpected places:

Spotify

No surprises here in terms of the company’s size, and sure, their UX is (arguably) pretty slick no matter where you find it. But what really caught my eye today is their commitment to their backend and support for third party developers.

This gives Spotify users enormous scope to enjoy a highly integrated, reliable and ever-expanding ecosystem that always feels the same.

Mailchimp

Not only do they have great cross device, cross platform consistency, their famously chirpy tone and loveable mascot are instantly relatable. What’s even cooler is that, when something goes wrong, the tone subtly changes.

This isn’t surprising because they have a really extensive style guide for new writers.

Linguee

Primarily a web-based translation application, their iOS app is a real favourite of mine. It not only offers dictionary-style definitions, but use-in-context translations as well, which really helps to avoid the classic google translate failures. It’s understandable at a glance on both small and large screens… and it’s free!

Good evidence that simplicity and functionality often win out.

 

Conclusion – Why Bother?!

Well, in a nutshell, because it’s what your users want. Yes, to really nail a unified experience is a big undertaking, particularly if you’re coming into an old project and dealing with legacy code, but the fact is, it’s the future.

The range of available devices is growing rapidly, and users want whichever one is closest. At the same time, we’re becoming more and more sensitive to experience, and less tolerant of inconsistency or nuisance. Smaller companies must find ways to provide the kind of unified experience that customers expect, or face being swallowed by giants.

As independent developers, it’s in our interests, and within our ability, to find ways to make UX unified.

 

Featured image via DepositPhotos.



Source link

Popular design news of the week: November 18, 2019 – November 24, 2019

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.

 

Diez is Now Open Source

 

Internet World Despairs as Non-profit .org Sold for $$$$ to Private Equity Firm

 

The Logos of Starbucks, Google, and More Get Redesigned by a Bot

 

It’s Time to Stop Designing ‘Minimum Viable Products’

 

Web Dev Metrics

 

20+ Color Tools for Web Designers

 

Apple Built a $1 Trillion Empire on Two Metaphors. One is Breaking

 

Enhancing Clickable Area Size

 

The Aesthetic-Accessibility Paradox

 

14 Inspiring UX Designer Portfolios

 

Designers: Ignore Best Practices

 

Why the Best Design is Sometimes Invisible

 

What Animation Taught Me About UX Design

 

Illlustrations – Large Set of Opensource Illustrations

 

Microsoft Went all in on Accessible Design. This is What Happened

 

Video Game Console Logos

 

Macro Trends in the Tech Industry

 

Framer is Going Web Based with Multi-user Editing

 

How We Scaled Our Design System to Unleash Skyscanner’s New Brand

 

The Quest for Simplicity

 

Passwords are a Design Problem

 

Design Tokens Beyond Colors, Typography, and Spacing

 

Complex Search-Results Pages Change Search Behavior: The Pinball Pattern

 

Explore Dribbble’s 2019 Global Design Survey

 

Evolving by Design

 

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



Source link

Popular design news of the week: November 11, 2019 – November 17, 2019

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.

 

Paged.js

 

Facebook is Secretly Using your iPhone’s Camera as You Scroll your Feed

 

Don’t Hire Dribbblish Designers

 

Micro CMS – A Lightweight Content Management System for Building Websites Faster

 

The 16-Inch MacBook Pro

 

Duet Design System

 

Pac-Man… in CSS!

 

SEO Myths Busted by an Ex-Googler

 

Warner Bros.’ New Brand is a Glimpse at the Future of Entertainment

 

YouTube Says it has ‘no Obligation’ to Host Anyone’s Video

 

Mobile Dark Patterns

 

Chrome ‘Speed Badging’ will Shame Websites that Load Slowly

 

How to Get Started in Product Illustration

 

A Touch of Neon in Web Design: Using Color to Draw a User’s Attention

 

5 Essential UX Design Tips

 

My Complete Toolkit for Design and Productivity

 

Chicago Design System

 

Creative Activities to Help your Design Team Thrive

 

A Designer’s Primer to Behavioural Design

 

Apple Eyes 2022 Release for AR Headset, 2023 for Glasses

 

Know your Worth! A Guide to Setting your Rates

 

The 2019 Web Almanac

 

Back in 1900, Activist W. E. B. Du Bois was Using Infographics to Challenge White Supremacy

 

Words and Phrases in Common Use Which Originated in the Field of Typography

 

Berlin Wall Graffiti is Made into a Typeface

 

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



Source link

Mobile App Website Inspiration: 20 Application Websites And Tips To Design One

App websites are sometimes neglected by app owners. The owners or developers set up everything in place for the app to go ballistic on the market, except doing the basic marketing step: designing an app website that converts your visitors to users.

But is it enough to create a random website for an app?

Nope.

If you do a rushed job, your website will be just as good as not having one. You’ll end up having visitors come to your site that you’ve been promoting and they’ll close the tab as fast as they’ve clicked on your link.

You can avoid this unfortunate situation if you take the time to create eye-catching and engaging app websites designed to consistently convert visitors into users.

It’s really not all that difficult when you follow these 5 simple steps.

 

5 Simple Steps to Creating the Best App Websites

Step 1: Choose a Mesmerizing Color Palette

Not everyone will necessarily agree with your idea of what a mesmerizing color palette would be. Maybe you’re not even sure what it should look like.

Not a problem. Stick to these 3 simple rules and your selection should be spot on every time:

  • Your palette should feature colors that immediately attract visitors’ attention.
  • Make sure it’s on brand so as not to detract from the message.
  • It needs to be visually supportive of the message as well.

Notice how the use of pastel color touches in this Headspace example are every bit as effective as bold, brash colors. Much more so in fact. They give the site a friendly, lighthearted look that helps to convey the message.

1

You can create a similar colorful app website with this Be Theme pre-built website that puts an eye-catching palette of bold colors to good use.

2

Magpie illustrates the result of creating a color palette that aligns perfectly with its brand – in this case, visually memorable pastels.

3

Muse’s subtle use of a natural, neutral color palette reinforces the message that their product line makes users more mindful and connected as they go about their daily lives.

4

On the other hand, the vibrancy of the BeApp2 color palette is designed to perfectly appeal to a large audience of physically active users.

5

Step 2: Feature Crystal-Clear Product Photos and Images

People don’t want clever hints as to what the app looks like. Anytime visitors have to try to figure things out you’ll likely loose them. They want to be able to clearly understand how easy or how difficult using the app will be; and above all how it differs from the other 400 similar ones on the market.

Bite for example, clearly displays how the app appears on a smartphone while giving the user a sense of how easy it is to work with.

6

You can create a similar app website with BeWallet. This pre-built website provides an excellent starting point for building a website designed for financial apps. Financial apps are in great demand; especially those that are both helpful and straightforward to work with.

7

BeSoftware provides an excellent foundation for creating a website that allows a visitor to navigate through the inner workings of the app.

8

The use of before and after examples is a simple yet highly credible way to demonstrate what an app is capable of. JibJab applies this tactic to near perfection.

9

Step 3: Give Visitors A Clear Picture Of How The App Works

Showing visitors what an app does is a necessary step, but it’s not enough. You need to show how the app works as well. One of the most effective sales drivers lies in the ability of an app website to allow visitors to imagine themselves as actual users of the app.

Video is one of the easiest ways to accomplish this. PeekCalendar’s hero section includes such a video.

10

BePolyglot may not have been initially created only for presenting an app, but its product in use hero section is exactly what you need to offer the users a preview of your app.

11

The best way to present a video is to invite the visitor to watch it (not everyone enjoys watching a video that automatically runs). BePay’s video is opened with a CTA button above the fold.

12

Tunity’s website uses a slider in the hero section to show several examples of how the product works. In fact, the entire website brilliantly presents the various workings of the app in great detail.

13

Step 4: Don’t Be Afraid To (Over)Use “White” Space On App Websites

An overly generous use of white space often does more good than harm, while sparse usage can have the opposite effect. Use just enough white space to highlight the main message on the page. Add a little bit more, and you’ll be in great shape. White space makes it easier for visitors to focus on a single message or element, or on several.

Curio utilizes a clean, fresh design that makes it ever-so-easy for the eye to focus on what’s most important.

14

The BeProduct4 or BeHosting2 pre-built websites can be used to create an app website that has the same, clean and fresh effect. Dark “white space” is used effectively in one example; white and pale blue in the other. The message is clearly presented in both examples.

15
16

SpellTower is an extreme example of white space usage. 90% or more of the page is white space, yet it is by no means excessive. The user clearly knows where to go or what to do next.

17

Step 5: Use CTA Designs That Will Grab Visitors By The Eyeballs

The very worst thing you can do with a CTA button (with the possible exception of causing it to send a visitor to the wrong place) is to make it hard to locate. The simple fact is, you want to make it virtually impossible to miss and make your visitor feel compelled to click on it.

Bright and bold are the operative parameters.

The Splitwise CTA button clearly stands out. A visitor will first be drawn to the headline, next to the sub-headline, and the flow naturally extends to the CTA button which is easy to see.

18

BeERP uses a bright green color to draw attention to the primary CTA button and a somewhat plainer color (black) to highlight the secondary button.

19

As the BeKids example illustrates, it can be perfectly OK to use the same color for the CTA button as is used in other visual elements; in this case blue. Rather than being lost in the shuffle, the button stands out.

20

 

Conclusion

Follow these 5 surefire steps and you should have little problem creating an app website that’s designed to turn visitors into customers. Your mesmerizing color palette and clean imagery will attract attention. Clearly illustrating what the app does and enabling a potential user to visualize how to work with it keeps visitors engaged. White space helps to make the user experience a pleasant one, and bright bold CTA buttons lead to conversions.

It’s important however to remember that the website presentation should be geared to making the intended audience want to use the app.

If you really intend to create as many app websites as possible (while avoiding Christmas Every Day or Groundhog Day issues) you might want to check out Be Theme’s gallery of more than 450 customizable pre-built websites. They’re functional and visually impressive, and they have intuitive navigation and everything else you need to create one attention-getting app website after another.

 

[– This is a sponsored post on behalf of Be Theme –]



Source link

Popular design news of the week: November 4, 2019 – November 10, 2019

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.

 

No More Brand Colors?

 

How to Design for Assholes

 

Microsoft Previews its Fluid Framework

 

New Microsoft Edge Logo

 

Adobe Announces Photoshop Camera with ‘AI-powered’ Filters

 

The Evolution of Material Design’s Text Fields

 

Sidebearings.com — New Typography Resource for Designers, Typographers & Type Nerds

 

Striking Examples of the Glitch Effect in Web Design

 

Typographic Illusions

 

Baywatch Red: The Birth of a New Pantone Colour

 

How Uber Uses Psychology to Perfect their Customer Experience

 

5 Tips on Making your Website Content Reflect your Brand Identity

 

Exploring New Ways to Manage Content in WordPress

 

Typora: A Truly Minimal Markdown Editor

 

Adobe is Bringing Illustrator to the iPad in 2020

 

We Stood up to a Patent Troll and Won

 

A Year in Graphic Detail

 

Adobe’s Inconsistent Icons are Driving Designers Nuts

 

Recursive Mono and Sans, a Free Variable Type Family

 

Why Some Designs Look Messy, and Others Don’t

 

Laughing OnLine

 

Trusting your Design Instinct

 

Let’s Kill the Hourly Rate: We are Leaving Money on the Table

 

Success Comes to Those Who Understand their Customers

 

Design is a Long Game: Invaluable Advice from Freelancer Lisa Engler

 

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



Source link

Popular design news of the week: October 28, 2019 – November 3, 2019

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.

 

Everyone Uses CSS Frameworks

 

10 Best UI Kits for Web Designers

 

The Five Senses of UX

 

High Converting Landing Pages

 

Google Announces .new Domain Availability

 

10 Shortcuts Made Possible by .new

 

Building the Constellation Design System

 

Dark Mode is Everywhere. Is it Really Better for You?

 

Here are the Winners of the First Contest for Hacker Stock Photos

 

UX Lessons Learned from ECommerce Projects

 

Scandinavian Color Trends

 

What Life is Really like for Freelance Designers, in 5 Numbers

 

I Accidentally Uncovered a Nationwide Scam on Airbnb

 

Rethinking my own Design Process with Figma

 

50 Years Ago, I Helped Invent the Internet. How Did it Go so Wrong

 

How to Become a Freelance UX Designer

 

Connecting the Dots Between Product and Branding

 

10 Unexpected Ways to Spark Creativity When You Feel Uninspired

 

6 Crucial Skills for Building a Good Workplace Reputation

 

Adobe Exposed Nearly 7.5 Million Creative Cloud Accounts to the Public

 

HELLvetica – A Hellishly Kerned Helvetica, Made for Halloween

 

Three Creatives on How They Translated the Personality of their Work into their Website

 

Fontsmith Launches Nine Variable Fonts

 

It’s Time to Rethink Voice Assistants Completely

 

We Asked 100 People to Draw Famous Logos from Memory

 

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



Source link