Subscribe Now!
...with web-based news readers. Click your choice below:
...with other readers:
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
-
5 Ways to Communicate With Non-Visual Thinkers
Posted:Fri, 16 Nov 2018 10:45:45 +0000
Many, if not most designers will at some point encounter this scenario: they’ve just completed a digital wire-frame for a new project, with a new client. They’ve thought long and hard about the placement of everything, and they’re ready for feedback. They figure it’ll be a short conversation, just enough time for the client to say, “Yeah, that looks fine. Can’t wait to see it with the details filled in!”The client will take a moment to think, their thoughts briefly visible on their face, and the designer will get nervous. After a minute or so, the client will look up and say, “It looks good…but I’m just not sure about all of those gray boxes.”
Even if they’ve been educated about the use of wireframes, some will still ask, “But you’re going to change the gray boxes, right?” Simply put, assuming that others think like we do is one of the silliest mistakes a designer can make, and we all make it at least once. As designers, even if we don’t start out as visual thinkers, we often end up as visual thinkers after some training.
That may not be so for your clients. For example:
- Some think in words;
- Some think in vague impressions and emotions;
- Others think in pictures, but the images are “blurry”;
- Some people think primarily in numbers;
- And then there are spatial thinkers, for whom thoughts are related to each other by a sense of “distance”.
All of these metaphors are imperfect, but serve to highlight the different ways people can think. In fact, people are often on a scale, using one form of thinking or another depending on what they’re thinking about. As a designer, you’re going to have to deal with all of them.
1. Embrace the Differences
Realizing other people don’t think like you is hard, and often involves a rude awakening. It’s like accidentally seeing a roommate naked. It’s uncomfortable, and everyone wishes things were not as they are; but you just have to get on with your life, now.
It’s best if you simply accept that you saw them naked. Holding on to that feeling of awkwardness will lead to difficult communication later. Likewise, you should accept that clients often have a very different idea of what it means to think. Embrace the fact that they see things differently. Realize that their thought processes may yield insights you never dreamed possible. If you go on while feeling as though interacting with them is a chore, they will probably notice; and they will not like it.
On the other hand, nothing smooths over the bumps in a conversation like an open-minded attitude.
2. Build Trust
Building trust with a client is always necessary, but especially helpful when communication is difficult to begin with. When they trust you to do good work for them, they’re less likely to interfere with the smooth running of the project, and provide more constructive feedback.
A number thinker might appreciate hearing some metrics from a previous project. Give them those sweet, sweet percentage values. A verbal thinker is likely going to appreciate written success stories. Throw some number-based metrics into the story for good measure, and you can see why a lot of websites already use this technique.
For the more emotion-thinking clients, however, the best way to build trust is probably just to befriend them as best you can in the limited time you have available. To do this, you might need to make a special effort to listen a lot more closely to the tone of what they say, rather than their actual words. Emotional thinkers often have trouble communicating effectively with pretty much everyone, so making that effort will go a long way toward building trust.
3. Use High-Definition Mockups
Remember back in the day when it was more or less expected that every mockup would be a high-definition mockup? At least, that’s how it felt to me when starting out. I didn’t even know what wireframes were when I started.
Well, for some clients, you may need to go back to the old ways, as it was when web designers roamed the plains, searching for stray DHTML they could copy. Most people, even if not visual thinkers, can sort of visualize things when they put their minds to it. Others have little to no capacity to imagine things visually whatsoever.
For these people, you might have to show them old-fashioned PSD-style high-definition mockups before you’ll get any useful feedback. And they might ask for more than one concept. If you find yourself in this situation, I recommend either charging more, or using UI kits to speed up production.
4. Use Flow Charts
Flow charts are useful ways to organize information (such as site maps) in any case; but can be an especially useful way to convey concepts to spatial thinkers. After all, the whole format is about using spacing for organizational purposes.
That’s really all I’ve got, here; the flow chart is a fairly simple concept.
5. Present Your Work
Don’t wait for your clients to ask you why you made individual design decisions. When you have something to show them, find the time to talk them through everything you’ve done and/or changed, or write it down. Sometimes, just knowing that you have a coherent reason for the things you do is enough to get sign-off.
Even if there are changes to be made, hearing you express your reasoning may give them the information they need to communicate their priorities properly. Basically, the more both parties know, the better.
That last bit right there…that’s the point.
Featured image via DepositPhotos.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Free Download: Non-Profit UI Kit for Adobe XD
Posted:Thu, 15 Nov 2018 10:45:13 +0000
Halting climate change; distributing wealth around the globe; achieving social, racial, sexual, and gender equality; ending violence; there are so many challenges in today’s world. The web can be an incredible vehicle for change, and Adobe are lending a helping hand with an incredible, free UI kit for Adobe XD.The UI kit has been created by Florida-based designer, Meagan Fisher. Her goal was to help non-profits publish better websites; which in turn helps the non-profits to advocate for their cause more effectively, increasing user engagement and driving donations; which in turn helps the non-profits to help more people.
I’m so excited to share that I’ve created another free UI kit for @AdobeXD; this one is for a responsive website for non-profits. My hope is that people will use it to give charities better websites, and to help them help more people!
https://t.co/pHpIUcPYFm #AdobePartner pic.twitter.com/XATDrx08yc— Meagan Fisher Couldwell (@owltastic) October 16, 2018
Although the UI Kit uses the example of a charity addressing the food-shortage implications of climate change, the kit would actually work for any fact-based campaign, whether it be gun control, voter empowerment, deforestation, or a youth drop-in centre; no matter what kind of non-profit you’re designing for, this a great starting point.
Because the non-profit sector is so broad, the UI Kit has been designed to be highly versatile. It is a fully prototyped, responsive website design, that employs known best-practices.
Included in the UI Kit are key pages like home, about us, resources, stories, news, events, get involved, and even a carefully crafted donation flow. You’ll find everything you need for a non-profit website, and if there’s anything missing, Adobe XD’s assets panel makes it simple to generate new pages using the existing customizable elements.
The most visually striking thing about the UI Kit is its original color palette. Bucking the trend for hot colors, the UI Kit uses a cool palette of deep, desaturated blue (#354463), and bright, mint green (#C1F7D5). You can change this easily in Adobe XD, but the sophisticated look is both modern, and serious—absolutely appropriate for the task at hand.
The UI kit uses three fonts to convey its message: Flood is a brush script that humanises the text, bringing it back to real people with real problems; Poynter is used for headlines, it’s a media-savvy typeface that works great for newspapers because it has a sense of no-nonsense certainty; Komet is used for the main text, it’s a highly-readable sans-serif with humanist touches.
Even if you’re not currently working for a non-profit, this is a great way to jump into Adobe’s flagship UX project and see what all the fuss is about Adobe XD. If you haven’t tried XD yet, you’re in for a treat. You can download it for free, for Windows, or for Mac. The latest version, released to coincide with October’s MAX conference includes design for voice, and automated artboard transitions.
You can take a closer look at this great free UI Kit on Behance, or download it for free and start creating.
[— This is a sponsored post on behalf of Adobe —]
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
5 Trends of Voice UI Design
Posted:Wed, 14 Nov 2018 14:45:25 +0000
At its core, the concept of interaction was always about communication. Human-Computer Interaction has never been about graphical user interfaces, which is why Voice User Interfaces (VUIs) are the future of user interface design.An interface is just a medium people use to interact with a system—whether it’s a GUI, VUI or something else. So Why is VUI So Important? Two reasons:
Firstly, conversational interfaces are so fascinating because conversation is a form of communication everyone understands.
- It’s a natural means of interaction. People associate voice communication with other people rather than with technology.
- Users don’t need to learn to interpret any symbology or new terminology (the language of GUI), they can use English (or any other native language) to operate with a system. It doesn’t mean that users don’t have to learn how to use a system but the learning curve be reduced significantly.
Secondly, user expectations are changing. According to Statista, 39% of millennials use voice search. This audience is ready to be the early adopters of VUI systems.
Top 5 VUI Trends
When it comes to designing VUI, voice interaction represents the biggest UX challenge for designers since the birth of the original iPhone. But the great news is that the most fundamental principles of UI design that we use when creating products with GUI are still applicable to VUI design. Below you can find a few trends that will shape VUI design in next decades.
1. VUI That Builds Trust
Trust helps to build a bridge between a person and a machine. If trust is absent, users will be unlikely to interact with a particular voice user interface.
The importance of the valid outcome (VUI should give the person understanding that s/he will receive exactly what s/he requested). It’s possible to achieve this goal by focusing on the following things:
- Improving the accuracy of speech recognition (more sophisticated NLP algorithms).
- Focusing on understanding the user’s intent (a reason for interacting in the first place). When users interact with a system, they have a particular problem they want to solve, and the goal of the designer is to understand what this problem is.
- Providing meaningful error messages.
- Crafting contextually driven flows. While it’s impossible to predict all commands that users might ask the system, designers need to at least design a user flow that is contextually driven. The system should anticipate users’ intent at each point of a conversation and provide users with information on what they can do next. For example, finding a restaurant near the user. When users search for a restaurant, the system should match exactly what the user is looking for.
The importance of user control (one of the 10 Usability Heuristics for User Interface Design by Jakob Nielsen is still applicable to VUI design).
- The system should consider the natural limitations of a human brain (short-term memory limitations). The information provided by the system should be overwhelming. When people hear the system response, most users remember only the last phrase. Thus, it’s better to stay away from long phrases or providing a dozen different options while the user can remember just a couple of them at one time.
- The system should react to a user request with appropriate feedback. This feedback should give users a full understanding of what the system is doing right now. For example, visual feedback lets the user know that the system is ready and listening; or in POD (Process of Doing). When a user sends a request to the system, the system shows a POD. POD isn’t a loading animation, it doesn’t just state the fact that users have to wait while a system is doing something, it provides valuable information of what the system does. For example, a POD for a command on pulling out a file from Dropbox might look like as someone search for a right file in storage.
2. Adaptive User Interface
An adaptive user interface (also known as AUI) is a user interface (UI) which adapts to the needs of the user or context. VUI of the future will adapt for users — the system will analyze all information it has about users (including the information about current mental state and health condition) and their current context to provide more relevant responses to user requests.
For example, if a user has a high blood pressure at the current moment and decides to set a meeting in 2 hours, a digital assistant might suggest avoiding that, or suggest lowering blood pressure with exercise before the meeting starts.
3. VUI That Conveys Personality
Visual designers have a lot of options to introduce the personality in graphical user interfaces – fonts, color, illustration, motion, just to name a few. But what about VUI? Designers can convey personality using language itself — by playing with words, voice, and tone. Speaking of voice, a voice is part of the persona and it shapes its identity. Once we’ve associated a voice with something, it becomes part of its identity. And we experience emotions when we interact with such an interface, just like we when we interact with real people. People want human-understandable voices — not a voice that sounds human, but a voice that speaks coherently human!
Bad example: Siri voice by Susan Bennett – the voice that sounds almost human but people still know that it’s a machine. You can’t really have a dialogue with Siri. While you can ask Siri something like, “What is the weather like today?” You can’t ask more sophisticated questions such as, “What should I wear today?” As a result, you don’t have deep feelings for Siri, you know it’s just a robot.
Good example: Samantha voice from the film Her — the voice that sounds coherently human and people can be in love with it.
4. From Narrow AI Towards General Intelligence
Human-computer interactions are shifting to conversation, but users expect more. Most of AI systems available today are still limited to Narrow AI — such systems use Machine Learning to solve a clearly defined (and, in most cases, way too narrow) problem. Narrow AIs have zero knowledge outside of their training data. It means that when a user wants to solve a slightly different problem, or the problem itself evolves, the system won’t be able to solve it and it’ll respond with something like, “I don’t understand.” So that you, as a user, face a wall.
In comparison to Narrow AI, General Intelligence is not limited to narrow domains. The concept of learning is at the foundation of GI systems — the fundamental difference between Narrow AI and General AI is that the General Intelligence systems learn without being expressly programmed (machines learn by themselves). GI system uses two types of learning — reinforcement learning (when a system uses all available information to solve a particular user problem) and supervised learning (when a system needs user assistance to solve a problem for the first time). Another difference is that a General AI system can learn to utilize other AI for general and specific purposes. As a result, different Machine Learning models can be trained dependently and work cooperatively. An advanced NLP GI system is able to learn from the first attempt by combining and processing information from multiple different data sources.
5. Impact on Society
Widespread acceptance of VUI systems. Improving the quality of VUI AI-based systems will lead to better user engagement. The relationships between human and computer will be interactive and collaborative — people and computers will work together. This will impact society — just imagine that in ten years, you’ll walk into the house and just talk and control all kinds of machines.
This future will be with omnipresent AI: As users, we’ll trust AI even with the most important decisions such as “What school should I choose for my children?” VUI will improve the quality of life of older people and people with disabilities.
Conclusion
“The best interface is no interface“ is a famous quote of Golden Krishna, the author of the book The Best Interface Is No Interface. He and many other designers believe that people don’t want more time with screens, in fact they want less. Thus, technology should stop celebrating screen-based solutions. And it’ll happen relatively soon — the interactions of the future won’t be made of buttons.
With the rise of computer processing power, we’ll have more systems that will be able to calculate up to 1000 steps in 1 second. A user and a machine will work together, enabling General Intelligence.
Featured image via DepositPhotos.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Foundation 6.5 Released
Posted:Wed, 14 Nov 2018 10:45:54 +0000
After an extended wait, Zurb have finally released the much anticipated version 6.5 of its popular Foundation framework. (This is in place of the originally intended 6.4.4 release.)So, what has changed? Well, this is not a major release so we’re not getting CSS Grid yet, but the changelog is pretty long. The folks behind this release have grouped the changes into 3 categories: improved stability, improved accessibility, and improved browser support.
What this means is that there are lot of bug fixes, but not so much in the way of features. There are also a lot of fixes to the documentation. But that’s not to say that’s a bad thing, in fact, it’s a very good thing.
A few changes might result in changes to the appearance of your work so it is worth checking
First of all, there are no breaking changes and 6.5 is fully compatible with previous versions. A few changes might result in changes to the appearance of your work so it is worth checking. But the good news is that many of the fixes are to correct unexpected behaviour.
Work has been done on dynamically created components, to ensure they initialize correctly, and an issue with older browsers handling breakpoints badly has been improved. Support for smaller font sizes is also improved.
At the heart of Foundation is its XY Grid, and this release sees some very welcome improvements, including fixes for some slightly dodgy behaviour; a vertical frame will now take the full height, and grid frames now get the vertical scrollbar they should.
The Abide form validation plugin has been improved to allow for escaped characters in URLs, and a11y attributes will be set automatically on form fields, labels, and on errors. There have been accessibilty improvements in all the menu plugins, too, with accessibility best practices being applied to other components as well.
Possibly the biggest improvement on the Javascript front is that not only is Foundation’s Javascript now provided as CommonJS, ES Modules and ES6 bundles, it is distributed by default as a UMD bundle. This means you can import Foundation in any Javascript environment, including Node.js, with no transpilation necessary.
the point of using a framework like Foundation, is so that you don’t need to peak behind the curtain
Many of the changes in this release will probably not jump out at most users of Foundation, but a lot of work has gone into behind the scenes. That is not just what it does, but how it actually does it. And the point of using a framework like Foundation, is so that you don’t need to peak behind the curtain. But, at the same time, it’s good to know that the wizard is in tip top shape.
While Foundation 6.5 does not have lots of showy new features, it does have a sleeker, more finely tuned engine. Its developers have listened to its community and have done a lot to address issues and niggles that the community raised.
Ease of use should be increased, and anything that helps ease the frustrations of making designs look good on all browsers and all viewport sizes is definitely to be welcomed. Plus, the docs have been improved with some better examples and more comprehensive coverage in places.
For a little while there, it looked as though Foundation might have reached its terminus, but it seems they checked the vault and found some inspiration.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Take Your Business Online with Ease: Create Your Website with Mozello
Posted:Tue, 13 Nov 2018 10:45:08 +0000
Few of the current crop of page builders are as simple as Mozello. You don’t need any previous experience, Mozello takes care of everything for you. Just run through the quick set-up and you’ll have a working website, online, in minutes.Mozello is a surprisingly easy-to-use platform that offers you the opportunity to create a personal or business site, with no design or code knowledge. But where it really excels is in lowering the entry-level for anyone hoping to create an ecommerce site.
create a brochure, a blog, or even an ecommerce store
Mozello is also an ideal option for web designers and developers who need to develop a site simple enough for a client to self-manage. Mozello is so simple to use, your client can make any changes they like, without blowing up your phone every 5 minutes.
Ultra-Fast Setup
Creating an account with Mozello couldn’t be easier. Just navigate to the site, enter your email address and a password.
Mozello will ask you for an account name, but don’t worry about getting this right, because you can always change it later. Decide whether you want to create a brochure, a blog, or even an ecommerce store.
Once you’re ready to publish your site you have a simple choice. You can either publish under a free Mozello web address, or use a domain name. Using a domain is probably best for most users, and Mozello allows you to use one you already own, or register a new name.
48 Mobile-Ready Templates
Once you’ve created an account, Mozello presents you with 48 template designs to choose from.
Unlike some page builders, Mozello’s templates have a whole heap of variety, there’s something here for everyone, so you can be sure you’ll find something you love.
Each of the templates is mobile-ready, meaning that your site will work perfectly across all devices.
Mozello’s templates cover 90% of the use cases you’ll ever need, but if you do need to create something out of the ordinary, rest assured that all of Mozello’s templates are easily customizable.
Simple to Customize
Mozello has fewer features than some site builders, but by making the difficult design decisions and baking them into the defaults, Mozello allows you to focus on creating a distinctive brand.
Mozello allows you to focus on creating a distinctive brand
You can change your color scheme with a single click, and choose from professionally curated Google font pairings, without needing any special understanding of design.
It takes about 20 to 25 minutes to get a site up and running on Mozello’s platform—even an ecommerce store—few site builders can boast that kind of speed.
If you’re running the type of business that has a bricks-and-mortar counterpart, then you’ll appreciate the ability to easily add a map, and if you’re running an international business you can even post content in multiple languages, with just a few clicks—perfect if your customers speak dual languages, like English and Spanish.
Easily Edit Content
Editing content is a breeze with Mozello. Just click on the item you want to edit, and it will switch to edit mode. You can switch text and images, and even edit styles inline to adjust the site design.
As well as editing on-page content, Mozello gives you the power to edit the meta data of the page that search engines will use to rank your site. You can easily edit title tags, insert Google Analytics, and integrate your site with social media.
Create an Online Store
There are plenty of site builders available, but very few of them allow you to create a fully functional ecommerce store with no experience. All the features you need to promote your products, from fast payments, to coupon codes, are all included.
Mozello’s store is packed with the type of features you normally only expect from a premium provider, even the free version. Designing a store could not be easier, because it’s all built around your product catalog; simply define your products, adding a name, a description, shipping costs, and the terms of sale.
no matter what you’re selling, you can present it in a way that encourages sales
For stores with more than a few products, you’re going to want to create some categories. And Mozello even has that covered: each product can be assigned a category, so if you’re selling sporting goods, you can group the equipment by sport, by gender, or even by price range. You can even add product variants, allowing you to offer customers different options.
Perhaps best of all, you can customize your catalog layout, as well as the layout of product images. So no matter what you’re selling, you can present it in a way that encourages sales in your sector, helping customers browse, and boosting revenue.
Mozello gathers every order you receive, so you can process them for your new customers. And because this all takes place in the same simple-to-use interface, it’s easy for anyone to run an online store. You can even manage your ecommerce store from your cellphone, making it simple to run your whole online business right out of your pocket—great for anyone working remotely.
If you’re managing a larger store you’ll benefit from the Premium Plus plan which delivers tons of extra functionality, and is easily capable of handling hundreds of products, but for many fledgling stores, the free starter plan is a risk-free route to getting online.
An Excellent Entry-Level Site Builder
Mozello is designed to allow anyone, even those with no design or code knowledge, to create a website easily.
The live site editor is simple to use, but if you do run into a problem, Mozello is backed by a friendly support team that answers email queries promptly.
the free starter plan is a risk-free route to getting online
Mozello doesn’t offer all the bells and whistles of some big-name providers, and that focus on essential tools is exactly what most first-time website builders need.
Free by default, meaning that anyone can build a site with no risk, if you want to up your game then there is a premium plan for just $7 per month and a premium plus plan for $14 per month. If hassle-free web design is what you’re after, give Mozello a look.
[ — This is a sponsored post on behalf of Mozello — ]
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
What’s New for Designers, November 2018
Posted:Mon, 12 Nov 2018 10:45:28 +0000
Designers and developers are hard at work creating tons of new goodies to make work life easier. This month’s roundup of tools for designers includes a smorgasbord of resources that includes everything from productivity and collaboration tools to icon and design kits to fonts that you’ll love.If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!
Drafta
Drafta is a team-based collaboration tool that allows you to store and share web and interface design screens. You can organize screens, share designs with a simple URL, store projects in one place, update activity and uploads and even gain inspiration from other projects. The tool has free and paid options (with integrations from other tools). The tool is designed to provide one-click access to every design screen in a project.
Galio
Galio is a free and open source framework to create mobile apps. It’s made to look great with plenty of ready-made components, typography options and a sleek base theme that you can adapt for each new project. It includes 11 screen options, more than 60 elements and more are getting added all the time.
DesignBase
DesignBase might be your new favorite tool. The website is a collection of curated resources for designers. It includes a database of UI kits, mockups, illustrations, color palettes, fonts, icons and stock photos. All in once place.
Playroom
Playroom is made so that you can simultaneously design across a variety of themes and screen sizes, powered by JSX and your component library. It allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.
Dribbble for Sketch
Dribbble now works with Sketch. The new integration likely combines two of your favorite tools so that you can share what you are working on right in Dribble without having to export and add to your page. Just download the plugin to get started and post your shots.
Experimental Gradient Editor
If you like to play with gradients this pen from David A., is pure fun. Use the wheel to see different options and shift colors. Use light mode to see how colors look in different conditions and then copy your favorite gradient
Chatkit
Chatkit helps you build in-app messaging so that users can get in touch with your team without ever leaving your app. It works with new or existing app builds.
reCAPTCHA v3
Google’s popular captcha tool has been updated with a new version. reCAPTCHA v3 is an API that helps you detect abusive traffic on your website without user interaction. Instead of showing a CAPTCHA challenge, reCAPTCHA v3 returns a score so you can choose the most appropriate action.
Flashcards for Developers
Develop your skills the old-school way with a set of digital flashcards that help you learn or refresh your design and development skills. Collections include Python, JavaScript, C/C++ and computer science card sets.
Glorious Codes
Glorious Codes is an easy way to create animations to show your code in action. It’s an open source JavaScript library that uses an API to create animations for code samples.
Cosmos Pattern
This fun animated or still background pattern uses SVG to create an out of this world scene.
Toggle Buttons
It’s easy to see how this set of switches in different styles could be applied to projects. Each is made in pure CSS.
Colorblindly
Colorblindly is an extension that helps developers create websites for the people with colorblindness by allowing them to simulate experiences. The extension works by placing a CSS filter over the webpage that modifies color ratios in line with actual types of colorblindness. It includes eight settings.
April Landing Page Template
April is a landing page template, designed for startups. The design features plenty of white space and the free HTML landing page works on all device types.
Evericons
Evericons is a free set of line-style icons with plenty of options to choose from. Use them as is or add color for more impact.
Folder Icons
Folder Icons contains a set of 25 free icons in a line style with different folder actions depicted on each. The icons are in an editable vector format that you can use in a number of ways and for different projects.
Error Screen Illustrations
This set of error screen illustrations for mobile projects puts a fun – and visually interesting – spin on pages where things go wrong for the user. Having a delightful element when things go awry or users get lost can actually keep them looking for the right information. This set of illustrations is a great place to start.
Report: The Business Value of Design
Does design impact business performance? A report from McKinsey & Company shows the correlation, proving something that you may already know: Good design is good for business. The report is interesting reading for anyone in the design industry.
100 Days CSS Challenge
What could you create if you challenged yourself to something new every day? The 100 Days CSS Challenge provides an opportunity to try that every day and share your work with the community. Start with the daily template, recreate it, paste the pen. That’s it.
How Facebook 3D Photos Work
You are probably starting to see a few 3D photos in your Facebook feed. This article explains how that technology works, in case you are interested. (It’s pretty cool.)
Graphpack
Graphpack lets you create GraphQL servers with zero configuration. It includes features like Live Reloading, GraphQL Playground, GraphQL Imports.
Anaheim Script
Anaheim Script is a handwriting style script with a lot of charm. It’s readable with thin clean lines and includes plenty of fun elements such as swashes, alternates and ligatures. It includes a full character set and numerals.
Classy Beautiful Sans
Classy Beautiful Sans features a limited character set with uppercase option and a few alternates, in a retro style. It could make a nice display option or be used in branding.
Kontiki
Kontiki is a cool typeface that simulates a handmade woodprint. To create the typeface the designer manually cut 193 glyphs into wooden plates and printed them by hand. The font includes 560 characters in several styles with a full character set. Styles range from the filled German option to the less filled French variant.
Lineall Medium
Lineall Medium is a funky font that can make for a fun display option. It includes an all uppercase character site and is free for all uses – even commercial.
TT Firs Neue
TT Firs Neue is a highly readable and usable sans serif. It has a contemporary style with plenty of options in this robust font family.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Popular Design News of the Week: November 5, 2018 – November 11, 2018
Posted:Sun, 11 Nov 2018 10:45:44 +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.
Someone Made Ocean Wave Simulation as Real as Possible Using WebGL
Migrating Away from Google Maps and Cutting Costs
Redesigning your Product and Website for Dark Mode
8 Things your Website Better not Have in 2019
Butter Cake: A Modern CSS Framework Based on Flexbox
Spectre.css – A Lightweight, Responsive and Modern CSS Framework
10 Ways to Be a Successful Freelancer
Palx
Samsung Finally Teases Folding Phone After Years of Rumors
Playful Physics – Liquid in Web Design
A Beautifully Minimalist Render of your Location Inside of Every New Tab.
Freelancer’s Guide to Surviving the Famine Cycle
New Google Contacts Web App is Here to Stay, Becoming Only Option in 2019
How to Design a Payment Form your Customers will Actually Complete
A Contract for the Web
Samsung One UI
The Tried and True Laws of UX
4 Ways to Improve Robinhood
“User Research … But Why?”
Case Study: Creating Design Principles for a Team at Shopify
No More than 4 Colours and Still Cool
Why do People Leave your Website?
Most of Us are Cats!
Automation Threatens to Make Graphic Designers Obsolete
Five Lessons from a 1,000-year-old Design System
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
5 Principles of Cuteness in Web Design
Posted:Thu, 08 Nov 2018 10:45:39 +0000
Okay, how in the heck do you make something “cute”? Now maybe you’ve grown up in an environment where getting in touch with your feelings was anathema. Maybe you just naturally gravitated to Max Steel over Hello Kitty. Maybe you’ve never had a problem with any of this, and freely make high-pitched noises whenever there’s a puppy in sight (as is appropriate).Whatever your background, attempting to turn a web design into “something cute” will require you to try and determine exactly what makes a thing cute in the first place, and that’s where it gets complicated. The whole concept is naturally subjective. It’s a vaguely warm and fuzzy emotion that seems directly connected to our impulse to smile, but what brings it on can vary greatly. There are people who call insects cute, whereas I could never bring myself to agree.
They’re just icky, okay?
But whatever you use, cuteness sells—cue the obligatory joke about cat GIFs on the Internet. At some point in our lives, we will be called upon to make something cute, because that’s what the client wants, and we’ll start idly wondering if that means making everything pink.
Don’t do that. Read this instead.
1. Imagery
Using cute imagery is almost cheating. I mean, you’re just taking something cute, throwing it into your design, and calling it a day. But don’t discount the idea; being cheap and easy doesn’t mean that it’s not effective. Some curmudgeons notwithstanding, human beings are biologically wired to get hit right in the pleasure centers of our brains when we see human offspring (particularly our own), and other things that share some baby-like features (ie. puppies, kittens, pandas).
Stock photography can be a great start, but keep in mind that illustration can be a great way to trigger the same responses that wild make people want to squeeze your website. If you need to use original imagery, hiring an illustrator is also way easier than getting babies or animals to hold still.
Example: Wonderbly uses both photos and illustration.
2. Colors
Imagery is good, but what if you want to embed that warm and fuzzy feeling into the very DNA of your design, and not just in the content? This is where we turn to color. Now repeat after me: Pink is NOT the only cute color.
In fact, “cute” colors are a concept that will vary according to individual cultures. For one thing, babies vary in color. The general rule to follow, though, boils down to three words: primaries and pastels. Bright primary colors and their softer pastel counterparts dominate the “cute aesthetic” worldwide. If you’re designing something cute for (very young) kids, use bolder tones. If you’re designing something for adults, use the pastels, which are far easier on the eyes, and tired brains.
Example: Kapu Toys goes hard on the primary colors.
3. The Other Kinds of Cute
So far, I’ve discussed cuteness in terms of human offspring and related things. Thing is, the word “cute” wasn’t even originally used for babies so much as for keen or sharp-witted people. It evolved over time to be used for attractive young people, and then finally for babies and other baby-like things.
Since then, it has also come to encompass things that, while not baby-related, still produce a warm and fuzzy kind of feeling. Things that produce feelings of comfort, contentment, and “home” can also be represented by the word “cute”.
For example: “What a cute tablecloth!” “That’s an adorable rocking chair.” Cute arrangements of flowers. etc.
Example: Noritake shows how the domestic-cute concept has reached far beyond Western borders.
The additional forms of cuteness go beyond the domestic and into the world of fashion as well. A certain warmth and contentment can be found in knowing that you’re looking good today, hence the use of phrases like, “That’s a cute dress!” This use of the word also hearkens back to its use in describing generally attractive people.
Example: Bando provides a picture-perfect example of fashion-cute.
4. Cuteness in the copy
So we’ve discussed the use of cuteness in imagery, in color, and the overall feel of a design. So how do you write cute things in your website without—for the love of God—going full “baby talk”? Well it all comes down to the emotions you want to evoke. Cuteness is a term that covers a lot of possible subject matter, but one primary emotion: warmth.
You don’t want to write the word “cute” over and over in an effort to convince people to see your page’s subject your way. You want to convey the comfort of a home where you are loved, the depth in the round and trusting eyes of a puppy, the clumsy antics of a cat that’s been surprised by something, or the sheer joy of wearing an outfit that makes you give yourself the old up-and-down glance in the mirror.
Concepts like “elegance” are inherently visual, and so designing them into a website is a purely visual exercise. Concepts like “cuteness” are far more emotional. Though you can tune the visual characteristics of just about anything to make it cute, it’s worth remembering that the emotional side of the concept can actually get pretty complex, and your copy should reflect that.
5. Cuteness in the details
Keep in mind that you don’t always need to saturate your website with cute vibes. As many parents whose children love the Minions might tell you, too much “cuteness” can get on the nerves after a while. For most websites that don’t strictly relate to children or home decorating, you’ll want to splash some cuteness in here and there, without overwhelming the user.
One of my favorite examples will always be sites like Zurb. Most of the site is fairly corporate-standard, but there’s a touch of cuteness in there, with their hidden cows, their project mascots, and entertaining bits of microcopy. It’s a light touch, but it’s enough to make them stand out.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
10 Tips for Building a Visual Language
Posted:Wed, 07 Nov 2018 10:45:33 +0000
A visual language is just like any other form of communication.Where “language” refers to spoken or written communication, visual language goes a step further to connect with a certain community. Elements from color to style to type of photos or illustrations establish what a brand or company is. These visual elements tie together a group in a structured and conventional way that people understand.
A visual language includes both the written and spoken elements of a website or brand, as well as every design technique, photo, icon, logo and item, users can see on the screen. Often users won’t know a visual language is there; they just know that when they see your website or brand they recognize it.
Here’s how you create a visual language that users can understand.
1. Build a Color Palette
A strong color palette is an identification tool for users. When consistent colors, which as well-known and connected with the brand or website, are used; users know where they are. They aren’t lost in the massive universe of the web, because you have told them visually what website or brand they are interacting with.
This color palette shouldn’t be unique to your website. It needs to be universally applied and connected with everything a brand does—online, social media, swag items or packaging, business cards.
Further, the color palette should reinforce brand values.
Think about the colors for fast-food restaurant McDonald’s: Yellow and red. The colors represent happiness (yellow) and hunger (red). How often have you ever seen this brand without the “Golden Arches” or something with red on the packaging?
2. Create a Typographic Hierarchy
Just as important as selecting fonts for your brand is determining how they will be used.
A typographic hierarchy sets the tone for whether you talk to users, whisper (small light typography) or yell at them (large all caps lettering). There’s no right or wrong way to communicate; it’s knowing what works with your tribe.
The trick to building a typographic scale is that each level should be different enough from the one preceding and following it so it is easy to see changes in text.
Airbnb has a distinct typographic scale with sizes and weights for typography that’s standardized. This standardization also extends to the color palette and spacing to contribute to a solid visual language.
3. Establish a Grid
Spacing and placement of elements can be just as important as the elements themselves. Is your visual identity clean and organized or a little more chaotic?
Your grid answers this question.
FreeCodeCamp explains this structure well:
A modular structure offers the possibility to work with entire engineering teams. Thus it could quickly produce products suitable for all platforms. If you are creating conceptual designs from a message sense, the integration method will be more useful.
In a nutshell, what does the complexity or simplicity of the grid communicate about you?
4. Create a Library of Components
From buttons to icons to cards or popups, create a library of components so all uses of elements within the design are consistent.
A button shouldn’t be a blue circle on one page and a red square on another. An icon shouldn’t be line style on one page and full color on another. This inconsistency can make users question if they have left your site by mistake.
A good library of components includes all the elements needed to build pages within the design and rule for usage—size and scale for each device size and adjustments for iOS versus Android devices.
While building common components can seem like a big chore on the front end, it can make creating new pages a breeze later down the line.
5. Emphasize an Image Style
Whether you are using photos, video or illustration, creating and maintaining an image style is important. This is one of the strongest visual assets that users will remember and associate with your website or brand.
This style relates to anything from photo crops—tight versus wide, use of filters, speed of videos and style of composition.
Look at the multiple elements from Smashmallow below. Even if they weren’t grouped, they contain common elements that connect the images to the brand. (Not the hot air balloon on every image.) This image style set the tone for who this company is and how they connect with users.
6. Build Rules for Animation
Animated elements should also follow a basic set of rules. Do they move fast or slow? Do they move on their own or only as a hover state?
These interactions help establish visual identity as well. Animations can set a tone for a project. Using, or not using, them can say a lot about who you are and what you want to be.
This mojito shot from Dribbble, below, has circular motion. Think about how other animations in the same visual language would look. They might also move in the same circular manner and at a similar speed.
7. Match Words and Visuals
For a visual language to be effective, it has to match the actual language used in the design. If the words and visual elements are a mismatch, users could be confused by the experience.
Elements should work together to create an overall package of communication that all emphasizes the same thing.
Steffany, below, uses color, a feminine logo and words to show what her website is all about. The pieces work together to create an overall picture and don’t compete with different text and visual messages.
8. Be True to Yourself
A visual language will only work if it is believable. It must represent who and what you are.
Could you imagine Sesame Street without the characters? It would be quite difficult.
The entire visual identity of the brand is built around Big Bird and Elmo and others. Every bit of the design reflects this. To further connect the visual identity of the television show and cartoon characters, note how both are used in the website design. This helps pull fantasy and reality together visually to help maintain the brand’s identity.
9. Be Consistent
Once you’ve developed a set of guidelines for a visual language, stick to them. The biggest misstep when working to build a visual language is inconsistency.
FreeCodeCamp notes that a design language should answer the following questions. They are also the benchmarks of whether you are honoring consistency with your visuals.
- What color are we using?
- Where is the logo placed?
- Was this pattern used somewhere else?
- What’s the latest documentation?
- How do we build this animation?
- Is this from the component library?
Note that Corby can affirm the answers to these questions. The logo is in a common placement, consistent colors are used throughout and the patterns/animations are used in the same way.
10. Develop a Style Guide…And Enforce it
Establish a visual language and codify it.
Then put someone in charge of enforcing it. Your identity is too important to leave to chance. Humans are innately visual; visual language can be one of the strongest elements that connects users to your website or brand.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Unique Ways to Integrate Social Media into Web Design
Posted:Tue, 06 Nov 2018 10:45:39 +0000
There’s something very special about social media marketing and how it compels consumers to engage with it.The Hootsuite 2018 Social Media Barometer says there are now over 3.2 billion global consumers who are active on social media. With such a large part of the population actively involved in social media, it’s no surprise that 67% of business executives surveyed in the report said that social media marketing improves their bottom line.
As a web designer, you can take that knowledge and keep doing what everyone else does with it:
- Add “connect” icons to the header;
- Stick “share” icons to the scrolling blog sidebar;
- Embed videos from YouTube.
Or you can find unique ways to infuse your web design with a dash of social media.
Unique Ways to Use Social Media in Web Design
Obviously, I’m not telling you to turn your site into a social network, or a rolling masonry grid of photos. Instead, I would encourage you to think outside the box and consider how you can apply the strengths of social media creatively to your design.
Here are some real-life examples to inspire you:
1. Add Hashtags and Handles to the Design
When you think of what makes social media so distinct from other kinds of marketing, you’ll likely think of hashtags (#) and handles (@). They’re simple symbols that we used long before social media was invented and, yet, they now have a special significance for most of us.
If it makes sense for your brand (i.e. it has a younger audience and also happens to be active on social media), hashtags and handles can add a really cool touch to your web design.
Here is an example from the Nuevos Conductores website from Chevrolet Mexico:
This website pays homage to the “new drivers” Chevy is catering to and uses real people to make its case. This whole website is an interesting case study in and of itself, that not only uses real Chevy drivers’ Twitter handles, but also includes messages, hashtags, and images from their social accounts to build out the design and message.
Hashtags can be used for strictly self-promotional purposes as well and don’t need to have such a predominant placement in the design either. Take the Caribana Festival, for example.
You’ll find a small hashtag has been added to the left side of the website. It’s really subtle, but it’s ever-presence is likely to get noticed by fans of the festival who’ve come to the site to learn more and get tickets.
Then, there’s Popular Pays’ 2017 Year in Review that actually uses hashtags as a design element.
As users scroll to a new topic on the page, the hashtag changes. Think of it the way you’d use header tags in a blog post or on a page of a website. Only, this adds a bolder touch.
2. Use Notification Tickers
Because of how ubiquitous email and social media have become in consumers’ lives, there’s no denying the lure of the pending message notification. You know the ones I’m talking about.
Twitter does it:
LinkedIn does it:
Now, websites are doing it, too:
But this is an interesting use case from a friend of mine. The recognizable notification ticker isn’t telling visitors that there are messages waiting for them (though it has the same effect in drawing their eyes there). Instead, it’s saying, “Hey, we have five jobs waiting for you to apply to!”
I think there are other ways this could be used as well and it doesn’t have to be for users logged into a SaaS platform or membership site. As we move more and more away from things like pop-ups that can intrude on the user experience, I think we’ll see websites find unique approaches to share news and promo codes and things of that nature. This notification ticker would be an interesting way to do that.
3. Design a Timeline
With most social media feeds, we’re presented with a chronological timeline of our activity as well as those we’ve connected to. There’s something very appealing about this layout, in general, as it allows us to get a sense for someone’s story.
And what is a website if not the “story” about a brand and its mission to serve its consumers?
Dr. Pepper is a brand that’s been around a long time, but I bet a lot of its drinkers don’t know much about its history. Well, if they were to visit the Dr. Pepper website, they’d definitely learn more about where this soft drink came from and even catch a glimpse at old promotional content that some may recognize still today.
If you navigate to the History page on the site, you’ll encounter a timeline that briefly tells its story (nice and succinct just like most of our own social media “stories”):
Then, as you scroll down, you’ll encounter images that support the story, even playing on the nostalgia of having drank Dr. Pepper through the decades:
When you think about it, this is really no different than why we as consumers take photos and post them online. We want to share the highlight reel of our lives, and brands are able to do a similar thing with their websites.
4. Talk to Visitors with Quizzes and Chat UIs
Let’s face it: a lot of times, a website just feels like a digital flyer. “Here is our business. Learn about us and get in touch.” I believe that’s why so many people flock to social media nowadays; to learn more about and actually engage with businesses.
There are so many ways in which you can jazz up your web design to make the experience less lackluster, of course. A well-timed pop-up or an eye-catching animation can help. Gamified elements like timers are a nice touch, too.
Aside from placing a live chat on your website—that someone then has to man—there has got to be another way in which you can make your web design really talk to its visitors. Right?
One example I like is the John Frieda website. There is a Style Match page which allows visitors to talk to the site the way they would a hair stylist:
The quiz-style format allows visitors to input answers to questions they’d get when visiting a salon. In the end, they receive a personalized response and recommendations based on what they “talked” about.
A chat UI is also possible, though AI isn’t as simple of an implementation as something like a built-in quiz. Consider what makes the most sense for your web design and apply the interactive element accordingly.
Wrap-Up
Social media plays a big part in the modern business’s marketing efforts. But when it comes to websites, why is it that we only catch minor glimpses of it in the form of social share icons or the embedded news feed?
I would argue that we should think more abstractly about the strengths of social media. Then, apply those same unique principles and elements to web design to make it even better.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source
FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.