close

Design

Design

Designing A Realistic Chronograph Watch In Sketch

22WvTH.gif

Designing A Realistic Chronograph Watch In Sketch

[unable to retrieve full-text content]






 



 


If you’re into wristwatches, like me, and are also a fan of the Sketch app (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustration of a watch using basic shapes, layer styles and cool Sketch functions such as “Rotate Copies” and “Make Grid.”

Designing A Realistic Chronograph Watch In Sketch

You’ll learn how to apply multiple shadows and how to use gradients, and you will see how objects can be rotated and duplicated in special ways. No bitmap images will be used, which means you will be able to easily adapt the final image to different sizes and resolutions.

The post Designing A Realistic Chronograph Watch In Sketch appeared first on Smashing Magazine.

Published at Thu, 05 Oct 2017 11:57:42 +0000

read more
Design

User Testing as a Design Driver:Looksery created a product for users, not designers

vr88F3.jpeg

User Testing as a Design Driver:Looksery created a product for users, not designers

You may have recently seen an abundance of bug-eyed people puking rainbows on Snapchat. Thank Looksery for that. Launched last year as an entertainment app based on face recognition technology and special effects, Looksery was acquired by Snapchat last month.

Donald Trump Looksery rainbow puke

Looksery technology propels Snapchat’s new special effects

Founded in 2013, Looksery launched in October 2014 after successful crowdfunding on Kickstarter. I recently spoke with lead designer Lidiya Bogdanovich to learn about their design process and how user experience testing transformed their app from good to GREAT.

What was the original concept for the app?

Looksery was always meant to be an entertaining app that demonstrates face detection technology in a fun way, like a video-messenger for you and your friends.

Looksery and Snapchat's facial recognition

Looksery’s facial recognition on the left, Snapchat’s seemingly identical facial recognition on the right (via Tech Crunch)

What was your role? How big was your team? What type of team members did you have?

It was design made by designers for designers and that is not what we wanted

Since the very beginning of Looksery I was the only designer. On later stages (post launch) our design team grew up to three people. We were a small team and we were doing everything possible for our product to blossom, so we didn’t have very strict responsibility borders of or clearly defined roles.

Startup members usually need to be able to perform multiple tasks and we were lucky to have the crème de la crème” of design society.

And how did you go about designing the product?

At first we relied on speculation and past experience, using on our professional knowledge and more than ten years of design experience. We wanted our app to appear as innovative as possible so we used trendy UI features. It looked awesome.

It was design made by designers for designers and that is not what we wanted. The first user testing showed that people didn’t get how to use it. At the end of the day we wanted all users to enjoy our technology without even thinking about UI.

Looksery sample effects

A sample effects survey

Talk a little bit about user testing. How did you administer the user tests?

We tried a lot of approaches at first. But step-by-step we figured out what our mistakes were and proceeded with our “polished” method. First we defined our audience. If we’re an entertainment app, who do we entertain? We decided that the main audience would be teenagers, students, and young people who are active in social media.

Every week we were communicating with our audience in both private testing (when we are talking about UI) and general testing (we were gathering people all together and showing them our special effects, to define which ones they’d use).

While conducting one-on-one testing we were trying to create a friendly relaxed atmosphere, giving our users simple tasks and asking them to comment everything they do while drinking coffee and eating cookies. That way you really see what your user is about, not when they feel like they are a lab mice.

We did testing every other week—even if it was small. That gave us flexibility to react, in case we were doing something wrong. Testing started long before the first launch and proceeded until the very end and, which was very important.

We ended up changing the UI completely after we started testing. At first we wanted to be like all those apps with awesome design that people post screenshots of on design web sites. But it appeared that those apps come and go. Really awesome apps that people like and use on a daily basis, those ALWAYS have a very simple, easy-to-use design.

And this is what we wanted to be. Not a screenshot on a UI design gallery, but an app that you open every day to chat with your friends.

Could you talk more about your user test findings?

The main problem was that people just wouldn’t hold camera the right way, so the face wouldn’t detect and the technology wouldn’t reveal itself—users needed strong lighting to capture their face sufficiently.

We needed to simplify the experience—to instruct the user on what to do without being annoying or making the app look complicated (because no one wants to play with a complicated app). We tried tons of concepts and none of them worked. But after enough testing we figured out that the best results were using walkthrough screens. So we decided to work in that direction.

Looksery initial walkthrough screens

Initial walkthrough screens

Looksery updated walkthrough screens

Simplifying the user experience. Why use eight words when you only need three?

We hired a model and a photographer and created new screens. The results were much better this time, but there were still room for improvement. What did we do then? We reduced the length of the titles, and added a “hint” arrow, showing what to pay attention to. We still were getting some funny results but it was working much better.

Any other major problems that you uncovered during testing?

Another problem was with a placeholder-picture that illustrated the photo-filters—the instagram-looking ones that are currently present in every camera.

Looksery initial filter options

A few initial filter options

After looking through lots and lots of pictures we decided to go with a parrot because it had the best color scheme and the most optimal contrast and detalization. That brought up other issues. We started getting “why am I pressing it I’m not getting a parrot-look” complains but that is part of the learning process!

What are your major takeaways from the process?

A few things:

  1. Choose the right audience. If you are making app for professional taxi drivers, testing it on your teenage sister or your grandma (unless she is professional taxi driver) is not an option.
  2. Create a real environment where the app is meant to be used. If it’s a navigation app, test it while walking on the street or riding in a car. If it’s the kitchen recipes app, test it while cooking in the kitchen.
  3. Install the test app on a familiar device. Try to find something very similar rather than testing on a foreign device—people get used to their devices and other operational system and new phones can cause a lot of stress and irritation. In our case, people didn’t want to take selfies or test the sharing option on our devices, because they were afraid that those pictures can go public or used in the wrong way.
  4. Find and work with the optimal amount of people. With too few test subjects the result are not representative. With a huge number of subjects, the process might be time-consuming or expensive. Our optimal amount of users is five to seven people and certainly no more than 10. If you have major problems in your app, you’ll realize it after fourth or fifth person.
  5. Identifying the problem doesn’t necessarily mean the identification of its cause. You have to dig deeper. This is probably the most important point.

Vogue uses Looksery

Vogue using another filter (full animation here)

Why are people are not sharing? Is the sharing button hidden? The button doesn’t look like a sharing button? Or people just don’t want to do it on your device while you are watching?

That’s extremely helpful. What is the next step for the product? Besides making the initial changes, how do you hope to use your learnings moving forward with product development?

As of a few weeks ago we are now part of a Snapchat team. Lots of celebrities are now using the app, such as Miley Cyrus (Miley Cyrus using Looksery Technology), Kim Kardashian, John Legend, Jimmy Fallon, models of New York fashion week. But me talking about Snapchat is a whole different story

Kardashian uses snapchat

Kim Kardashian West using Snapchat’s new features

My personal goal is to share our design experience, showcasing our mistakes and our attempts to make it better, to help others in their design process. People may choose not do user testing, rely instead on their own design experience, but I hope my experience will help someone in creating new awesome projects.

Published at Mon, 05 Oct 2015 17:56:53 +0000

read more
Design

CSS Grid Challenge: Winners and Templates

XTBuhD.gif

CSS Grid Challenge: Winners and Templates

[unable to retrieve full-text content]






 



 


CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox — but that’s simply not true. Some also think that they can use CSS Grid to replicate more advanced print layouts, which brings us all closer to what’s possible. Obviously print isn’t web, but we can experiment with some of the techniques from print on the web, too.

CSS Grid Challenge 2017: The Winners

One of the main reasons behind the idea of the CSS Grid Challenge was to have some starting points for layouts, and show what can be achieved with CSS Grids today. Well, we received some many great submissions that it was really hard to choose the one winner — there are so many submissions who deserve to win first place.

The post CSS Grid Challenge: Winners and Templates appeared first on Smashing Magazine.

Published at Fri, 06 Oct 2017 12:55:18 +0000

read more
Design

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

E4bMa4.gif

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

[unable to retrieve full-text content]






 



 


Editor’s Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article.

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

Today, there are nearly 30,000 U.S. federal websites with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained.

The post Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study) appeared first on Smashing Magazine.

