What makes an icon a valuable addition to the interface, rather than a mere decorative element? Intuitiveness, aesthetic value, memorability, intercultural perception? While an effective icon would combine many of those characteristics, I’d like to focus on one measure–speed of recognition, or
OK, first things first. This guide is not for everyone. Who is this guide for? If you went to art school or consider yourself a UI designer already, you will likely find this guide some combination of a.) boring, b.) wrong, and c.) irritating. That’s fine. All your criticisms are right.
Clarity is the most important value of a well-designed user interface. Last time I blogged about pictograms. Let’s talk type today. Because even more than icons, a typeface can make or break clarity. On the surface, most of an app’s UI is exactly the type it’s set in.
I’m currently in the process of rolling out yet another Card UI. Since Pinterest, the end-state of every list view with decent imagery is to become a Card UI. But thar be dragons! I’m here to share some of the pitfalls Paravel have encountered building Card UIs over the years.
In mid-2011, Twitter rolled out the ability to natively tweet photos. 2013 brought media-forward timelines with inline photos. 2014 ushered in multi-photo tweets and animated GIF support.
Director Wes Anderson has always been distinguished for his visual artistry, detail-rich sets, and storybook-like imagery. From the whimsical, campy feel of Moonrise Kingdom to the carefully crafted sets and miniatures in The Grand Budapest Hotel, Anderson’s movies are visual masterpieces.
As someone who does work on both the development and design side of iOS apps I find that many designers struggle with the transition to UI work, or with the different processes involved in iPhone and iPad app design.
Though some decry flat user interfaces as pure fashion, or the obvious response to skeuomorphic trends, many designers have embraced the flat approach because the reduction in visual styling (such as gradients, drop shadows, and borders) creates interfaces that seem simpler and cleaner.
Admit it, at some point in your life, you were impressed by an optical illusion. It’s fascinating how our eyes play tricks on us, and it’s even more fascinating that we tend to side with our sight over our common sense.
Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web. Imagine a world where developers know everything there is to know about accessibility. You design it and they build it… perfectly.
We live in a world of data of different types. While mining the data a person might face with lots of troubles. The biggest one is poorly designed, overloaded with information dashboards that make it impossible to find needed data out there.
More than being creative, a good artist must also consider subtleties like composition, colors, size, what to include, and — perhaps more importantly — what to leave out. That’s no easy feat, which is why we hold the masters like da Vinci and Van Gogh in such high regard.
Wojtek Borowicz, Community Evangelist at Estimote, freelance writer, Internet of Things enthusiast. One of the greatest lies of software industry is the so-called intuitive interface.
As a direct response to platform capabilities, the first mobile sites were an exercise in ‘compromise’ rather than ‘craft’.
Good interaction design is driven by a human connection. But what drives human connection and how does that translate into a computerized interface? The answers to these questions aren’t so black-and-white.
“I said, ‘What is this?’ and they said, ‘We don’t know yet,’” Victor recalls. “It was an early prototype of the hardware. Maybe twenty other people in the world knew about it. Nobody had answers. My job was to try to figure it out.”
It happens about once or twice a year. I travel over to my mother’s house for a visit and, about two or three hours in, she says something like “Hey, can you take a look at my computer? I just want to make sure everything is okay with it. You know I don’t know what I’m doing.
Design is a rather broad and vague term. When someone says “I’m a designer,” it is not immediately clear what they actually do day to day. There are a number of different responsibilities encompassed by the umbrella term designer.
Communication plays a vital role in design. Whether you design websites, mobile apps, or wearable UIs, your creations have to clearly communicate their intent and purpose. And since text does a lot of the heavy lifting in communicating purpose, you need a solid understanding of typography.
Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that.
Interaction design is a very common term today, but many designers and developers still don’t know what exactly it means. Today we are going over some different aspects than the ones you are used to: we will jump into user interface and principles for designing great interaction on your website.
The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well.
On/off, left/right, up/down, start/stop the list goes on and on. We are naturally used to make these action based decisions on a daily basis. Presently, applications are used like a second nature and are mostly dictated by user interface.
Upgrade your inbox and get our editors’ picks twice a month. Designer Paul Rand once said, “An understanding of man’s intrinsic needs, and of the necessity to search for a climate in which those needs could be realized, is fundamental to the education of the designer.
This is the first of a three post series which explores the connection between the cinematic language used by filmmakers and the interactive language used by web creators in UI design and development.
Please share and spread the love.
We often explore new technologies to help us deliver the best experiences possible. The past year has seen a glut of new reactive frontend technologies like React, Polymer and Angular 2.0 enter developer consciousness.
From a motion design perspective, Facebook.com is phenomenally static. It’s purposefully dumbed down for the broadest levels of compatibility and user comfort. Facebook’s iOS apps, on the other hand, are fluid. They prioritize the design of motion; they feel like living, breathing apps.
Following up on the recent React component libraries and Angular component libraries lists for 2018, here are 11 popular and useful Vue.js component libraries to compete for your next Vue.JS application’s UI. Unlike React and Angular, Vue.
One of the best things about designers these days is that they are really open minded about sharing their knowledge and are very giving.
Friction refers to anything that prevents a user from accomplishing a goal. Friction weighs down interactions, making even the most well-designed interfaces a nightmare to use.
Mobile user experience design is maturing. One way to gauge this is to look at the tools at our disposal. Prototyping tools such as Balsamiq, Axure and Fireworks enable us to build wireframes and click-dummies, helping us to explain the targeted user experience.
Chris Bank of UXPin — the wireframing & prototyping app — compares and contrasts web UI and UX, explains why we sometimes default to building a UI, and how UI shapes UX. For analysis of examples from over 33 companies, feel free to check out Web UI Best Practices.
This article has been contributed by Saha William. User experience (UX) is the end result of User Interface design (UI)… If that’s what you wanted to hear, there you have it. Take it and leave it!
As creatures of habit, we humans behave predictably. We avoid interactions that make us feel bad, and seek out interactions that make us feel good.
There’s a quote by Tim Berners-Lee, Director of W3C and inventor of the World Wide Web, that says, “The power of the web is in its universality”. As people who make a living by making websites, it’s our responsibility to ensure everyone has access to them.
Upgrade your inbox and get our editors’ picks twice a month. Some websites outperform others, whether in their content, usability, design, features, etc. Details of interaction design and animation make a fundamental difference on modern websites.
We are back with an inspiring selection of User Interface elements such as music widgets, calendars, slideshows, and more.
Since it was purpose-built for web and mobile design, it’s no surprise that Sketch is one of the fastest and most versatile tools for designing prototypes. And these 10 tips make it even more powerful. Okay, so this has nothing to do with Sketch.
I will talk about a few interaction design concepts and best practices that when applied will result in the creation of great UIs. What is a good user interface? As you read through the following ideas, you will see two reoccurring themes: Ease of use and simplicity.
You pause at the gate and glance around to quickly survey your surroundings. You observe which direction most people seem to be walking in and start heading in that direction.
Planning and wireframing your mobile website or application is an essential part of a successful design process. It can help save you money (on design and development costs), expand initial ideas, build structure and functionality and effectively gather invaluable early feedback.
No matter how interactive or dynamic, our digital experiences are limited by a constraint so fundamental that we barely think about it: the screen.
Click the orange button to pop-up a window where you can edit and confirm the tweet, then the download button will be activated Keynotopia Mockup Templates enable you to sketch user interfaces using Apple Keynote or Microsoft PowerPoint, without having to draw each component by hand! All compo
The design team sits down to share the first round of mockups for a new client’s application. As the team members present their ideas, it becomes clear that everyone has distinctly different ideas about what the app is and how it should function.
UX has become a neologism. When something has “good UX” it is an implied meaning of having the core components of UX (research, maybe a persona, IA, interaction, interface, etc etc…). It’s not really necessary or desirable to tack the word design onto the end anymore.
Websites and Web applications have become progressively more complex as our industry’s technologies and methodologies advance. What used to be a one-way static medium has evolved into a very rich and interactive experience. [Links checked & repaired March/03/2017]
Imagine a website with a beautiful, enticing, full-screen image, where a transparent button leads to pages of well constructed, adaptive content. The navigation functions perfectly across devices, switching from a horizontal to a mobile menu at just the right times.
We’ve noticed something funny at Designlab over the past few months. The web/mobile design industry, for a variety of reasons, is particularly tricky to break into if you don’t already have a deep background in the field.
Designers of mobile interfaces are becoming more prominent in today’s faced-paced web space. While mobile-optimized sites may lighten the burden on a site developer, some prefer building a full featured app instead.
Gestural user interfaces may be the future, but we’re not quite comfortable with them yet—as users or designers. Their tactile simplicity makes them efficient once you get the hang of them, but their affordance-less, "pictures under glass" nature can make them inscrutable to first-time users.
X’s are everywhere in user interface (UI) design. A powerful symbol, [x] is capable of closing windows and popups, toolbars and tabs and anything else that might otherwise be cluttering up your screen.
It was only 2011 when all major browsers officially recognized CSS animation, and even now it requires browser prefixes to work everywhere. In large part, the push for CSS-driven animation was sparked by the death of Flash, where “movement was common” is an understatement.
Upgrade your inbox and get our editors’ picks twice a month. As UI designers, we’re always interested in learning, reading user research, understanding best practices and keeping up to date on all the latest approaches and tactics for building websites and applications.
Contrary to what you may read, peppering your form with nice buttons, color and typography and plenty of jQuery plugins will not make it usable. Indeed, in doing so, you would be addressing (in an unstructured way) only one third of what constitutes form usability.
How robust is your user experience design process? We all have our favored methods and techniques, but the general process is similar: Conduct research, prototype, then present to stakeholders and users.
We’ve now conducted 6 rounds of usability studies with tablet users. The good news is that tablet usability is reasonably solid and has improved substantially since the initial batch of whacky iPad apps, which often totally confused users.
Users should never be thinking about an interface while they’re using it; instead the interface should be unobtrusive and functional. There shouldn’t be any decoration when efficiency is the focus. Everyone is familiar with a web form.
As a UI designer, I do my best work within the bounds of a clear hierarchy of constraints. Because typography is the catalyst for my design work, the most important step I take at the beginning of a project is to select a typeface (or a set of them).
Many confuse UX with UI, but they are not the same. They are part of the same circle, but not the same side. This shirt represents the differences through iconography.
Even with iOS clearly in second place behind Android, the Apple standard size for touch targets sticks with us, but 44 pixels is not a physical size.
The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you can see how popular these trends have become in recent months.
Working on a large project often requires you to design wireframes to communicate complex ideas before spending countless hours polishing. There are many tools for wireframing ranging from the simplistic Balsamiq to the highly collaborative Axure, which costs a fortune.
Originally published as: Gentner, D., and Nielsen, J.: The Anti-Mac interface, 39, 8 (August 1996), 70-82.
Upgrade your inbox and get our editors’ picks twice a month. There’s a false belief in the web development community that CSS animation is the only performant way to animate on the web.
Clear, Rise and Solar are three examples of a trend of “gesture driven” apps with a flat UI. These are novelty apps for people lusting for the very latest in app design. Besides using a more flat UI style, which is a topic for a different discussion, all apps contain non-standard interactions.
We’ve noticed something funny at Designlab over the past few months. The web/mobile design industry, for a variety of reasons, is particularly tricky to break into if you don’t already have a deep background in the field.
In this article, Chris Bank of UXPin – The UX Design App details many of the best UI design patterns that have cropped up in modern web sites and mobile apps recently, and examples of how they’re used in popular web and mobile products.
In this article, Chris Bank of UXPin — the wireframing & prototyping app — explains the theory and practice of creating visual hierarchies in web UI design. For analysis of UI examples from over 33 companies, check out the free ebook Web UI Best Practices.
Big companies are always trying to simplify the support and development of their large product portfolios. Mail.
In a few rare instances, we find that it is acceptable to override the standard UI components provided natively by browsers and instead implement custom UI components. During our usability tests, we generally find the default native UI components to be very user-friendly.
In their rush to build more features into their electronic devices, companies often lose sight of a key ingredient: basic usability.
After spending hours online at different websites, you tend to pick up discernable trends in design. Over the years I have written about changing trends, particularly in the field of website layouts and webapps.
Pointing and clicking? That seems like an awful lot of work … The ease and functionality of mobile devices is shifting the way we think about interactivity.
User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing the project.
Animation has become an increasingly important part of the UI design experience across many different applications. There are core considerations of great UX, visual design and functionality, but animation and the way things move is now a key pillar of any mobile, web or software app.
In addition to conveying brand personality through color and style, icons must first and foremost communicate meaning in a graphical user interface. Icons are, by definition, a visual representation of an object, action, or idea.
iOS 7 has brought with it an array of changes in the realm of Graphic UI in introducing things like: borderless buttons, a full screen layout for better viewing of controllers, translucent bar not to mention the changes made to the grid system and other dimensions of its icons.
The field of UX is daunting without the right guidance. So many subjective questions pop up on a daily basis.
It’s time to set things straight once and for all, since (semantics aside) the difference between a wireframe and a prototype is actually quite substantial. Editor’s note: This is an article by Marcin Treder, CEO of UXPin.
There are so many great examples of UI design on the web that some may think it's easy to create an attractive, easy to use interface. But as any web designer worth their salt will know, it's anything but. In fact, it's often the biggest challenge facing any web design project.
The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire webapps using only HTML5 and CSS3. Coupled with many JavaScript libraries the possibilities for mobile development are endless.
Dashboard design. Is it easy? Far from it. Great dashboard UI designs are developed daily to remind us of the unlimited possibilities we have to present data in a creative way.
The appearance and usability of certain interface elements and functionality are crucial to the success any websites in today’s market.
Not too long ago, Google introduced Material Design, a brand new set of guidelines for designers and developers alike. Material Design introduces a fresh perspective on user interfaces, motion, and interaction states, and are a great foundation for you to build a product upon.
Flat design is the most popular trend in UI design right now. I believe that a few prominent flat designs sacrifice usability and best practices such as consistency for the sake of aesthetics — and this is what I’ll primarily be talking about.
Style guide driven development offers a hugely flexible approach to modern web design. In this tutorial I'll walk you through designing a UI (user interface) kit, whilst also explaining the decision-making that will keep our UI kit consistent and reusable.
Even long-term users of a computer system usually know and use only a tiny fraction of its available commands and features. If the design has good usability, people learn a core set of features fairly easily during their early days of system use. And then they stagnate and don't get much better.
We take a look at the lesser discussed subject of admin dashboard design trends with examples from quality UI designers. Most web dashboards are pre-built into CMS engines from WordPress to Drupal.
Please share and spread the love.