recentpopularlog in

garrettc : userinterface   340

« earlier  
Soviet Control Rooms
A collection of Soviet control rooms. Power stations, control towers etc.
history  design  engineering  userinterface  russia  inspiration 
10 weeks ago by garrettc
The Environmentally-Lit Interface: A Quantum Leap Forward
"An environmentally-lit interface takes information from the environment around the device and uses it to render physically-accurate things on the screen. It appears as if the lights around you are shining on the things on the screen. If the lighting in your room is bright, then the things on your screen are brightly lit."
design  userinterface  ios  environment  sensors 
january 2019 by garrettc
Accessible SVG Icons with Inline Sprites
"At a certain stage in a project, someone always says: ‘We need icons!' We need to ensure that people who can’t see or recognize these icons can understand their purpose."
accessibility  svg  userinterface  userexperience  webdevelopment 
december 2018 by garrettc
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
"CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started."
webdesign  webdevelopment  svg  design  css  userinterface 
december 2018 by garrettc
A science-fiction-inspired desktop UI for your Lin/Win/Mac system
A science-fiction-inspired desktop UI for your Lin/Win/Mac system
scifi  tron  userinterface  macos  linux  windows 
november 2018 by garrettc
Animated Grid Previews
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
animation  art  webdesign  grid  userinterface 
november 2018 by garrettc
Creating sliding effects using sticky positioning
"Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!"
css  webdesign  userinterface  sticky  scrolling 
september 2018 by garrettc
HomeKit Weekly: Nanoleaf Remote is the most capable (and colorful) controller
HomeKit Weekly is a series focused on smart home accessories, automation tips and tricks, and everything to do with Apple’s smart home framework. This week HomeKit Weekly returns to check out the l…
apple  nanoleaf  home  homekit  userinterface  design  interiordesign  lighting 
august 2018 by garrettc
Solved with CSS! Dropdown Menus | CSS-Tricks
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.
css  webdesign  navigation  userinterface  webdevelopment 
august 2018 by garrettc
Below the Surface - Archeologische vondsten Noord/Zuidlijn Amsterdam
"Amsterdam drained a canal and put everything they found online, piece by piece, chronologically."
amsterdam  collection  history  museum  userinterface  inspiration  science 
july 2018 by garrettc
Easing Functions Cheat Sheet
Make animations more realistic by picking the right easing function.
animation  reference  css  javascript  programming  userinterface 
june 2018 by garrettc
The Hidden Cost of Touchscreens
"Serious interfaces — those that are repeatedly used by a knowledgeable professional and/or in potentially hazardous situations, should not be touchscreen based. If a touchscreen must be used, it should be embedded alongside a set of fixed, physical buttons that support muscle memory and single actions."
userinterface  designthinking  userexperience  analog  car  automotive  physicalinterface  interface 
may 2018 by garrettc
The Illusion of Control in Web Design
"We think of our job as controlling the user’s experience. But the reality is, we control far less than we imagine."
accessibility  userexperience  webdevelopment  webdesign  userinterface  worldwideweb  networking  offlinefirst  responsivedesign 
may 2018 by garrettc
Page Transitions for Everyone
"If we take a look at how mobile apps are designed today, there is very often some sort of animated transition between states. Even ready-to-use native components have some kind of simple animation between states. Developers and designers realized that this little animation helps a user grasp what is happening in the app. It makes the navigation through the app easier and tells the user where they are going within the app."
javascript  css  webdesign  webdevelopment  animation  userexperience  userinterface 
may 2018 by garrettc
Native-Like Animations for Page Transitions on the Web
"Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not.

[…]