Published at Mon, 09 Oct 2017 12:42:32 +0000

read more
Design

Designers, Calculate the Perfect Aspect Ratios with RatioBuddy

3Vcs8R.jpg

Designers, Calculate the Perfect Aspect Ratios with RatioBuddy

Designers know the pain of trying to match images to ratios. This happens all the time when you’re building a WordPress theme and trying to figure out the best image sizes for thumbnails.

But, there are dozens of similar tasks for figuring out the proper aspect ratio of an image, video, or embedded element. Thankfully, RatioBuddy can help.

This small web app lets you calculate aspect ratios of anything dynamically from your browser. All you need is Internet access and the proper size you want (or the aspect ratio required).

RatioBuddy web app

To start, all you do is enter the current image aspect or the size you’re thinking of using. Let’s do an example for building a WordPress theme and choosing a featured image size.

Let’s say you want your featured image to measure 800px wide by 500px tall. Enter this into RatioBuddy and you’ll get an aspect ratio of 8:5.

What you can do now is lock the ratio by clicking the small padlock to the side. This means if you change either the width or height values then the other will update accordingly.

Now, you can start finding thumbnail sizes to match your primary feature image.

So, let’s say you want a thumbnail size of about half that width (400px), then another even smaller at 300px. You know how wide you want the images, but how tall should they be?

With the padlock enabled, you just change the width value and you’ll immediately see the results in the height value box.

RatioBuddy example resizing ratio

Pixel values update immediately and you’ll even get custom CSS code you can copy and paste if you want to create an element at this ratio.

You can also use this web app to auto-calculate the size of YouTube embeds to keep your video ratios even. Or, you can use it to generate ideas for image gallery thumbnails.

