Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Posts Tagged ‘UI’.

We are pleased to present below all posts tagged with ‘UI’.

Retrofitting Zooming UI To Legacy Websites: An Impossible Task?

It’s well known that, in the ’80s, Microsoft and Apple made the graphical user interface (GUI), the dominant interface on desktop computers. What’s less known is that the GUI, whose navigation is based on pages and links, is not the only possible interface. And we know that finding our way in a modern GUI, whether for a website or application, is not always easy.

Retrofitting ZUIs To Legacy Websites: An Impossible Task?

One problem is of design, meaning that an interface could simply be poorly designed. But a different problem may very well be the way our brains are wired; even well-designed interfaces can be difficult to navigate and use.

Read more...

Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

Design patterns often have a bad reputation. They are often considered to be quick, lazy, off-the-shelf solutions that are applied blindly without consideration of the context of a problem. Solutions such as the almighty off-canvas navigation, the floating label pattern or carousels for featured products are some of the prominent ones.

Smart Responsive Design Patterns, Or When Off-Canvas Isn't Good Enough

This article isn’t about these patterns, though. This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction. Please note that this article isn’t technical; it explores interesting UX patterns out in the wild, rather than code samples. Beware: You will not be able to unsee what you are about to see, and that’s probably a good thing.

Read more...

Quick Tips Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules

CodePen has become the playground for developers. The sandbox where you can build whatever your imagination fancies. Practical things, experimental concepts — it’s a treasure chest, bound to fuel your ideas.

Flappy dialog

For this Quick Tip, we have done some digging around and found some interesting UI demos and concepts for you to indulge in and build upon: dialog and modal windows, signup and login screens, navigation and menus, sliders and toggles. Small bits of delight that make the user’s interaction with a website or app more pleasant. Enjoy!

Read more...

Approaches For Multiplatform UI Design Adaptation: A Case Study

There is no winner in the battle between iOS and Android, and we all know that. If a product succeeds on one platform, it will undoubtedly be ported to the other. Sometimes app developers don’t even bother waiting, and release apps for both platforms simultaneously. For designers this means only one thing — they will have to adapt an application’s UI and UX to another platform while ensuring a consistent design language across the product.

Three Approaches For Multiplatform UI Design Adaptation: A Case Study

There are three different scenarios for UI multiplatform adaptation: retaining brand consistency; aligning with the conventions specific to the platform; and seeking a balance between the two. We decided to analyze these three approaches by looking at the most popular apps out there so that you get some insight into what method might work best for you.

Read more...

Sketching For Better Mobile Experiences

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.

Sketching For Better Mobile Experiences

Cross-browser frameworks such as PhoneGap, Zurb Foundation and jQuery Mobile help us to create prototypes using the native languages of the Web: HTML, CSS and JavaScript. We seem to be in a better position than ever to design great experiences in virtually no time.

Read more...

Mastering Real-World Constraints (A Case Study)

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.

A Case Study For Short-Term Improvement With Real-World Constraints

One of the most exciting concepts we’ve started to apply to our thinking is the mobile-first approach, famously pioneered by designer Luke Wroblewski on his blog and then in his subsequent book. Generally, this approach provides a healthy way to gain focus, cut the fat and get to the heart of what’s important — for both content and interaction.

Read more...

Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

People are increasingly using their smartphones as a replacement for desktop computers, even for activities such as shopping and purchasing. And as more people move away from the desktop and onto mobile-optimized websites to shop for products and services, website creators can use established design patterns to help kickstart a mobile e-commerce project.

Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

Having a good mobile e-commerce experience matters a lot. In fact, recent research has found that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.

Read more...

Designing With Sensors Creating An Adaptive System To Enhance UX

In computer science, the term “adaptive system” refers to a process in which an interactive system adapts its behavior to individual users based on information acquired about its user(s), the context of use and its environment.

Creating An Adaptive System To Enhance UX

Although adaptive systems have been long-discussed in academia and have been an aspiration for computer scientists and researchers, there has never been a better time than today to realize the potential of what future interaction with computer systems will be like.

Read more...

Adding A Personal Touch To Your Web Design

The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications.

Freehand Style In Web Design: Adding A Personal Touch

Yet, Web professionals have made it their calling to tame the “wild” Web and turn it into an accessible, user-friendly and, most of all, personal medium. Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.

Read more...

↑ Back to top