Webdesigner Depot

syndicated content powered by FeedBurner

...

Reset this favorite; show all Subscribe options

Subscribe Now!

...with web-based news readers. Click your choice below:

...with other readers:

(Choose Your Reader)FeedDemonNetNewsWireNewsFireNewsGator Outlook EditionRSSOwlShrookUniversal Subscription Mechanism (USM)

Get Webdesigner Depot delivered by email

View Feed XML

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

• 10 Things Every Designer Hates to Hear

  Posted:Mon, 24 Jul 2017 10:45:15 +0000

  It’s happened to every designer at some point: A client or co-worker makes an absolutely cringe-worthy comment about your work.

  Feedback is important. And often the problem with some of these elements no designer ever wants to hear is that they cause a roadblock in the communication process. So here we look at some real-world situations (with a spark of humor) and ways you can handle what comes across as tactless, thoughtless comments with grace.

  1. I Don’t Like It

  This might be one of the most useless phrases in this history of design. Why don’t you like it?

  To learn more about what’s not working for a client, you will have to ask some questions. There are a lot of people out there who operate on the “I’ll know it when I see it” philosophy. That’s just not practical.

  Develop a set of questions to ask when you get this response. Ask about the colors, typefaces and images to figure out what isn’t liked. Often something as simple as a font choice can “fix” the entire design.

  

  2. I Don’t Have a Budget

  If you start working for free today, your work will never be valued tomorrow. While there is a time and place for pro bono work, someone who is hiring for a design job or project needs to understand the cost – and be able to pay for work.

  If a client tries to negotiate a trade or “publicity” for projects, take a moment to educate them on the costs of design. There’s time and software and expertise. And if the client still doesn’t want to pay, walk away from the job.

  

  3. Can You Get the Logo/Photo Off Our Website?

  Um … no.

  Before you roll your eyes – ok, after you roll your eyes – ask politely for the original files.

  

  4. Make It Pop

  So, what does “pop” mean, exactly?

  This is one of those phrases that everyone tends to use, but no one really understands. Is “pop” color, or copy, or size? Does is mean trendy? Go back and ask what element needs to be different.

  Sometimes this is the start of a design conversation. Before you run away, try to pull the information out of the client. Have them show examples they do or don’t like to give you a place to start.

  

  5. Can You Make the Logo Bigger?

  Sometimes the logo does need to be bigger. Clients will always think so. It’s their brand mark and they want it displayed prominently.

  Compromise on this one. Just assume from the start of a design project that you’ll hear this phrase and imagine how the bigger logo will fit into the layout. Once it is big enough, have a conversation about size and scale to help the client understand why making the logo any bigger could be distracting or detract from the goal of the design.

  

  6. Just Be Creative

  In other words … “I have no idea what I want.”

  These really are the worst kind of client. I’ll take someone who knows exactly what they want—even if I don’t agree—over the “be creative” people any day. The phrase “just be creative” is an almost foolproof sign that there will be so many revisions, all without direction.

  If that’s the creative direction, avoid the project if you can.

  In all seriousness, you can help develop creative direction by finding out what the client is looking for. Ask these questions to get started:

  • What does your company or business do?
  • Do you have any digital or printed materials that you already use? (Do you like them or not?)
  • Who is the target audience?
  • What do you want the design to do?
  • Where will the design elements be used (print, web, etc.)?

  

  7. I Like the Design of…Do That

  It might be a time for a lesson in plagiarism. Copying a design is just plain wrong.

  It’s OK to share examples of likes, but not to just mock up something that looks like another design. It will hurt your credibility as a designer and has the potential to present a flurry of issues for the client.

  

  8. Can You Just Try All Those Ideas?

  I can, but I’m going to charge you by the hour.

  It’s a tough situation: You have already taken the job and in early meetings the client starts asking for a lot. It’s more than just scope creep; it’s scope on a runaway train.

  It’s important that you explain and set boundaries from the beginning. Some designers and agencies write a number of comps or revisions into the contract, while others set revision or mockup times to a certain number of hours. These “rules” can help you keep the idea dump from becoming a real problem, and provide an opportunity to charge for it if the client really wants to see it all. (Occasionally, there are some that will want to do that.)

  

  9. Let’s Work On It Together

  Collaboration is one thing. Designing with a client is another thing completely.

  You might have to do a little client management in this situation. Rather than sitting down and working on the design together, offer some other ways they can help:

  • Provide examples of design they like
  • Gather images to work with from their library
  • Collect design elements they already have and like
  • Provide specifications for a color palette
  • Gather brand guidelines and materials

  Then keep this client in the loop. Long periods without communication could be stressful for them and lead to even more desire to “help.” Provide frequent progress reports and updates to make them feel like part of the process.

  

  10. It Shouldn’t Take Long

  Nothing makes a designer feel devalued like someone else telling them the work doesn’t take long. It’s offensive.

  But before you just ignore them completely, politely ask what needs to be done and provide an estimate of time (and cost, if applicable). Don’t get caught in a swell of anger as you want to tell them everything that goes into changing a design or creating something new, just state the facts.

  And if they continue to devalue your work in the future, fire them as a client. (Or show them this article in hopes that they will see the error in their ways.)

  

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• Popular Design News of the Week: July 17, 2017 – July 23, 2017

  Posted:Sun, 23 Jul 2017 10:16:59 +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.

  7 Design Hacks You Can Steal from Star Wars

  

   

  Google’s New Panic Mode Should Be Part of Every UI

  

   

  Site Redesign: Pentagram

  

   

  DisplayJS: A Simple JS Framework for UIs

  

   

  UX is Killing Brands

  

   

  25 Typography Freebies to Make your Life Easier

  

   

  The Value of Minimalism

  

   

  How to Switch your Career to Product Design

  

   

  Data Porn: Game of Thrones Style

  

   

  Designer Excuses

  

   

  Flow: A Typeface Built for Wireframing

  

   

  Google’s Rules for Designers Working with AI

  

   

  Site Design: Bonde.nyc

  

   

  The Designer’s Guide to Using Colour in Branding

  

   

  Said no User Ever

  

   

  The Graphic Design of Old Batteries

  

   

  Wordmark.it: Helps You Choose Fonts

  

   

  UX Scenario Scaffolder Tool

  

   

  How not to Be a Creative Dictator

  

   

  Are Subscription Services the Future of Web Design?

  

   

  Making Our own Emoji

  

   

  Microsoft’s Calibri Font is at the Center of a Political Scandal

  

   

  Pretty Pixels Vs. Functional Design

  

   

  The Zuckerberg Shirt

  

   

  Pitch Decks from Top Startups that Raised $700m

  

   

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

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• Comics of the Week #399

  Posted:Sat, 22 Jul 2017 09:40:35 +0000

  Every week we feature a set of comics created exclusively for WDD.

  The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

  These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

  So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

  Feel free to leave your comments and suggestions below as well as any related stories of your own…

  New color invention

  

  Better safe than sorry

  

   

  Thumbs down

  

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

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• 4 Usability Testing Tools for Designers on a Budget

  Posted:Fri, 21 Jul 2017 10:45:24 +0000

  Have you ever encountered a website with confusing navigation? Been sent down the wrong path by misleading labels? Or needed your best detective skills to find a particular piece of content? It’s frustrating, isn’t it? What can companies do to ensure that users can find what they are looking for on a website?

  Usability testing allows you to measure the effectiveness of the site structure and labelling against real user tasks. Get real users’ insights to help you evaluate which parts of your content hierarchy work well, and which parts don’t. So you can make informed design decisions about how to organize and label your content.

  To help make the world a little easier to navigate and enjoy, you can use a technique called “Lab Usability Testing”. With this process, it is possible to get tips to improve UX and enhance the usability of your product. Individual testers whose profiles match those of the target users perform typical tasks with your product or a prototype. A researcher facilitates the quiz sessions and controls different conditions to identify usability problems and their causes.  While it is one of the most reliable methods to collect data and confirm or challenge assumptions, lab testing services are quite expensive.

  

  Fortunately, there are some tools you can use for your business that are free, or relatively cheap.

  1. Usability Hub

  Usability Hub features five online tools that enable usability testing of a website or a web application using screenshots of pages:

  Five Second Test

  This tool can be used for optimizing the clarity of design by measuring a customer’s first impression.

  Step 1. Upload a website screenshot and set a number of questions.

  You can create your questions or choose one of the predefined questions such as “What product do you think this company sells?” or “Which element on the page did you focus on most?”. You can also ask people to rate the quality of this page between 1 (worst) and 5 (best).

  

  Step 2. Show a design to people for five seconds and ask what they remembered.

  

  Step 3. Check a report with answers. It can be organized as a list of keywords or as a word cloud.

  

  

  First Click Analysis

  This tool helps you estimate how efficient your designs are at letting users perform a proposed task.

  Question Test

  After uploading a design, you can assemble and investigate user feedback. In addition to the response data, the system creates a word cloud to help you identify regularly occurring keywords.

  Navigation Test

  This tool helps you enhance your conversion rate by analyzing how users navigate through your websites and applications.

  Preference Test

  This tool can be used to decide between design options by asking people which one they prefer.

  Pricing: Responses from people you invite are free. Responses from the Usabilityhub tester panel start at $2.50 per user.

  2. Optimal Workshop

  With Optimal Workshop you can optimize your site using five different tools:

  Tree Testing

  This tool takes visual design out of the equation, allowing you to measure the effectiveness of your site structure and labelling against real user tasks.

  First-click Testing

  The tool records the first click. Heat maps will then show you exactly where users get troubled, or confused, by your content.

  Step 1. Upload your screenshots or designs and add a list of typical user tasks

  

  Step 2. Ask user to proceed with the task

  

  Step 3. Check these insights and make any required changes.  

  Card Sorting

  Start by testing with the simple method of card sorting to find out how other users would classify and label content on your site. Following these patterns helps you organize content in a way that makes sense to the people using your products or services.

  Pricing policy: free and paid versions; free version includes 10 responses per study and 3 tasks per study.

  3. Feng-GUI

  Feng-GUI simulates the user’s view for the first 5 seconds. This application creates an eye movement map on the page based on an algorithm that predicts what the real person is most likely to see.

  Right on the main page of the site you can upload a screenshot and see the probable areas of the visitor’s attention.

  

  

  

  

  Pricing policy: free and paid versions; you can upload 1 screenshot every 8 hours for free.

  4. TestFairy

  TestFairy is designed for iOS and Android Mobile beta testing. It provides you with video of the tests so that you can see what exactly went wrong on the customer side.

  The process is simple: upload your app, invite your friends or colleagues to examine it, then check results when the tests are performed.

  There are several ways to send your app to the people you would like to test it:

  • Email invitations: Enter your prospective testers’ email addresses, and send a message with a link to download the app.
  • Native testers app: There is a TestFairy app for downloading and installing the apps to be tested.
  • Web app: Testers who want to use an application but do not want to install a native app on their device can use this.
  • Public beta pages: You can publish a public beta landing page for every TestFairy application, with an open invitation.

  In cases where this is needed, you can set your project to work in ‘strict mode’ that will require testers to login before they download your app.

  With more than 10,000 devices in the mobile world, your app can look different on every device. One of the most challenging jobs for mobile developers is to make confident that any app looks the same on all devices. The tool provides you with reports allowing you to see how every part of your app looks on every device.

  

  Pricing policy: free and paid (enterprise) versions.

  Conclusion

  Online tools for usability testing help find out how much the site meets the expectations of users. Following recommendations leads to increased involvement and, ultimately, conversion of visitors to buyers. Many companies spend millions on testing the effectiveness of their web resources. You can do this with the help of online services. Even small changes can lead to significant positive performance.

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• Google Redesigns its Mobile Search

  Posted:Thu, 20 Jul 2017 14:45:42 +0000

  Google’s minimal search page has consistently been heralded as a minimalist masterpiece since it first appeared in 1996. It’s been argued by numerous designers—myself included—that it was the perception of Google as a ‘pure’ unadulterated search was more central to Google’s rise and eventual dominance, than the merits of its (in)famous algorithm.

  So it’s something of a surprise to learn that Google is abandoning this minimalist approach in its mobile apps in favor of a social media-style newsfeed.

  Starting in North America immediately, and rolling out worldwide in the coming weeks, Google on iOS and Android will now show users a ‘personalized’ newsfeed, before they enter a search term.

  News, editorials, videos, images, and music shown in the feed will be based on previous searches by the same user. You’ll also have the option to tap a ‘follow’ button to add interesting topics to your feed. But that’s not all, according to Shashi Thakur, VP Engineering, Google:

  your feed will not only be based on your interactions with Google, but also factor in what’s trending in your area and around the world

  Not a fan of Game of Thrones? Too bad, if everyone’s watching it, you will be too. Bad news for those of us that didn’t get around to season 3 yet.

  Naturally one of the biggest concerns about this shift in emphasis is that Google will editorialize content. It’s impossible to avoid bias; even an AI, making decisions based on mathematical formula has bias coded in. Anyone who has ever seen personalized advertising online (everyone), will know how difficult tech companies find it to accurately tailor this type of content.

  Of course Google didn’t knock this one out in the course of a lunch hour. It’s a fair bet that its annual turnover is greater than the combined lifetime incomes of everyone who’ll ever read these words, Google have tested and tested and tested and tested this. Neither is this move entirely unprecedented; G+ attempted to build a social network by piggy-backing on Google’s core service, and the newsfeed itself has already been trialled since 2016.

  Google’s aim is simple: keep users on Google. Whether it’s AMP, or Material Design, Google’s focus—like any profitable business—is on retaining quality customers, especially on mobile. As Shashi Thakur stated:

  The more you use Google, the better your feed will be

  The impact goes beyond SEO. Two decades ago Google launched a bold, unashamedly minimal site amongst a sea of maximalism. That bravery resulted in a timeless design that established a brand and changed the web. By taking Google’s mobile search in a new direction, the company is changing the way we find, and therefore consume, content online.

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• 5 Things Users Want to Know Sooner Rather Than Later

  Posted:Thu, 20 Jul 2017 10:45:43 +0000

  When I go to any website, I’m looking for something. I may want to buy a product, or find information, or browse random memes, but whatever it is, I have a goal in mind. That goal could even be subconscious, but it’s there. Human beings never do anything without a reason. Whether or not they know what that reason is, or can articulate it, is a whole different story.

  Like most people, I go with the website that gives me what I want the fastest. That’s it. As a designer myself, my familiarity with things like design patterns and search engines gives me an edge in finding what I want. But sometimes, even I can’t find the darn “buy this” button for a good thirty seconds.

  Why, then…would you ever hide the most commonly-looked-for bits of information from people?

  Why, then…would you ever hide the most commonly-looked-for bits of information from people? Why would you make it difficult in any way for them to get what they want, especially when what they want is to give you their time, attention, or even money? If they have to look for this important info, that means it’s hidden, or may as well be.

  Now, designers mostly don’t do this on purpose. But it happens. In the interest of helping users find what they need, and making you some money, here’s what users are looking for first and foremost, more or less in this order:

  1. What Is It, and Sometimes Why Is It?

  Okay, lots of users browse around with an idea of what they’re looking for. But sometimes, a user is going to land on, let’s say your product page, because a friend sent them a link and said, “Check this out, dude!” In those situations, you really want to have at least a bit of text that describes what the product is and does.

  …tell me, in simple non-industry jargon, what you do.

  That’s an obvious example, perhaps. People always describe and show off their products, right? Well, things are often less clear with companies that sell services. I can’t count the number of times I’ve landed on a site that describes what they do purely in terms of benefits: “enrich your life”, “harder, better, faster, stronger”, etc.

  That’s all well and good, but only after you actually tell me, in simple non-industry jargon, what you do.

  2. How Much Does It Cost?

  This is the obvious next step. Let’s say a website looks like it has what you need. It’s going to fill that gaping void in your life—probably—and you want it now. Well, you want it, but how much are they asking? A user should never have to go hunting for the cost of the product, service, or information.

  Mind you, you should be making the cost clear, even if you’re not asking for money. Sites that offer stuff for free often try to hide the true cost of membership. Do you need their information? Their viewership alone? Their action in support of your cause? Make this information easy to find. Be up front, and people will respect you for that.

  Obvious-yet-apparently-necessary corollary: Hidden fees will make them hate you.

  How Do I Get Rid of It?

  One thing users will also want to know, that kinda falls under the “cost”, is how long they’ve got to commit to this product or service. What is your policy on refunds, cancellations, or returns? You probably don’t want to put this information in your sales copy, unless you want to emphasize the idea that your product is a low-risk investment. In any case, it should be readily available. A link you find in the middle of the page, rather than somewhere in the footer.

  3. How Good Is It?

  After a user has assessed the cost of a thing, they want to know if it’s really going to be worth the money they’re shelling out. Obviously, you can throw some marketing copy up there, and try to convince them yourselves, but of course you’re going to say it’s great. You’re the one making it!

  This is where social proof comes in. Testimonials are only the beginning. Be proactive and link to third party reviews. Link to your social media. Invite prospective customers to become a part of your online community before they’ve even bought your product.

  4. Where Do I Get It?

  Please just put a clearly labelled “Download” link at the top of the page or Github repository.

  Okay, now they want to get the thing. Most commercial websites have figured out that calls to action need to be big, flashy, and obvious. Not all of them have figured it out, but most of them have by now. It’s typically older sites that remain somewhat confusing.

  Where I have had a problem with hidden download buttons, since forever, is in the world of free software. That’s both freeware and proper open source projects. This is understandable, given that most of the people making these websites are volunteers, and most are somewhat new to web design.

  If this describes you, I say: “Thank you for your contribution. Please just put a clearly labelled ‘Download’ link at the top of the page or Github repository.”

  5. How Can I Talk to You Directly?

  There are sites out there that kind of hide their contact info. Some do it from ignorance. Others do it out of a sincere desire to never talk to their customers—I get that, I really do; on top of the usual client problems, I’m a huge introvert, so I understand.

  That said, you need channels for talking to humans. Even if it’s just a Twitter account, that information needs to be more or less front-and-center. Even if they never talk to you, users want to know they have the option of getting in touch with a human if something goes wrong.

  Conclusion

  The best designers remember that they are also users. They are consumers, just like everybody else, only they’re quite a bit more educated on web design patterns. If your product or service is bad, tricking people into buying it will mean they never trust you again. If you have a good product or service, then offering all necessary information right up front can only help you sell more of it.

  And for the love of all that is good and decent, put that “Download” button somewhere I can see it.

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• 5 Unbreakable Rules for UI Animation on the Web

  Posted:Wed, 19 Jul 2017 10:45:38 +0000

  Transitions are a powerful way to communicate a change in a user interface. They can be used in apps to help offload a lot of the cognitive work into the visual cortex: they help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. Consequently they are an essential element of interaction design.

  Successful animated transition possesses the following five characteristics:

  1. Good UI Animation is Natural

  State changes in UI often involve hard cuts by default, which can make them difficult to follow. In the real world, most things don’t just appear or disappear immediately. When something has two or more states, then changes between states will be much easier for users to understand if the transitions are animated instead of being instantaneous. Let’s look at an example below where the user selects an item in a list to zoom into its detailed view. During expansion, the small card moves in an arc towards its destination as it expands into a larger card. This movement is inspired by the real world forces.

  

  2. Effective UI Animation is Staged

  A well-staged animated transition guides your user’s attention and clarifies the change of states. This characteristic is directly related to the user focus and continuity. A good transition helps direct user’s focus to the right spot at the right time, it puts emphasis on the right elements depending on what the objective is. In the example below, the floating action button (FAB) transforms into header navigation elements comprised of three buttons. The first-time user cannot really predict an interaction that is about to happen, but a properly animated transition helps the user stay oriented and not feel that content has suddenly changed. This transition helps guide the user to the next step of an interaction.

  

  3. The Best UI Animations Are Associative

  Transitions should illustrate how elements are connected. Good transitions associate newly created surfaces to the element or action that creates them. The logic behind associative connection is to help the user comprehend the change that has just happened in the view’s layout and what has triggered the change.

  Below you can see two examples of a layer transition. In the first example, the new layer appears far away from the touch point that triggered it, which breaks its relationship with the input method.

  

  In the second example, the new layer appears right from the touch point. Thus tying the element to the point of touch.

  

  Another example can be found in Mac OS which uses an animated transition when minimising a window. This animation connects the first state with the second state.

  

  4. Popular UI Animation is Quick

  If there’s only one principle of animation you care about it should definitely be timing. Timing is arguably one of the most important considerations when designing transitions. The animation should be quick and precise, with little or no lag time between the user’s initiating action and the beginning of the animation. Also, a user doesn’t have to wait for the animation to finish. In example below, slow animation creates unnecessary lag and lengthens the duration.

  

  

  When elements move between states, the movement should be fast enough that it doesn’t cause any waiting, but slow enough that the transition can be understood. For an animation to effectively convey a cause-and-effect relationship between UI elements, the effect must begin within 0.1 seconds of the initial user action to maintain the feeling of direct manipulation. Try to keep animation duration at or under 300ms as fast transitions waste less of the users’ time. Test it with your users to see what is tolerable.

  5. The Best UI Animation is Clear

  It’s a common mistake to overload UIs with animations or to create too complex interactions. Too much change in a user interface can leave a user disoriented and it takes time to recover from. Remember that every motion on the screen attracts attention, so too much animation at the same time creates chaos.

  Transitions should avoid doing too much at once because they can get confusing when multiple items need to move in different directions. Remember, less is more with regard to animation and transitions in particular. Anything that if removed would make a cleaner UI is almost certainly a good idea. When a surface changes shape and size, you have to maintain a clear path to the next view. Complex transitions should keep a single element visible. This helps keep the user oriented.

  Transitions and Accessibility

  Since transitions are about visual communication, they by default are not accessible by users with visual impairments. You should provide alternate content for this group of users. webacessibility.com’s best practices for animation offers suggestions on when to provide alternate content for assistive technology.

  Conclusion

  When designing transitions, focus only on the practical things they do for the user. Whether your app or site is fun and playful or serious and straightforward, using meaningful transitions can help you provide a clear and quick cohesive experience.

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• How to Build Banners With Custom Fonts Using Just Urls

  Posted:Tue, 18 Jul 2017 10:45:23 +0000

  Designing fun, visually appealing party banners can be a complicated task if you don’t have enough graphic design experience or know how to use image editing software, such as Photoshop or Sketch. Buying and installing an image editing software, installing custom fonts, designing the graphics and figuring out how to apply a text overlay can take a great deal of time and cost a lot of money… However, there is another option—Cloudinary—that is easy to use and can speed the design process with the use of a single URL.

  Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, administration, image manipulation and delivery. One example of image manipulation features is Image Text overlays (which is the topic of discussion).

  In this post, I will show you how to achieve the image overlay in the example above using Cloudinary, not just with common fonts, but with any custom font of your choice. At the end, you will see how simple, powerful and flexible this solution is compared to using graphics editing software.

  1. Setup Cloudinary

  Cloudinary is simple to setup and use. You just need to create an account, after which you’re assigned a cloud storage for your images:

  Create a FREE Cloudinary account using the signup form.

  

  When you sign up successfully, you’re presented with a dashboard that holds your cloud credentials. You can safely store them for future use:

  

  2. Upload Images

  Now that you have a free Cloudinary account, you can give it a test drive. Go to the Media Library and upload some images to your cloud:

  

  As you can see, the upload widget enables you to either upload from your computer or provide a link. Don’t bother about hunting for nice pictures on your computer, you can use what I got you from Pexels.

  Click on the thumb showing the image you uploaded and copy the link from the image’s details page.

  

  This is the what the original image looks like after scaled down to 700px width:

  

  Cloudinary Offerings

  Before we start implementing the text overlay feature, let me tell you about the core Cloudinary offerings:

  • Storage: We encountered this feature while uploading images to the server.
  • Delivery: The URL we got from the media library is what we use to deliver images from Cloudinary.
  • Transformation: Cloudinary enables you to manipulate images by adjusting URL parameters in the delivery URL. The image above is transformed before delivery by adding the transformation parameter ‘w_700’ which scales the image from it’s original 1,000+ pixel width to 700px.

  3. Text Overlay

  Text overlays in this context refers to applying characters as a mask on graphic images. This process is commonly used in image editing tools like Photoshop, Sketch or Illustrator, where you import an image to your work art board and use the text control to apply characters above the image. For example:

  

  The text printed on the party background image is what is referred to as “text overlay.”

  I used the font Verdana in the “JOHNSONS PRESENT” text in the example above. Verdana is a popular font and is readily available as a common font. However, in some situations, you may need to use custom fonts. In this case, you could  go to a website like dafont.com, download a custom font, install on your machine and use in your designs.

  Text overlays are applied as transformation via the transformation parameters, much like what we did with the width of the party image. The following example shows a text overlay on the image:

  

  http://res.cloudinary.com/christekh/image/upload/w_700/l_text:Verdana_20_bold_underline:JOHNSONS%20PRESENTS,g_north,y_25,co_rgb:F9583C/pexels-photo-341858_hx5cva.jpg

  This URL defines the many features going on with this image transformation:

  • w_700: Scales down the image to 700px
  • l_text: Defines the overlay text to be placed on the an image. This is a transformation feature.
  • Verdana: Font style
  • 20: Font size
  • bold: Font weight
  • underline: Text decoration
  • JOHNSONS%20PRESENTS: URL encoded overlay text
  • g_north: Text location which is top of the image.
  • y_25: y axis offset of the text from the top in percentage
  • co_rgb:F9583: Text color for the overlay

  4. Custom Fonts

  Our party banner is taking shape, but to make the banner more festive, we want to add some crazy fonts. We don’t commonly see crazy fonts, hence you shouldn’t expect to see one. This is why you cannot just use l_text:CrazyFont.

  Cloudinary is very flexible, though. You can upload your own custom font to Cloudinary, then use its public ID as the l_text value. Midnight Valentine is a typical party font that we can use. Download the zipped file, unzip, and upload the .ttf font file.

  (NB: You can only upload .ttf or .otf fonts.)

  You need to specify the type as authenticated and resource type as raw. You can do this while uploading via SDKs. Say Node for instance:

  var cloudinary = require(’cloudinary’)

  // Credentials retrieved from dashboard

  cloudinary.config({

   cloud_name: 'CLOUD_NAME',

     api_key: 'API_KEY',

     api_secret: 'API_SECRET'

  })

  cloudinary.v2.uploader.upload(

     __dirname + '/Midnight-Valentine.ttf',

     {resource_type: 'raw',

     type: 'authenticated',

     public_id: 'Midnight-Valentine.ttf'},

     function(error, result) {

       console.log(result, error)

   })

  You can now deliver the image using the custom font we uploaded:

  

  http://res.cloudinary.com/christekh/image/upload/w_700/l_text:Verdana_20_bold_underline:JOHNSONS%20PRESENTS,g_north,y_25,co_rgb:F9583C/l_text:Midnight-Valentine.ttf_80:CLUB%20NIGHT,co_rgb:ffffff/pexels-photo-341858_hx5cva.jpg

  We chained another transformation to what we had before. This time, the l_text’s font style value is now Midnight-Valentine.ttf which is the public ID of the font we uploaded. We removed the g_north property, as well as the y property, so the overlay position stays at the default location, which is the center of the image.

  Let’s have some more fun adding the venue and date of the party:

  

  http://res.cloudinary.com/christekh/image/upload/w_700/l_text:Verdana_20_bold_underline:JOHNSONS%20PRESENT,g_north,y_25,co_rgb:F9583C/l_text:Midnight-Valentine.ttf_80:CLUB%20NIGHT,co_rgb:ffffff/l_text:Verdana_20:Venue:%20JOHNSONS%20PARTY%20CLUB,g_south,y_130,co_rgb:ffffff/l_text:Lato_18_bold:Date:%2008-01-2017,g_south,y_100,co_rgb:ffffff/pexels-photo-341858_hx5cva.jpg

  Conclusion

  The first image shown at the beginning of this article was designed in Sketch. The last image was built by composing parameters in a URL. You can imagine how powerful the latter is. Knowing the right properties in Cloudinary to use will enable you to start generating graphics dynamically without the help of a graphics designer.

  You can learn more about these properties from the Cloudinary docs.

   

  [– This is an advertorial on behalf of Cloudinary –]

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• The Essential Guide to UX for AR

  Posted:Mon, 17 Jul 2017 10:45:14 +0000

  2017 looks set to be the year that augmented reality (AR) moves firmly into the mainstream. As the next big technology trend, it looks set to have a massive impact on user experience and, by extension, user experience design. The good news is that augmented reality has the potential to solve user problems that have challenged UX designers for years, like high interaction costs and low engagement. On the flipside, augmented reality also brings challenges for designers. This post will look at how augmented reality is affecting UX, and how UX designers can rise to the challenge of designing engaging, conversion-friendly, augmented user interfaces.

  What is Augmented Reality?

  Although it’s been around in some form since the early 90s, the term ‘augmented reality’ can still cause a little confusion. In a nutshell, augmented reality is technology that combines inputs from the real world with programmed components. These programmed components have to interact with real world data in some way, changing as the real inputs change.

  Whereas virtual reality (VR) shuts users off entirely from the real world and places them in an entirely fictional alternative, augmented reality adds a programmed layer over actual reality to create a third, dynamic level of augmented experience.

  So that hologram video of Michael Jackson dancing? Plenty of people claimed it was augmented reality, but they were mistaken. The hologram Jackson did not respond to real world inputs and was incapable of dynamic change based on those inputs. If anything, as Angie Li and Therese Fessenden write for NN Group, the real world dancers augmented the fiction, rather than vice versa.

  Examples of AR that the majority of users have at least heard of, if not used, are things like Snapchat, Pokémon Go and Microsoft’s HoloLens.

  How Does Augmented Reality Work?

  Designing delightful augmented user experiences requires an understanding of the technology’s functionality. A device’s numerous sensors—for example the GPS, camera and compass on a smartphone—feed inputs into a pre-installed software application on the device. The device interface then independently responds by adding sensorial enhancements to the scene. Therefore, an augmented reality interface is an example of what’s known as a ‘non-command user interface’; the interface acts and reacts without specific user commands.

  It’s important to point out that even if you have the latest AR-friendly smartphone, that doesn’t mean you’ll be seeing augmented reality elements everywhere you go. The technology also requires the AR software to be fired up, and a real world ‘trigger’. These three elements combine to make the augmented user experience possible.

  What Does Augmented Reality Mean for UX Designers?

  Obviously, the implications of augmented reality for user experience are enormous. The technology has the potential to completely revolutionize the way users interact with devices. From designing user flows for reactive interfaces to imagining users existing in a screenless world where everything has the potential to become an interface on command, the changes to UX design will be fundamental.

  Exciting, right?! But also terrifying. What with its unique blend of psychology, research, interaction design and software development, user experience is complex enough already. UX Designers need to futureproof themselves and ensure they’re ready for the opportunities and challenges that are already knocking on their doors.

  UX Opportunities of Augmented Reality

  Augmented reality is already changing users’ experiences of brands and digital platforms. At first glance the two most well-known examples, Pokémon GO and Snapchat, use AR in a pretty light way. After all, catching pokémons and jazzing up selfies with a flower crown hardly looks like ground-breaking UX. But let’s look at the numbers: Within a week of its release in 2016, 65 million people worldwide were playing Pokémon GO, and Snapchat valued at $24 billion when it went public in March (although share value later dropped and leveled out). Snapchat and Pokémon GO’s success is due to the fact they are using AR to provide users with a unique, customizable experience that keeps them hooked.

  The reasons for the stickiness of AR experiences aren’t hard to define. AR decreases interaction costs, reduces a user’s cognitive load, combines multiple sources of information, and minimizes attention switches. Pretty much the Holy Grail of UX.

  AR decreases interaction costs, reduces a user’s cognitive load, combines multiple sources of information, and minimizes attention switches. Pretty much the Holy Grail of UX.

  It’s therefore no surprise that we’re seeing AR taking hold beyond social media and gaming. The technology is already being exploited by forward-thinking marketing departments as a great branding opportunity. Take Pepsi as an early-adopter: In a 2014 the soda company ran a campaign on London bus stops which saw AR technology transform a normal, boring bus shelter wall into a screen full of asteroids or tigers on the loose. Maybe the campaign didn’t sell Pepsi right there and then, but in terms of branding it was a powerful move. UX Designers will work closely with marketing teams to test and refine augmented experiences that reinforce brand image and engagement.

  Conversions are another area where the potential of augmented reality is already being put to the test. Let’s take the example of a consumer shopping for a table. The simplified user journey might be: Research tables online, go to stores, take photos on mobile device, look at the photos in their home…And then uh-oh, it’s impossible to know which table is right just from some crummy photos taken in store. Would-be consumer is frustrated, fails to convert.

  Stores such as Ikea are using augmented reality to solve this. Using an Ikea app, users can point their mobile at an area in their home, and generate an augmented view of the same scene complete with a device-generated piece of furniture.

  The same works for buying pretty much anything online, from cosmetics to clothing. Consumers have already demonstrated their desire for this kind of experience: according to stats from MavenEcommerce, the type of AR app that people are most interested in for online shopping are:

  • Virtual dressing room – 88%
  • Shoe sampling – 87%
  • Virtual furniture sampling – 86%
  • Interactive vehicle manual – 75%

  Allowing the user to see the object in context solves the obstacle to conversion and everyone is happy.

  In the not-too-distant future augmented reality will probably provide even more out-there opportunities to improve user experiences. Think about augmented presence meetings and teleconferences, where a colleague from some place else on the planet, just like AR entrepreneur Meron Gribetz does in this TED talk. Devising the UX flows, interactions, gestures and UI animations for this kind of technology will fall to the augmented UX designer. Whereas now UX designers work with interactive prototyping tools to model and test realistic user interfaces, in the future they’ll combine UI prototypes with 3D prototypes from tools like Microsoft’s HoloLens. It could be that existing prototyping tools will introduce AR capabilities to keep up with the trend.

  UX Challenges of Augmented Reality

  But, as with any seismic tech shift, there will be challenges for UX designers designing for augmented reality. Let’s take a look at those challenges.

  Terminology

  Even before UX designers get started in AR, they’ll need to get to grips with a whole lot of new terminology. Familiarising yourself with terms such as modulated reality, HMD and HUD is a good starting place for meeting AR challenges head on, and starting to think realistically about augmented user experiences.

  Overkill

  This is going to be crucial to AR’s long-term success. To see what we mean by AR overkill just check out this video by Keiichi Matsuda, which presents a vision of an over-augmented user experience. The video is great, but would you really want to live with all that visual noise in your head all day? UX designers must avoid overwhelming users with useless or decontextualised information, instead using AR to add value in certain contexts.

  Hardware and Physical Comfort

  UX designers are used to designing experiences to reduce eye strain or thumb strain. But augmented reality will require consideration of other physical factors, such as arm strain: users will not walk around all day holding their mobiles at eye level. The comfort of wearables will become more and more important to AR adoption.

  Conditions and Context

  The environmental challenges thrown up by augmented reality are going to be huge. When designing for desktop experiences, UX designers are working with a relatively limited set of variables regarding the conditions a user might be in. With AR, a user could be absolutely anywhere, looking at anything, under any conditions, and still expect a stellar augmented experience. UX designers will have to run comprehensive user tests on software use in light and shady conditions, different weathers, interiors and exteriors, in motion or still. User testing is going to have to adapt substantially.

  Safety

  Users’ physical safety is also an issue. Pokémon GO designers ran across this when there emerged reports of players being so absorbed in the game that they were hit by cars or walked off cliffs. That’s probably the acme of bad user experiences, so augmented reality experiences will have to be designed that minimize dangerous outcomes.

  These challenges mean that UX designers need to have a deep understanding of users’ expectations around the new technology before they start to design experiences to match.

  Best Practices for AR UX Design

  The field of designing augmented reality user experiences in still in its infancy, but there are many best practices that UX designers can start thinking about now.

  Always Think About the Environment

  Whether the AR campaign will take place on the side of a bus shelter like Pepsi’s, in user’s homes or on the streets, UX designers have to design interactions for those conditions, and test them fully in those conditions. Rob Manson from AR UX has helpfully broken down physical user scenarios into 4 main categories:

  • Public, in which the user uses their whole body to interact with the software
  • Personal, in which the user uses a smartphone in a public space
  • Intimate, in which the user is sitting with a desktop and is not really in movement
  • Private, in which the user has on a wearable

  UX designers will have to define user journeys for the relevant physical scenarios and define how the interface will react to each.

  Make it Comfortable for Users

  Users hold their devices in the most comfortable, least effortful way they can. If you’re designing an AR experience for a handheld device rather than a wearable, you have to take that physical comfort factor into account. Make sure you’re up to speed with device use archetypes: for example, users will hold their device for longer when seated, or if they’ve got the device at chest level.

  The Interface Should be as Automatic as Possible

  The whole idea of a non-command interface is that it operates alone. Augmented Reality experiences should be designed to need as little physical input from users as possible. This makes sense, because if users are looking through the device screen at an augmented picture, it’s going to be hard for them to use gestures at the same time. Voice control is the obvious answer to this, and UX designers will have to start designing more voice interaction flows, as with Siri or Alexa.

  Start Designing AR Experiences Now

  As in right now. UX designers need to start understanding and trying out AR principles as soon as possible if they’re not to be left behind by the AR wave. Luckily, platforms like Coursera have some good introductory online courses, and some AR tools themselves also offer toolkits, such as Microsoft’s HoloLens.

  How AR is Changing User Experience Design, Final Word

  Augmented reality has the potential to give users the kind of experiences they crave: exciting, useful, usable and meaningful. It has the potential to marry user needs with business goals and create something digitally delightful in the process. But that kind of success story depends on UX Designers meeting the inevitable challenges thrown up by a new, exciting technology. UXers can do that by getting up to speed with current AR tech and, as always, empathising with the user to give them not only what they need, but also what they want.

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

