background preloader

7 Rules for Creating Gorgeous UI (Part 1)

7 Rules for Creating Gorgeous UI (Part 1)
Introduction OK, first things first. This guide is not for everyone. Who is this guide for? Developers who want to be able to design their own good-looking UI in a pinch.UX designers who want their portfolio to look better than a Pentagon PowerPoint. Or UX designers who know they can sell an awesome UX better in a pretty UI package. 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. Let me tell you what you’ll find in this guide. First, I was a UX designer with no UI skills. My portfolio looked like crap, reflecting poorly on my work and thought processMy UX consulting clients would rather buy someone’s skills if their expertise extended to more than just sketching boxes and arrowsDid I want to work for an early-stage startup at some point? I had my excuses. “I majored in engineering — it’s almost a badge ofpride to build something that looks awful.” This article is not theory.

Related:  web designInterface DesignUser Experience

What can museum exhibit design teach us about UX design? As soon as you step foot in a museum exhibit, you’re faced with dozens of decisions: Read the wall of text that greets you at the entrance or dive right in? Walk through the room clockwise or counter-clockwise? Examine the label on each piece or just soak in the visual elements and skip the little details? So it should come as no surprise that museum-exhibit designers have been thinking about the user experience for hundreds of years. Whether you’re staring at a digital screen or a gallery wall, you’ll likely find yourself in the hands of a curator, a writer, and a visual designer, all teaming up to anticipate your every need—and the needs of thousands of visitors who may be nothing like you. Beverly Serrell has spent the better part of 40 years trying to make that challenge a little easier.

UX for Mobile: The Rise of Fat-Finger Design We already know that users are turning to mobile for all kinds of needs: from simple-search to shopping, to the use of financial apps. And we also know that mobile-friendly websites are better ranked. But at the beginning of 2018, Google announced the mobile-first indexing since a lot of user searches are made on a mobile device. An Introduction to Parallax Scrolling Using Stellar.js One of the most discussed web design trends of the last few years is the parallax scrolling effect. Whether you like it or not, it is used by a lot of websites. In this tutorial I’ll give you a brief introduction to parallax scrolling and show how we can reproduce it in a website using a jQuery plugin called Stellar.js. What’s Parallax Scrolling? Parallax scrolling involves the background moving at a different rate than the foreground, creating a 3D effect as you scroll down the page.

Design for Fingers, Touch, and People, Part 1 Capacitive Touch Now, in 2017, when someone talks about touchscreens, they mean capacitive touch. This is the type of touchscreen on all mobile phones, tablets, entertainment systems, cars, kiosks, and increasingly, other small devices that are currently in production.

Why some projects just go right Like many web designers, I have spent a lot of time worrying about why projects go wrong. Perhaps we should be asking what makes a project successful. Headscape recently launched a website for the RAF Benevolent Fund. Windows turns 30: a visual history The PC revolution started off life 30 years ago this week. Microsoft launched its first version of Windows on November 20th, 1985, to succeed MS-DOS. It was a huge milestone that paved the way for the modern versions of Windows we use today. While Windows 10 doesn’t look anything like Windows 1.0, it still has many of its original fundamentals like scroll bars, drop-down menus, icons, dialog boxes, and apps like Notepad and MS paint. Windows 1.0 also set the stage for the mouse.

Design for Fingers, Touch, and People, Part 2 Few people hold their phone with two hands and two thumbs on the screen. At least, they don’t usually hold their phone that way. But people shift their grip when typing, and 41% of users hold their phone with both hands and tap using their thumbs when typing. Summary

Yuna's Sandbox Get the latest version of jquery.traceit.js. traceit on GitHub Include the jquery.traceit.js script and it's dependencies jQuery (tested with jquery.js 1.10.2), Raphaël (tested with raphael.js 2.1.2) ) in your page. Or include jquery.traceit.min.js script and jquery.min.js. raphael_traceit.min.js is combined and minified raphael.js (v2.1.2) and jquery.traceit.js. The Rise and Fall of Everest (the App) At Product Hunt, we are so passionate about helping startups and makers launch their products and share them with the world. Much of our site is about beginnings — the moment a product launches, and the moment someone discovers something new that they love. But, we’re also big believers in reflecting on and learning from endings . Unfortunately, the endings aren’t talked about nearly enough — or as favorably — in the startup world. We were fortunate enough to have Everest Co-founder Katherine Krug share the story about the rise and fall of the beloved goal setting app.

Carousels on Mobile Devices On desktop, the carousel has always been a popular way to stick multiple pieces of content on the front page without taking up too much space. On mobile, carousels increased in popularity when the iPad was first introduced. (Original iPad designs were fascinated by the etched-screen aesthetic and wanted to control the layout in the tiniest detail. How to go beyond the basics with SVG filters Filter effects apply graphics operations such as blurs, lighting, colour transformations and distortions to content. Today's browsers implement three types of filters: CSS filters: a set of simple CSS properties like sepia() and contrast() that can be applied to any HTML content. SVG filters: combinations of graphics effects that can be applied to SVG content (and HTML content through a CSS filter cross-reference). DX filters are Microsoft's proprietary filter effects.

If you are an experienced designer, you probably agree that being inspired by others is not stealing in UI design. It’s best practice research. It’s using design patterns. It’s following the guidelines. It’s making sure to use patterns that your users are familiar with to create usable interfaces. 9 tips to improve user experience A designer is like an architect that builds a website’s foundation and makes it aesthetically pleasing for users. From the moment of a website concept’s birth, designers must consider user-friendliness and how each little element comes together in the eyes of the consumer. There are dozens of elements that play into the overall feel of a website for the end user, and user experience (UX) is impacted by all the parts—big and small. Around 88 percent of consumers state they’ve had a bad mobile experience on websites, and 30 percent won’t return to a site after a bad UX experience. Similarly, in a brick-and-mortar store, the user experience impacts the overall impression the customer has of your brand and whether they want to visit your store again. Clearly, user experience has a crucial impact on the success of your site or store, so it’s important to get it right.