Really, for anything to do with aspect ratios, this tool is a lifesaver. So, be sure to bookmark it if you do a lot of photo work and resizing for the web.

(Why?)

Published at Thu, 05 Oct 2017 13:01:07 +0000

read more
Design

Bringing Relevant Content into your Designs

Ju28QQ.png

Bringing Relevant Content into your Designs

Many important considerations impact software design. Business goals, user goals, user context, cultural considerations, platform paradigms, branding requirements, devices … the list goes on and on. While a primary focus for any software design effort should be the data or other content that’s being displayed, this keystone element is often given short shrift. This is unfortunate and shortsighted. Given the focus it your content will receive, it should be a primary consideration during the design process.

It is a common practice to represent data and content as “Lorem ipsum,” repeating data, or simply using “best case scenario” data. In reality, this isn’t what will be experienced in the final product. The data you have to work with can drastically affect the final design, and the design will influence the type, format, and presentation of data.

Infusing Real Content into Your Designs

Whether you’re using Sketch, Photoshop, or another design tool, it’s worth your time to explore ways of bringing real data or content into your static designs. On one side of the spectrum, this may simply mean having an understanding of what that data might be and putting together sample content that maps to it. On the other end, your tool of choice may support different plugins or have features baked in that allow you to infuse sample or live data into your designs.

Sketch

At Tack Mobile, we use a variety of tools for creating static designs and we’re always on the lookout for new methods that may benefit our process. As far as working with data and content, Sketch has some good options:

Short of using a tool, it’s always possible to manually input content that you and your team have decided best represents what might be expected in a production environment.

The data you have to work with can drastically affect the final design

While these plugins are useful, it’s easy to imagine how they might be taken further. Often we find ourselves creating multiple variations of the same screen and changing out content to see how the design holds up. Or, we may be designing for multiple languages and use a similar process. It’d be great to automate those types of explorations.

Working with static screens can help a lot to work through ideas. The next step for filling in some of the gaps is prototyping. There are a lot of methods and tools for assembling prototypes that meet different goals. Some make it really easy to work with data sources.

Prototyping Means Data, Too

As you move into the prototyping phase, there may be more options for working with live or sample data and content, especially while working in code. The data can also drive the creation of elements in your prototype, which can save a lot of time from redundantly creating each element individually. We often use Framer.js for prototyping, but these sources can apply to other approaches as well.

Framer.js

Local Data

One way to work with data is to refer to it locally. This can be a separate file constructed by hand, an exported set from another source, or embedded directly into your working files. Working with local data, it’s easy to go through quick cycles of modification and see how it affects the design.

Existing Data Services

If you have a specific set of data in mind that you want to work with, you want to explore some data services that are already available. For example, Dribbble, Random User, Instagram and many other products offer ways to access their data. You may even want to browse ProgrammableWeb API Repository to see if there’s something there you can use.

Google Sheets

Working with spreadsheets is something a lot of people are familiar with. With Google Sheets, you can share a table of data that you’re working on with others. As others make changes, you’ll be able to see those changes affect your design. You can also access and work with separate sheets within a Google Sheet. Check out this article to learn how you can use Google Sheets for prototyping.

Google Sheets for prototyping

Kimono

Why create a model for your data when one may already exist? Kimono makes it easy to create an API out of a web page. For example, if you want to represent a series of articles in your design, you can find another site that has a representation of that type of data and bring that into Kimono.

You can also use Kimono to grab data from your own services that already exist without having to deal with the overhead of connecting directly.

Parse

Take your prototypes to another level by enabling the ability to read and write data. Parse is a mobile platform that, among other things, supports the ability to create a data store. You can have a prototype that brings in a list of data records but also add the ability to create new ones as well.

There are already some great articles out there that walk through how to use Parse. Check out Using Parse to power up your Framer prototypes and Give your Framer prototypes a better memory for step-by-step walkthroughs.

Firebase

Recently acquired by Google, Firebase is basically a very powerful real-time data syncing solution. It uses a NoSQL-style schema-less strategy, which can give prototypers exactly what they need to prove out an idea.

Keep Firebase in mind when you’re prototyping project reaches the phase where multiple users may be involved at a time, or when you’re thinking about a data structure but haven’t landed yet. Not only that, but with Google scale behind it, Firebase can grow with your product well beyond the prototyping phase.

If you’re interested, you may want to check out this example posted to the Framer.js Facebook Group that uses Firebase, or this great video tutorial.

Production Services

You may want to try working directly with production services used by your project. It can also help ensure teams are working with the same data, so there are no surprises. Depending on the goals, this can be useful for design or hinder any exploration of new ideas.

Keep Content in Mind

In the future, as you’re designing your next great interface, think about how data and content plays a role. Do you have enough room to display what you want? What takes priority? How will you deal with a slow data connection? What does the interface look like before the data is loaded? Many of these questions can be answered the more you make an effort to bring data into your designs.

Image of paper bird courtesy Shutterstock.

(Why?)

Published at Tue, 06 Oct 2015 18:44:43 +0000

read more