Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

How Color Impacts UX

Posted:Mon, 22 Jul 2019 10:45:00 +0000
Let’s start with a common example: You’ve just finished a website design for someone. It looks and functions exactly like the wireframe. Everyone on the design team has praised the project. The client hates it, but they can’t explain why.

The culprit might be color. Different colors can evoke such strong emotions that people have sharp reactions to them. It’s part personal preference, part psychological, and even part social norms. Understanding these tendencies and user preferences can greatly impact user experience.

Here’s what you need to know.

User Expectations and Preferences

User experience starts with the type of user your website or app is designed for. Basic demographics such as gender or region where a user lives can impact their perception of your design based on color. (You can read more about color and cultural considerations here.)

One of the most interesting impacts from color on UX is linked to gender. Studies have shown that men and women tend to like and dislike certain types of color.

Men tend to interact more with websites that have darker design schemes and more saturated colors, such as the design for VLNC Studio, above.

Women tend to prefer to interact with websites that have lighter design schemes and more muted color palettes, such as Tally, below.

Some men have a sharp reaction to websites using distinctly feminine colors such as pastel pinks, purples, and yellows.

More women tend to be put off by websites with harsh color schemes such as dark background with fully saturated red accents.

Mid-tone palettes are the most generally appealing to everyone.

Color Associations and Meanings

While it’s not an exact science, colors have fairly distinct emotional associations. Note that some colors can fall into categories of extremes. These associations tend to work with other design elements to create an overall vibe.

When a user sees a certain color or combination of colors, it creates an immediate response in the brain.
- Red: Power, danger, love/passion, hunger
- Yellow: Energy, happiness, light, warmth
- Orange: Creativity, determination, stimulation, encouragement
- Green: Nature, growth, harmony, freshness
- Blue: Confidence, trust, serenity, calmness
- Purple: Magic, royalty, ambition, independence
Establishing Brand Recognition

You expect design elements for Coca-Cola to be red. The color is so synonymous with the brand that it’s referred to as “Coke red.” Change the color and the brand is confusing. You don’t recognize it right away. The user is jarred and doesn’t quite react in the expected fashion. The drink might even seem to taste different.

All of those feelings come from changing the color. You might have felt yourself say “what?” when you saw the first image with green Coca-Cola branding.

It impacted the user experience you would have with the brand moving forward.

Color is an important element in branding because it creates that distinct connected between a user and a design. Color tells users what the brand is about. It tells users about the thing they are about to engage with.

Change that color, or use something off brand, and the user experience suffers because website visitors are suddenly confused or uncertain about the brand they thought they knew.

User Patterns Connect to Color

Have you noticed how many websites use red or orange buttons?

There’s a reason for that.

Bright colored buttons that contrast with the background of a website – red and orange often stand out from either light or dark backgrounds. Can help users find, understand, and want to engage with click- or tappable elements because they visually, and immediately, know what their expectation of that element is.

A key part of user experience is providing easy opportunities for users to interact that they enjoy and understand.

Cruise uses a ghost-style button with red text and a red hover state. It’s a different spin on traditional solid-color buttons, but there’s little question as to how to interact with it. Color draws users to the button.

Net Bluez uses a bright orange button for the most important element in the navigation menu. Notice how that element tends to jump off the screen begging to be clicked.

Increasing Conversion Rates

Challenge yourself in the design process to A/B Test button color. You’ll likely find that one color has a distinctly higher conversion rate than the other. (And it might not be the color you expect.)

Conversion rates tend to increase when the color of buttons or links is in stark contrast to the rest of the design. So, while you want to use a brand palette, picking a contrast color is key to generating conversions that contribute to overall user experience.

Look at the website below for a minute. Which color button is most likely to make you click? (The original color is blue.)

Providing Accessibility to All Users

Finally, color impacts UX in a way that’s not emotional or rooted in psychology. It’s much more practical than that.

Color impacts user experience because it can make a design accessible or not.

In order for everyone to understand a design fully, and engage with content, they must be able to see and read it with ease. Using color palettes and contrast ratios that fall in line with Web Content Accessibility Guidelines (WCAG 2.1) can ensure that every user can understand your color choices.

Use a color-blind filter, such as those in the comparisons below, to help simulate what other users might see when they look at your website. How could that impact usability?

Conclusion

Think of color as a tool to help users better interact and experience the content on your website. It impacts user experience on an emotional and usability level.

The key to figuring out if color is impacting UX in the right way is through user testing. A/B color tests can be a valuable tool.
Source
Popular Design News of the Week: July 15, 2019 – July 21, 2019

Posted:Sun, 21 Jul 2019 10:45:15 +0000

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.

Product Design Tools to Use in 2019

Google Photos is Making Photos Semi-public

84 Cognitive Biases You Should Exploit to Design Better Products

How Uber Redesigned its Interface for the Rest of the World

Everything You Need to Know About CSS Margins

Interaction Design Inspiration – Jul 2019

A New System for Designing Motion with Both Sketch and Figma by Google Design

Ways Web Designers Give Away their Time (Without Realizing it)