We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in."
animation  css  vuejs  programming  webdevelopment  userinterface  userexperience  learning 
april 2018 by garrettc
Pitfalls of Card UIs
An optimistic design choice that ends up compounding complexity
cards  userinterface  webdesign  userexperience  webdevelopment  cardui 
april 2018 by garrettc
pix2code: Generating Code from a Graphical User Interface Screenshot
"Transforming a graphical user interface screenshot created by a designer into computer code is a typical task conducted by a developer in order to build customized software, websites, and mobile applications. In this paper, we show that deep learning methods can be leveraged to train a model end-to-end to automatically generate code from a single input image with over 77% of accuracy for three different platforms (i.e. iOS, Android and web-based technologies)."
userinterface  machinelearning  deeplearning  automation  webdesign  appdesign  userexperience  research 
april 2018 by garrettc
Tippy.js
A lightweight, vanilla JavaScript tooltip library
javascript  library  tooltips  userinterface  webdevelopment  webdesign 
march 2018 by garrettc
CSS Grid for UI Layouts
"CSS Grid is a great layout tool for content-driven websites that include long passages of text, and it has tremendous value for a variety of traditional UI layouts as well. In this article I’ll show you how to use CSS Grid to improve application layouts that need to respond and adapt to user interactions and changing conditions, and always have your panels scroll properly."
css  grid  layout  userinterface  webdesign  webdevelopment  appdesign 
february 2018 by garrettc
Direction Aware Hover Effects
"This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here."
animation  css  javascript  webdesign  webdevelopment  userinterface 
february 2018 by garrettc
The King vs. Pawn Game of UI Design
"If you want to improve your UI design skills, have you tried looking at chess? I know it sounds contrived, but hear me out. I’m going to take a concept from chess and use it to build a toolkit of UI design strategies. By the end, we’ll have covered color, typography, lighting and shadows, and more. But it all starts with rooks and pawns."
webdevelopment  webdesign  userinterface  designthinking 
january 2018 by garrettc
Laws of UX
Laws of UX is a collection of the key maxims that designers must consider when building user interfaces.
design  principles  reference  userinterface  userexperience  webdevelopment  webdesign  appdevelopment  designthinking 
january 2018 by garrettc
A shorthand for designing UI flows
Flows are just as important to good interfaces as individual screens are. Customers don’t land on screens from out of nowhere. Specific sequences of actions lead customers through your app as they try to accomplish their tasks. But as important as they are, flows are hard to communicate du…
webdesign  appdesign  userjourney  userexperience  diagram  mapping  prototype  methodology  userinterface 
january 2018 by garrettc
An Introduction to Scrollama.js
The what, why, and how to use scrollama.js for your next scrollytelling story.
javascript  webdesign  webdevelopment  storytelling  scrolling  scrollytelling  userinterface  interactive 
november 2017 by garrettc
Ultimate guide to table UI patterns
Tables show structured data and their purpose is to make that data readable, scannable and easily comparable.
webdesign  webdevelopment  data  userinterface  userexperience  table 
september 2017 by garrettc
Flat UI Elements Attract Less Attention and Cause Uncertainty
In an eyetracking experiment comparing different clickability clues, weak and flat signifiers required more user effort than strong ones.
research  usability  userexperience  webdesign  userinterface 
september 2017 by garrettc
Designing The Perfect Accordion
How do you design the perfect accordion? The choice and position of the icon matters, and so does interaction designs. A detailed run-down.
webdesign  webdevelopment  userinterface  accordian 
june 2017 by garrettc
It's only words
" The self service checkouts at my local Sainsbury’s recently got a refreshed user interface. Oooo, a new thing to play with. Oooo, how have they improved? Oooo, a new thing to pull part."
userexperience  supermarket  shopping  userinterface  copywriting 
june 2017 by garrettc
Thoughts on the UX of Bots
In the course of her research, Anne Cathrine Saarem asked me to answer several questions about user perceptions and interactions with bots. Here are my extended responses.
userexperience  userinterface  chat  chatui  chatbot  machinelearning  artificialintelligence 
june 2017 by garrettc
How Technology is Hijacking Your Mind — from a Former Insider
"I’m an expert on how technology hijacks our psychological vulnerabilities. That’s why I spent the last three years as a Design Ethicist at Google caring about how to design things in a way that defends a billion people’s minds from getting hijacked."
psychology  ethics  userexperience  society  userinterface  usercentereddesign 
june 2017 by garrettc
macOS Human Interface Guidelines
Introduces the Mac user experience and explains how to design a great macOS app.
design  guide  userinterface  apple  osx  macos  reference 
may 2017 by garrettc
Best Practices for Horizontal Lists in Mobile
Many Android and iOS apps have horizontal scrolling lists. Maybe it’s also combined inside a vertical list. But is it necessary? Even assuming it is, are you doing it right?
medium  article  css  html  userinterface  pamoja  webdesign  webdevelopment  appdevelopment 
may 2017 by garrettc
The truth about button color on websites (according to NASA and eye tracking)
Learn how to choose the right button color on your website to improve UX and conversion rates.
colour  design  webdesign  userinterface  buttons  luminosity  accessibility 
may 2017 by garrettc
Your vs. My
"Labeling stuff with “My” imitates the point of view of the user. It is as if the user has printed out labels and stuck them to various objects: My Lunch, My Desk, My Red Stapler. Except the user hasn’t done this, you (the site) did it for them.