• Popular Design News of the Week: July 10, 2017 – July 16, 2017

  Posted:Sun, 16 Jul 2017 09:03:26 +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.

  Angular Vs React: Which One is Better?

  

   

  Image Optimization for Websites

  

   

  20 Fonts Every Graphic Designer Should own

  

   

  The 5 Biggest Design Agency Trends of 2017 so Far

  

   

  Famous Brands Logo Animations

  

   

  The Future of App Development: Beyond Prototypes

  

   

  Everything You Need to Know About Colors

  

   

  Easily Create High Quality GIFs with Gifmock

  

   

  Spotify.me: Beautiful Analytics on your Spotify Listening Habits

  

   

  Working on an iMac from a Train is a Middle Finger to Portability

  

   

  Our Reponsive Design Workflow in Sketch

  

   

  Booking.com – UX Analysis and Responsive Redesign

  

   

  BitScoop: Create Software Better, Faster, Smarter

  

   

  F*** Function, Lets Make Design Pretty Again

  

   

  How to Create a Pattern Library and Why You Should Bother

  

   

  Graphic Porn — a Beautiful Selection of Printed Works

  

   

  How to Mostly Ditch Adobe Creative Cloud

   

  This is a Battle for the Future of the Internet

  

   

  Evolution of the LEGO Logo

  

   

  Orosko: Free Geometric Typeface

  

   

  The State of Enterprise UX Design in 2017

  

   

  The Netherlands’ Royal Crest Changes Gender

  

   

  Lionn: Incredible SEO Powered with Artificial Intelligence

  

   

  LastPass – An Unsolicited Redesign

  

   

  Abstract: A Platform for Modern Design Teams to Work Together

  

   

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

  3,000 Artistic Vectors, Watercolors, Flower Decorations & More – only $14!

  Source

FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.