How do I Increase my Domain Authority in 2019?

DuckDuckGo Expands its Maps UI with a Few Familiar Features

Resource: The Website Directory

Building a Design System: Typography

Bamburgh UI Kit

Accessible CSS Generated Content

Managing Multiple Backgrounds with Custom Properties

The Spectrum of Maturity for Design Systems

Let’s Build a Web Server. Part 1

Creating Pixel Art with CSS

Butchery – Free Script Font

When You Can’t Find the Words, 65 New Emoji are Here for You

Dear Google, I’m Blocking You from my Website

50 Shades of Black: Effective Use of no Color

See the World’s Oldest Emoji in this New Archive of 650 Ancient Symbols

The 17 Coolest Fonts of 2019

How to Survive an Open Office

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source
10 Best Mobile Apps for Learning to Code

Posted:Fri, 19 Jul 2019 10:45:20 +0000

What’s even better is that you don’t have to spend years mastering programming either. Thanks to numerous coding apps available for both Android and iOS devices, you can easily level up your coding skills even when you’re on the go.

In this post, we’ve rounded up the best coding apps that will help you learn to code like a pro.

SoloLearn

SoloLearn is an app available for both iOS and Android devices and it also has a web app so you can use it to learn to code from anywhere. The app offers a number of different courses in languages such as JavaScript, Python, Java, and more. The app offers free trial as well as paid monthly and yearly plans.

Encode

Encode is an Android app that offers lessons in programming in bite-sized portions. The app has programming challenges that you have to solve in order to progress further. It also includes practical examples and teaches you how to program in HTML, CSS, JavaScript, and Python. On top of that, the app has offline mode so you can continue learning even if you aren’t connected to the Internet.

Codemurai

Codemurai offers hundreds of bite-sized coding lessons that were created by industry experts on web development, mobile app, and game development. The app has lessons for languages that include HTML, CSS, JavaScript, Python, TypeScript, Angular 2, MongoDB, Node, React, and more. You will learn programming through fun coding challenges and then have the ability to test your knowledge with quizzes.

Mimo

Mimo is a programming app that allows you to develop programming skills that will help you develop an app or a game, make a website or become a hacker. Based on your preferences and interests, you will get a personalized track that will teach you the necessary skills. It’s available for both iOS and Android devices and offers courses in JavaScript, Ruby, Swift, C, C++, and other popular languages.

Grasshopper

Grasshopper is a free iOS and Android app that teaches you how to code through JavaScript puzzles that you have to solve in order to progress. This app is very easy to use as it allows you to use blocks and arrange them in a logical order in order to create a working code. You also get real-time feedback and unlock achievements as you become more proficient.

Programming Hero

Programming Hero is an Android-only app that offers personalized paths towards coding mastery. The emphasis of this app is on making coding fun and it does so through teaching you how to build your own game while learning how to code at the same time. The app also offers forums where you can chat with other app users and exchange knowledge and tips.

Tynker

While Tynker is primarily geared for kids and parents or educators looking to take their children’s and student’s education further, there’s a lot you can learn from this app. For starters, the app supports not only game design but also basics of robotics and more advanced languages such as JavaScript and Python. The app offers challenges, quizzes, and even level editors and character creation. The app is available for iOS devices.

Enki App

Try the Enki app if you want a personalized track that will allow you to improve your programming skills. You can easily track your progress as you learn Python, Linux, JavaScript, HTML, CSS, Java or Git. What makes this app different is the fact that you can set daily goals to learn programming and keep track of your streak. Each lesson offers a summary of the main concept for the day as well as an attached article that goes more in-depth. Enki is available for iOS and Android devices.

Programming Hub

Programming Hub was named Google Play’s Editor’s Choice app and with good reason. It supports a wide array of languages and delivers the lessons in bite-sized interactive lessons and courses. Supported languages include Java, C++, C programming, HTML, CSS, JavaScript, and more. What’s more, the app was developed in collaboration with Google experts. The app is available for both Android and iOS devices.

Easy Coder

Easy Coder is an Android app that focuses on teaching Java programming exclusively. The app provides step-by-step interactive lessons, quizzes, and programming challenges which will teach you the basic programming concepts and prepare you to develop your skills even further. Lessons are short and concise so that you consume them even if you’re on the go and the app also comes with practical examples to clarify the programming concepts.

Source
Is Google Toast?

Posted:Wed, 17 Jul 2019 10:45:12 +0000
For those too young to remember, the Browser Wars entailed a tech rush by, among others, Netscape and Microsoft, resulting in useless features being implemented because they were fast to bolt-on, and useful features being rushed because they were hard. After the Browser Wars, the internet entered an era of stability as the last vestiges of the old web were mercilessly hunted down and destroyed by Google.

Chrome and Chromium-based browsers have the vast majority of the market share, and with the new version of Edge being based on Chromium, only Firefox is truly left to compete. We’re already seeing the effects of this, and they’re not ideal.

Get ready, this one is going to have a lot of links, and they’re important…

The Saga of <std-toast>