Labeling stuff with “Your” instead reinforced the conversational dialogue. It is how another human being might address you when talking about your stuff. Even with MySpace, people say things like “I saw what you put on your MySpace."
copywriting  userinterface  userexperience  webdesign  socialsoftware 
april 2017 by garrettc
Calm Technology
Our world is made of information that competes for our attention. What is necessary? What is not? When we design products, we aim to choose the best position for user interface components, placing the most important ones in the most accessible places on the screen.

Equally important is the design of communication. How many are notifications are necessary? How and when should they be displayed? To answer this, we can be inspired by the principles of calm technology.
webdesign  webdevelopment  appdevelopment  userexperience  userinterface  designthinking  pamoja 
february 2017 by garrettc
Material Design and the Mystery Meat Navigation Problem
"Bottom navigation bars are a better alternative to the hamburger menu, so their addition into Material Design should be good news. But Google’s version of bottom navigation bars has a serious problem: mystery meat navigation."
userexperience  userinterface  pamoja  materialdesign  google  navigation  appdevelopment  webdevelopment  designthinking 
february 2017 by garrettc
Making input type=date complicated
"Everyone who’s ever messed around with dates knows that they are terribly user-hostile — not only for software developers, but also for users. True, users will be able to tell you their date of birth or today’s date without trouble, but ask them to fill them out in a web form and they will encounter problems."
userinterface  webdevelopment  date  input  forms 
january 2017 by garrettc
Why cards are the future of the web
Cards are fast becoming the best design pattern for mobile devices as the internet moves from pages & destinations to aggregated personal experiences.
cards  cardui  userinterface  userexperience  webdesign  webdevelopment 
january 2017 by garrettc
Buttons in Design Systems
"I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later."
designsystems  designthinking  patternlibrary  buttons  webdesign  userinterface  webdevelopment 
january 2017 by garrettc
Buttons in Design Systems
"…Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later."
designsystems  designthinking  patternlibrary  buttons  userinterface  webdesign  webdevelopment 
january 2017 by garrettc
The Ultimate Guide to Chatbots: Why they’re disrupting UX and best practices for building
"The incredible potential of chatbots lies in the ability to individually and contextually communicate one-to-many."
chat  bot  chatui  userinterface  bestpractice 
january 2017 by garrettc
The Ultimate Guide to Chatbots: Why they’re disrupting UX and best practices for building
"The incredible potential of chatbots lies in the ability to individually and contextually communicate one-to-many."
bot  communication  userexperience  chat  chatbot  userinterface 
december 2016 by garrettc
Figma: the collaborative interface design tool.
Figma is the first interface design tool with real-time collaboration. It keeps everyone on the same page. Focus on the work instead of fighting your tools.
collaboration  design  tool  webdesign  userinterface 
december 2016 by garrettc
Using Card-Based Design To Enhance UX
Web and mobile apps move away from pages, towards completely personalized experiences. And this experience built on an aggregation of many individual pieces of content.
userexperience  webdesign  userinterface  cards 
november 2016 by garrettc
Tilt Hover Effects
Some ideas for hover effects with a fancy tilt effect. They add a nice subtle depth to the UI.
animation  css  demo  webdesign  userinterface 
november 2016 by garrettc
Smashing Magazine
What do cards mean to UI designers? Not only do they look like real-world tangible cards in user interfaces, they are also full of inclusive images and text that serve as entry points to more detailed information.
design  webdesign  designthinking  webdevelopment  userinterface  userexperience  cardui 
november 2016 by garrettc
The Complete Beginner’s Guide To Chatbots
"What are chatbots? Why are they such a big opportunity? How do they work? How can I build one?"
chat  bot  chatbot  designthinking  technology  userinterface 
november 2016 by garrettc
Information Cartography: Creating Zoomable, Large-Scale Maps of Information
"In an era of information overload, many people struggle to make sense of complex stories, such as presidential elections or economic reforms. We propose a methodology for creating structured summaries of information, which we call zoomable metro maps. Just as cartographic maps have been relied upon for centuries to help us understand our surroundings, metro maps can help us understand the information landscape."
data  visualisation  maps  userexperience  userinterface  research  pdf  pamoja 
november 2016 by garrettc
macOS HIG: Touch Bar
Apple Human Interface Guidelines for the new Touch Bar input device.
apple  macos  osx  touchbar  userinterface  pamoja  touchscreen  userexperience 
october 2016 by garrettc
A new Isotoma Whitepaper: Chatbots
"Over the last six months we’ve had a lot of interest from customers in the emerging area of chatbots, particularly ones using Facebook Messenger as a platform.

While bots have been around, in some form or other, for a very long time the Facebook Messenger platform has catapulted them into prominence. Access to one billion of the world’s consumers is a tempting prospect for many businesses.

We’ve reviewed the ecosystem that is emerging around chatbots and provide a guide to some of the factors you should consider if you are thinking about building and deploying chatbots, in our new whitepaper."
whitepaper  chat  chatbot  userinterface  pamoja 
october 2016 by garrettc
Being Smart with Sound
UI Sound has the ability to instantly draw your attention, or simply add a subtle layer of information to a UI interaction - either alerting you to something important,...
audio  sound  design  userinterface 
september 2016 by garrettc
I Wanted to Type a Number
How to call the correct keyboard on mobile devices
userinterface  userexperience  ios  android  keyboard 
august 2016 by garrettc
Conducting an Interface Inventory
"An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website or app."
webdevelopment  userinterface  usercentereddesign  designsystems  designthinking 
august 2016 by garrettc
How to Help Customers Find What they Need On Your Site
"On-site searching is a great way to help users wade through a site that is brimming with content. It filters out what is not relevant to the user and drives them to exactly what they are looking for and, when done right, directs them to act within the goals of the site."
filter  userexperience  userinterface  search  webdesign  webdevelopment 
august 2016 by garrettc
More Chinese Mobile UI Trends
Another look through mobile UI design patterns in the Middle Kingdom.
china  mobile  mobileweb  app  userinterface  search 
april 2016 by garrettc
Words of welcome
"For a while now, The Session has had some little on-boarding touches to make sure that new members are eased into the culture of this traditional Irish music community."
userinterface  userexperience  copywriting  onboarding 
january 2016 by garrettc
In defence of the hamburger menu
Andy Budd's well argued defence of the hamburger menu. I like the comparison to the VCR/media player pause button, and how that is "…learnable (once you’ve pressed in once you know what it does), memorable (the icon is simple and easy to recall) and produced low error rates (if you accidentally press it you can easily recover with little negative effect)."
webdesign  userinterface  userexperience  mobileweb 
january 2016 by garrettc
OK Computer: how to work with automation and AI on the web
"Automated systems powered by new breakthroughs in Artificial Intelligence will soon begin to have an impact on the web industry. People working on the web will have to learn new design disciplines and tools to stay relevant. Based on the talk “OK Computer” that I gave at a number of conferences in Autumn 2015."
artificialintelligence  data  science  userinterface 
november 2015 by garrettc
100 Days UI
100 Days of UI is a challenge and a collection of UI elements created by designer Paul Flavius Nechita.
userinterface  webdevelopment  webdesign  internetofthings 
november 2015 by garrettc
How to fix a bad user interface
Nice article and visualisation of the different states a UI can find itself in.
webdesign  webdevelopment  userinterface 
october 2015 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read