On June 12th, 2019, Google developers asked for a review of a proposed new element for HTML. Specifically, they asked the Web Platform Incubator Community Group (WICG), a community dedicated to fostering open discussion about the future of the Internet as a platform. It’s run by the W3C, and generally, it’s exactly where you should be asking about potential changes to the actual foundation of the Internet.

On the same day, however, they announced their intent to include the element in the Blink rendering engine. Now, that doesn’t mean it’s going to happen any time soon, but it caused some significant consternation.

The Basic Idea

Well first, let’s talk about the element itself. It’s a pop-up notification. Literally, it’s a notification that pops up from the bottom of your screen, like toast… from a toaster, or from the top, like toast from an upside-down toaster [feel free to insert a joke about Australia here].

This notification element can show up and disappear on its own (the term used is “auto-expiring”, or it can require interaction to send it away. It’s basically an HTML element devoted just to “we use cookies” notifications.

The basic HTML could be written like one of the following examples:
```
<std-toast>Hello world!</std-toast>
```
```
<std-toast><p>Hello world!</p></std-toast>
```
```
<std-toast>
  <p>Hello world!</p>
  <button>Click me!</button>
</std-toast>
```
```
<std-toast>
  <p>Hello world!</p>
  <a href="https://example.com/" target="_blank">Click me!</button>
</std-toast>
```
The Problems with <std-toast>

I mean… besides the unfortunate acronym at the beginning of the tag? And the problem that actual toasters are not, in fact, a universal metaphor in Internet-having countries, as pointed out by the ever-brilliant Jen Simmons?

I believe new HTML elements should go through a standards process, be debated by multiple parties (not one), be useful to most websites (pave the cowpaths), and be written in language that makes sense for HTML, especially for folks who don’t speak English well. So no on this.

– Jen Simmons

Ignoring those issues, it still requires JavaScript to work properly at all.

It’s additionally galling that toast is fundamentally an ephemeral UI element that is apart from page layout, and can’t work without JavaScript. Is there any other html element with those semantics? It’s a really odd precedent.

– Matthew McEachen

An HTML element that requires JavaScript. I’ll say it one more time for the Google devs at the back: JavaScript breaks, and it breaks a lot more often than plain HTML/CSS.

Then, it’s just gimmicky as hell. I mean, it’s something that we can already make with existing technology, and implementing it into HTML doesn’t actually make it that much easier. Nor is it particularly useful outside of a very narrow use-case. All it does is make the web’s underlying technologies “more like apps”, and while that’s not strictly a bad thing, is that really all we want for the Internet?

<toast> makes no sense to me. It reminds me of <marquee>, <blink>, and all the other gimmicky tags from before we figured we should separate styling, behavior and markup.

– Matteo Cargnelutti

An additional point: even marquee and blink didn’t need JavaScript to just work. They were awful in so many ways, but they ‘worked’ on their own.

The Development and Review Process

One common perception is that a couple of employees at Google had this idea, and decided to just throw it into their browser engine, figuring that everyone else would just go with it. As previously mentioned, the whole situation is highly reminiscent of the browser wars, when browser vendors came up with gimmicky proprietary elements in an effort to compete.

Timeline: initial commit to personal repo: May 24 comment by an editor of WHATWG HTML (also a Google employee): May 28 Intent to implement email: June 12 Request for TAG review: June 12 First mention in WICG: June 12

Dave Cramer

Web standardization according to Google? “Nobody outside my team has reviewed or approved of the explainer in my private repo, but if we implement and encourage devs to use it, surely our competitors will agree to implement it [because our market dominance determines compat]”.

– Elika J Etemad

This has understandably upset people who very strongly believe in a community-driven approach to developing technologies as basic and open as HTML.

One of the benefits of standardization through W3C Working Groups is diversity of input. W3C requires the consideration of all feedback, requires consensus to move forward. The diversity of vendor perspectives considered matters, because different vendors have different values.

– Elika J Etemad

There is a process. It’s quite formal and clear. It’s not new. It’s not a matter of personal preference, nor a “misunderstanding”. Not a “you say tomato I say tomato”.
https://www.w3.org/2005/10/Process-20051014/tr.html#cfi

– Jen Simmons

Think of all the many HTML elements that were considered and rejected over the years — and we are supposed to be on-board with TOAST? Because a couple guys at Google decided they want it. And they can. So no to <footnote> <author> <publication-date> But yes to <toast> ???

– Jen Simmons

Even people who generally like and support the idea of the std-toast element are unhappy with how it was presented to the community:

Look, I get the “Move fast! Break things!” attitude. And I think it is exactly right that Google should experiment with the web. We all should! And, again, I think that <toast> is probably a useful addition to HTML.
But the way Google has gone about introducing it to the world betrays a huge lack of empathy for the poor sods who have review standards, for other browsers, for users, and for the broader Web community.

– Terence Eden

The Implications

Despite everything shady Google has ever pulled [please don’t kill our PageRank, thanks!], I’d honestly like to believe that this was the mistake of a few, rather than the beginning of Google dictating the direction of web design and development as a whole. But if it is, we have a whole new problem on our hands.

Google’s priority has been, is, and always will be making loads of money. And who can blame them? But if we don’t have competition between, not just browsers, but browser rendering engines, then a couple of random people at Google who haven’t necessarily thought things through will be able to drastically change the direction of the web pretty much whenever they like.

Look, I still generally like the things Google makes, but let’s be real: they don’t always make the best decisions. I could make a joke about Google+, here, or the even more ill-fated Google Buzz, but let’s have a look at a something that more directly impacts web designers and developers:

If Google were in charge of the Web Platform, we would not have CSS Grid Layout. With the personal exception of @tabatkins, Google did not believe in CSS Grid. Microsoft and Mozilla implemented their own, but it was Bloomberg who funded @igalia to code Blink’s implementation.

– Elika J Etemad

Featured image via DepositPhotos.
Source
Meeting the New Twitter.Com

Posted:Tue, 16 Jul 2019 12:45:41 +0000

After months of extensive testing, the new design is a confident, and positive change for one of the web’s biggest names, albeit with some controversy that is bound to cause a ruckus. If you’d like to be among the first to have an opinion, you can opt-in right now, or Twitter will opt-in for you in the coming days, because this change is mandatory.

the new Twitter site is self-consciously dashboard-like

Twitter’s life began as a deliberately stripped down social network, in the same way that Google began as a stripped down search interface. Throughout its history, design changes seem to have been attempts to add features, without changing the core simplicity of its timeline UI.

The new Twitter design throws that strategy out of the window, with fundamental changes to the site. Where once there was the illusion of a simple news feed, the new Twitter site is self-consciously dashboard-like. Helped, in no small part, by the relocation of the menu from top horizontal, to left vertical.

The navigation change has been an opportunity – or more probably, a solution – to expose some of the features that have been introduced, but are rarely used outside of the mobile apps; the explore tab, bookmarks, and lists are all prioritized, and direct messages now have a dedicated space.

You’ll also find the introduction of not one, but two dark modes, which is presumably intended to increase eye-fatigue, ensuring you spend less time on the site ranting about the lack of an edit button.

there’s very little new here, other than a more app-like experience for users who prefer not to use an app

There is, frustratingly, still no edit button. Anyone who spends any time on Twitter will be aware that 50%+ of all tweets are instant replies, by the same account, correcting a typo in its original tweet. Of course people can’t be allowed to edit a tweet that’s already been liked or retweeted, but there’s no reason Twitter couldn’t strip likes and retweets from any edit.

Perhaps more frustrating is the fact that verification is still limited. Pop-stars, movie-stars, politicians, et al get a little blue badge, but you and I don’t. What this means is the platform is still essentially anonymous, and will continue to be plagued by bots, trolls, and spam. If Twitter is looking for a way to monetize its main product, paid verification with the option to auto-mute anyone not verified, would make Twitter more usable, more profitable, and just plain nicer overnight.

This design feels like a long-overdue update, delivering necessary breathing room to allow the introduction of as yet unseen features. However, there’s very little new here, other than a more app-like experience for users who prefer not to use an app.

Some might suggest that a company is entitled to update its site design any time it likes, but those people must not have witnessed the meltdown some users had the last time Twitter introduced a far less substantial tweak to its UI than this. Others might question whether anyone actually uses Twitter on desktop; isn’t that what cellphones and bathroom breaks were invented for?
Source
What’s New for Designers, July 2019

Posted:Mon, 15 Jul 2019 10:45:00 +0000

It’s hard to stay focused this time of year. With vacations coming up (or having recently passed) it’s easy to get distracted from work-related tasks. For that reason, this month’s roundup is full of design tools plus a few design diversions that you can have fun with.

404 Illustrations

Have you ever wanted to create a cool 404 page but didn’t have the time or inspiration? 404 Illustrations takes all the work out of it for you with funky and trendy illustrations for lost website users. Each illustration comes with a cute description as well and they are free to use. The designers promise more illustrations in the future.

Spotlight

Spotlight is a lightbox gallery library that’s lightweight, easy to run, and has no dependencies. It literally runs from the download without additional JavaScript, HTML snippets, additional CSS resources, images or assets, and no additional handling of dynamic content.

Eva Design System

Eva is a free and open-source design system that’s adaptable to your needs and team. It works with Sketch and provides symbols and style configurations. The system allows you to design and code using a quick process that can eliminate repetitive work.

Screenzy

Screenzy is a tool for creating and editing screenshots quickly. Just paste an image or URL and use on-screen settings to adjust the image, add text or choose from one of 5 pre-set options.

Drag and Drop Sticky

Scott Kellum created a cool drag and drop sticky note element with no JavaScript. It works as a textarea element and as you move it around, technically you are just resizing a the textarea and the “note” follows.

Freezeframe.js

Freezeframe.js lets you pause animated gifs and then reanimate on a hover, mouse click, touch event, or another manual trigger. The new version of this tool no longer uses jQuery and functions thanks to modern JavaScript.

Space Shooter

Space Shooter is a fun pen by Andrew Rubin that’s a good distraction when you are trying to work through a design problem and a fun bit of inspiration. You can build something like this. Why not make a game? Fork it and play around.

Pika CDN

Pika CDN is made for packages written in ES Module syntax, that runs natively in browser. Use it to distribute more modern, unminified packages that uses a proprietary package builder, putting everything into a ready-to-import JavaScript file. The tool is free and a pro version is on the way. (Sign up to get notified when it is ready.)

Swipemix

Swipemix will help you design better layouts and collages on Instagram. It allows you to sequence images with easy templates in just a few minutes from an app on your iPhone.

Source Wireframe Kit

Source Wireframe Kit helps you prototype faster with more than 500 blocks that can be moved, combined, and adjusted into a complete design system. Everything is grouped into categories to help you work faster and you can use it with Sketch, Figma, Marvel, or Invision to bring prototypes to life.

Hubcap

Hubcap is a free screen recorder that works without installing any software. It works with Chrome or Firefox and allows you to record a screengrab and share it instantly. You can record up to five minutes and Hubcap will store if for up to 2 weeks at no cost.

Brutalism Web Kit

Brutalism Web Kit is a collection of artboards to jumpstart website projects using this design trend. It includes 70 styles and works with free tools including Google Fonts.

Ant Design UI Kit

Any Design UI Kit is a collection of components for Figma based on the React UI library. It includes 2,100 components, 630 icons, 140 customizable styles, and 43 screens, making it one of the biggest component inventories for Figma.

Anggada

Anggada looks like it could be inspired by the title characters in recent Aladdin movie release. It includes a full character set that’s most appropriate for display use. The demo version is free and the full font is available from the typeface designer.

Basier Mono

Basier Mono is a modern style monospaced typeface with a free and family (premium) download option with square and circular shapes. The typeface is also packed with cool alternates, fractions, and supports multiple languages.

Bright Salkiy

Bright Salkiy is a scrawling script with thin lines that has the look of an elegant signature. The free version is for personal use only and includes a full character and number set.

Cataclysmo

Cataclysmo is a bold, tall slab serif for display use. It includes an uppercase-only character set and numbers.

Nairi Amber

Nairi Amber includes a regular sans serif, italic sans serif, and script character set for personal use with the free version. Each character set in the family works well together with a wide stance and rounded letterforms. The script is somewhat more compact.

Rise of Kingdom

Rise of Kingdom is an uppercase serif typeface that would be a great display option. It has a somewhat whimsical feel with tall letterforms on the thin side.

Source
Popular Design News of the Week: July 8, 2019 – July 14, 2019

Posted:Sun, 14 Jul 2019 10:45:46 +0000

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.

Web Designers Create the Most Annoying UI Ever

Ad-Free Internet by Firefox

Creating the Perfect Color Palette for a Website

Menu (or not)

Web Design Color Trends for 2019

Site Design: The Atlas of Moons

The Twelfth Fourth

Bringing New CSS Techniques to Production

Design Principles are Dead

My Approach to On-Page SEO in 2019

How to Run a Small Social Network Site for your Friends

Google’s Taking Another Crack at Building a Social Network

It’s Never Going to Be Perfect, so Just Get it Done

No, not “everyone is a Designer”

Niice Insights

How We Used UI/UX to Confront the Climate Crisis

Canvas UI Kit: A UI Kit for your Growing Business – For Sketch & Figma

JavaScript Classes – A Friendly Introduction

Eva Design System: Deep Learning Color Generator

Awesome Stranger Things Fan Art

Why Information Architecture in UX Process is a Necessity

How to Build a Bulletproof Product Design Strategy

Google has a Fun Wimbledon Easter Egg You Can Play

You’re Getting Screwed on Amazon Prime Day

It’s Never Too Late to Be Successful and Happy

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source
Is Dribbble Worth Your Time?

Posted:Fri, 12 Jul 2019 10:45:11 +0000

The online community has been around since 2010 and is one of the top platforms where designers can share work, or shots, and get feedback.

The invite-only community is a showcase of portfolio projects and personal artwork for digital graphics and user interface design, illustrations, animations, and pretty much any other design work you can think of.

Dribbble Pros

If you want to be inspired, Dribbble is the place for you. There’s so much good work to browse through, comment on, and engage with. It’s a good mental distraction if you are working through a design problem of your own.

The community is huge and the company reports that the number of users nearly doubled last year. In 2018, designers uploaded 1.2 million shots, that got 35 million likes, and 1 million comments. Best estimates put the number of users at 4.5 million worldwide.

Everything about Dribbble has a community feel, for the time being, it’s very un-Facebook

Dribbble is more than just an online community. Dribbblers in different locations get together for meetups and design networking. They literally happen all over the world, or you can host one in your location. It makes the design-based peer network social IRL.

Everything about Dribbble has a community feel, for the time being, it’s very un-Facebook, even as it expands. It’s simple and authentic.

There’s something great about a design platform that is designed well. Every page is simple and stunning. Projects are easy to see, thanks to consistent previews. Usability is obvious. From the first login, everything about Dribbble is easy to understand, find, and explore.

You can get feedback from other designers. Feedback from your boss or clients or design team is great, but what if you want to know what a wider community thinks. This is the place to test out a design.

Dribbble has expanded to include job listings – real gigs from some reputable companies – and even mark your profile as available for hire. That allows others to seek you out. One the same note, you can sell designs and digital goods, which can be a nice supplemental income.

The theme of the site hasn’t changed since Day 1 and it’s cute and endearing. Basketball fans can appreciate it for sure.

Dribbble Cons

Dribbble can be a major distraction. There’s just so much to look at, and then there are the rebounds, which will have you asking if you really just spent 3 hours enhancing someone else’s original animation concept.

Uploads are somewhat limited. While Dribbble eliminated the 400-pixel by 300-pixel rule late last year (thank you!), the maximum size for uploads is 10 MB. You don’t have to use a specific aspect ratio, but will be asked to crop for the preview to maintain design consistency across the network. Plus, you can still upload downloadable versions if you like.

The invites. It seems like a cool idea and maybe it was in the beginning, but are invites really necessary 10 years later? If someone doesn’t play by the rules kick them out.

It can feel a little like a high-school popularity contest

It can feel a little like a high-school popularity contest. There are bloggers out there with tips for what time to share your shots to get the most likes. Seriously? No thanks.

Some days Dribbble seems bigger than the rookie designer just starting out. It’s totally cool that designers from Apple and Airbnb are posting, but it can also be intimidating. If you are new to the platform, or design in general, try not to compare. Do your thing, find your niche, and be you in the community.

Dribbble is not the best place to keep a portfolio, although it is getting better. You can, but it can be a little tough to explain and share. (Do you really want a potential employer to see all those comments or a project you were just experimenting with?) So, you’ll probably need Dribbble, plus another platform to host a portfolio.

There are little ads everywhere. Dribbble needs a revenue source to survive and thrive, but some people are turned off by it. (If you are one of those people, you can upgrade to a paid plan.)

If you really want all the features of the network, you have to pay. It can be worth it if you are using it to sell good or get work (or ads drive you crazy). Dribbble Pro is $12 per month or $60 annually.

I’m on Dribbble … Kind Of

My name is Carrie, and I am a Dribbble lurker.

I have been on Dribble almost since the beginning. And I haven’t posted anything. That doesn’t mean I don’t value it, I’ve been looking at other designer projects for years love to see what’s out there, but just don’t have time to do more.

For me, Dribbble is all about inspiration and anticipation. So many of the shots are glimpses into experiments in design and can even be a predictor of trends.

I have go-to designers that I like to peek in on, but mostly I like to browse

I have go-to designers that I like to peek in on, but mostly I like to browse. What’s been uploaded recently, what’s getting a lot of attention, is there a technique or aesthetic that’s starting to emerge frequently?

I’ll also admit to getting called out for my Dribbble lurker status. Can you be a “real designer” if you aren’t using the platform regularly? Am I washing an invitation by not creating new, and regular shots?

Whether you are on (and are a frequent contributor to) Dribbble or not has nothing to do with your status as a designer. It’s all about time, project needs, and whether that feedback is something you crave. It’s like almost any other social network. You get from it what you contribute.

So, if you have the time and want to be a Dribbbler, go for it. And if not, that’s OK, too. (Let’s not judge each other because of a peer network.)

Conclusion

There’s nothing wrong with trying to get that coveted Dribbble invite, although with so many designers on the platform, invites aren’t as hard to get as they once were.

If you have time and enjoy the interaction, Dribbble can be a good use of resources and effort. But it’s OK to lurk too.

Just play with it in moderation and don’t let comments or shots overwhelm you. When Dribbble stops being fun, you should probably move on to something else. If you haven’t joined yet, now might be the time to ask your favorite co-worker for an invite.

Source
ECommerce Metrics That Matter

Posted:Wed, 10 Jul 2019 10:45:14 +0000
It’s nearly 2020, and every eCommerce brand should be using key metrics to pinpoint advertising, boost sales and improve fulfillment.

Emma Miller, Senior Editor at Bizzmark, calls metrics the “one thing that can make or break your online presence.” She goes on: “To succeed in the competitive online market, you need to set measurable goals, choose the right metrics to track, and analyze your online performance continuously.”

Making the Connection: Advertising Metrics

There are dozens of different advertising metrics you can track across many different channels and platforms. Some for search, others for social and still others for paid advertising.

According to one guide from Klipfolio, setting up measurable marketing metrics can help you track digital marketing performance across SEO, social media growth and more: “With such a wide variety of channels being used, it’s important for marketing teams to actively track progress and performance in real-time with the right marketing metrics.”

So which are the ‘right’ marketing metrics? These are the five we recommend eCommerce brands start with.
- Marketing Attribution: Identify where your traffic is coming from — organic search traffic or a paid ad? Are people browsing from a mobile or desktop device?
- Click-Through Rate: You’re getting your message out, but is it landing? Look at how often people click for emails, social campaigns, PCC, and more.
- Returning Visitors: Are you building a following or just getting people passing through? Returning visitors is a good indication that your marketing content is working — you’ll just need to make a few tweaks to boost actual conversion.
- Funnel Abandonment: Highlight where you can optimize based on where people are abandoning their journey. Was it on the second drip email? Once they reached the landing page?
Selling Your Brand: Storefront Metrics

Marketing and sales are more connected than ever before, so some of these sales metrics overlap with advertising metrics. Track these KPIs to see how well your storefront is doing once people land there.
- Bounce Rate: How many people leave your site after just one page? If this number is high, you should rethink your website design and content to encourage visitors to stick around.
- Customer Lifetime Value: Think of this as customer retention. Include: segmented revenue. The higher your purchase frequency and the larger your customer base, the more critical your LTV will be for your business to factor in future decisions.
- Pageviews: Are you reaching the people you want to reach? Looking at pageviews relative to your other marketing metrics will give you an instant snapshot of effectiveness.
- Cart Abandonment: You’ve reached your audience, brought them to your site, shown them your products, encouraged them to ‘add to cart’ — only for them to abandon before payment is processed. What went wrong? eCommerce brands often make the checkout process too difficult or tack on surprise shipping fees, causing customers to abandon ship. If your cart abandonment rate is high, it’s time to reassess your checkout and account creation process.
Bringing it Home: Shipping Metrics

Context: Your relationship with customers doesn’t end once you make a sale. How can you improve their experience through the last mile?
- Inventory Accuracy: An ‘out of stock’ message is a good way to get customers to never come back to your store. Be sure that the stock you list online is reflective of your actual inventory.
- On-time Delivery: Want great customer reviews? Fast and reliable delivery is on the top of everyone’s lists these days, so be sure to keep this number as high as possible.
- Return Rate: This one covers all of your bases, depending on the reason for the return. If the rate is high, dig into where these returns are coming from and how you can improve satisfaction from the jump.
As a bonus, look at Net Promoter Score as a good final indicator and relevant metric. NPS takes into account ad effectiveness, storefront engagement, and shipping satisfaction, bringing all three areas under one roof.

Multichannel: Bringing Marketing, Storefront and Fulfillment Together

With multichannel eCommerce, you can’t separate out marketing efforts from your sales or your inventory management from your sales. Your efficiency in marketing will affect the size of your sale, the size of your sale will affect your shipping costs, your shipping costs will affect your profitability, your profitability will affect your ad spend… you get the idea, right?

They are all interconnected, and you should treat them as such.

To keep things straight in multichannel eCommerce, you’ll need two things: a short list of critical KPIs for your eCommerce brand and a way to visualize how these metrics interplay, ultimately affecting your bottom line. You can use the metrics identified above as a starting point, and narrow them down based on what is most important to your brand.

Changing your mindset to think of marketing, sales and fulfillment as part of the same entity is one thing. But actually bringing them under one roof is another.

Having the platforms separate doesn’t mean your metrics have to remain in a silo. You can use a profit analytics dashboard, for example, to bring together the most relevant metrics for advertising, sales and fulfillment. Monitoring your profit and marketing performance in eCommerce shouldn’t be hard — and a single dashboard for all your metrics makes it easier.

Featured image via DepositPhotos.
Source
20 Best New Portfolios, July 2019

Posted:Mon, 08 Jul 2019 10:45:16 +0000

And now it’s July. I’d just like to tell my American and Canadian friends to hydrate properly, and the hangover should be gone by October, just in time for the sugar crash. While you recover, we’ve got more portfolios.

Lots of good, grid-based stuff this month. And lots of dark layouts. It’s like all the color got used up last month or something. Anyway, I hope you like minimalism! 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, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

White Elephant

White Elephant combines pastels, some asymmetrical design, some very grid-focused design, and a whole lot of absolutely gorgeous type to create a pleasant, pretty browsing experience. Also, there’s the occasional witty GIF used during page transitions, a sort of blink-and-you’ll miss it detail that amused me.

Platform: WordPress

Adam Brandon

Adam Brandon’s portfolio keeps things very minimalist. But then, when you have Netflix, Apple, Nike, and Ford in your portfolio, do you really want that much getting in the way of all those logos? No, in these situations, minimalism is definitely the way to go, and the sort of grid-based collage doesn’t hurt.

Platform: Squarespace

Planetary

Planetary’s agency site is pretty, modern, and I have to say that the designers sure know how to effectively use just the tiniest splashes of extra color for emphasis. It’s just that nice to look at. Plus, this site just introduced me to the typeface known as Neutrif pro, and I think I’m in love.

Platform: Gatsby

Werlen Meyer

Werlen Meyer keeps things fairly simple with a dark layout, simple sans-serif type, and quite a bit of background video. I have to hand it to whomever is optimizing this site. All of the video/animation loaded fast and smooth on my 5Mbs connection.

Platform: Custom CMS (I think. I never know for sure when Lua is listed as the programming language.)

Renaud Rohlinger

Renaud Rohlinger is a “French Creative Developer living in Japan (soon)”, and this is presumably why his site is a mix of Japanese and English. Not content with that, however, he threw in a whole lot of gorgeous WebGL animation that runs pretty smooth and fast, even on my old laptop with integrated graphics.

While there could be some improvements made layout-wise, and the body text could be a little bigger, the whole thing is a technical marvel.

Platform: Static Site

Tiago Majuelos

Tiago Majuelos’ one-page portfolio is colorful, wild, and full of… hieroglyphic-clipart graphics? I’m not sure how the heck else to describe his art style. You can browse the work by dragging/swiping horizontally, or you can scroll down to see the most organized collage I’ve ever seen. I’ve never seen anything quite like this, so it’s on the list.

Platform: WordPress

Josh Newton

Josh Newton’s portfolio has a beautifully simple dark layout, great condensed type, and body text that’s sadly way too small. That usability issue aside, it’s rather nice to look at. Another great grid-based layout.

Platform: Custom CMS (Probably)

Diogo Akio

Diogo Akio’s portfolio is more grid-based goodness, mixed with more horizontal scrolling goodness, and a heavy dose of modern minimalism. And for variety, it’s not a dark layout.

Platform: Static Site

Rise

When Rise was being designed someone clearly looked at a bunch of sites with asymmetry and overlapping elements, and said, “That. I want loads of that.” Then threw in some pretty decent typography, and they’ve managed to pull off using the color yellow, so they’ve earned their spot on this list.

Platform: ExpressionEngine (Haven’t seen that for a while.)

makespace.

Makespace. More dark layout. More collages. More grid stuff. Lots of periods going around. No but really, it’s a fantastic looking site, and you don’t see too many collages that are animated like a slideshow. Unfortunately, this site falls into the same small-text trap that many dark sites fall into in their quest to look elegant.

Elegant text is text I can read. Just saying.

Platform: Static Site

Diana Costa

At first glance, Diana Costa’s portfolio seems downright brutalist. Dig in a little, though, and you’ll see the monochromatic tones and monospaced text tempered with plenty of white space, and simple, smooth animation. It’s amazing how much white space can transform the feel of a website, almost on its own.

Though I don’t like sites that depend on JS to run at all, especially sites this simple, I have to respect the developers for putting in a warning message when you turn JS off.

Platform: Static Site

Firstborn

Like many minimalist sites, Firstborn uses animation to spice things up, decent type, and multicolumn body text. Well okay, multicolumn isn’t that common. No, they’re not relying on CSS to do that just yet, it’s being done with JS. Even so, I’m glad to see it out in the wild.

Platform: Contentful

Yuen Ye

Okay, you know that see-the-preview-on-project-title-hover thing? Well Yuen Ye’s portfolio has officially done it better than everything else. There are elements that are rather convincingly animated to look like cloth on the home page, and hovering over a project title changes the “pieces of cloth” into the preview for… go just got look at it.

Rarely am I actually impressed by these sorts of bells and whistles, but it’s beautifully executed here. The rest of the site is pretty solid, too.

Platform: WordPress

Onix Design

Onix Design improves on the ever-familiar modern/dark aesthetic by adding a fair amount of illustration, including some sort of semi-3D illustrations of faces that I found strangely compelling. The color scheme is a bit of a blast to the eyeballs, even with the mostly-dark layout, but it’s certainly a striking, and uncommon look.

Platform: Custom CMS? (It’s programmed in Go.)

Zef

Zef’s Website is decidedly new-looking, even as certain aspects of it (including the name) evoke a sort of Geocities-era nostalgia. I love everything: the curving text on the home page, the clashing colors, the careless-seeming typography that is actually quite effective. It’s amazing.

Platform: Static Site

thePXA Creative

thePXA Creative’s agency site is darned good-looking. Far more good-looking, perhaps, than usable. Even so, I found myself liking this highly PowerPoint-ish site for it’s sheer style, and commitment to a theme.

Platform: Static Site

Muax

Muax is another dark, grid-loving layout, sure. It’s also a showcase of just how absolutely gorgeous Russian typography can be. I have no idea what any of it says, but I could stare at it for a good ten minutes.

If this is what Dostoevsky’s work looked like in Russian, no wonder people read it to the end.

Platform: Custom CMS

Casper Fitzhue

Casper Fitzhue’s portfolio is one of those very white designs that could get boring if you don’t love that sort of simplicity as much as I do. But to keep things interesting, the background will change color depending on what you’re looking at/hovering over. Plus, I like how things like essays and other text-based works are included in the portfolio.

Platform: Static Site

Chris Cyran

Chris Cyran’s portfolio is maybe the only one I’ve seen that’s bold enough to just sort of… put a business card design right in the middle of the page, and leave it there no matter what else happens to be scrolling by.

Platform: WordPress

Locomotive

Locomotive looks like a site that should be minimalist, but they occasionally just sort of… don’t do minimalist things. It also leans hard into the animation, creating an experience that is at once familiar and outstanding.

Platform: Static Site

Source