recentpopularlog in

piperh : ui   62

Free HTML Website Templates and HTML UI Kits - HTMLTEMPLATES.CO
a collection of free websites and kits. Lots of them seem to be based on Bootstrap.
webdesign  web  design  template  free  bootstrap  html  ecommerce  ui  kit  resources 
9 weeks ago by piperh
Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need · An A List Apart Article
Leave interface features at browser default. Obvious when you think about it but good to be reminded - don't be tempted by designer vanity, think always of the user
webdesign  web  design  interface  accessibility  accessible  user  ui  ux 
10 weeks ago by piperh
Wired Elements
A set of common UI elements with a hand-drawn, sketchy look. Can be used for wireframes, mockups, or just a fun hand-drawn look.
A bit feeble, but possibly handy someday
webdesign  web  design  components  sketches  elements  hand-drawn  ui  wireframe 
november 2018 by piperh
UI Movement - The best UI design inspiration, every day
UI effects, free. Interesting page loading effects and loads of other components and layouts
webdesign  web  design  ux  ui  inspiration  code  loading  effects  page  animations 
november 2018 by piperh
The ultimate guide to proper use of animation in UX
some principles to keep in mind when animating elements in web design. Useful advice and ideas about animation speed.
webdesign  web  design  animation  timing  speed  principles  movement  advice  tips  ui  ux 
september 2018 by piperh
Complete Guide to CSS Scroll Snap
intro says: The introduction of CSS scroll snap has made creation of carousels like this a lot easier. Scroll snap can also be used to easily create landing pages which snap to each section when scrolling.
Demo doesn't seem to snap - css unsupported in my browsers.
webdesign  web  design  scroll  snap  ui  css 
september 2018 by piperh
Create your design system, part 6: Buttons – CodyHouse – Medium
article on styling buttons and conveying meaning. Fairly detailed code examples. Uses BEM. Maybe will part of a design system and a framework
webdesign  web  design  css  buttons  btn  components  ui 
september 2018 by piperh
Principle - Animated Design
they say: Principle makes it easy to design animated and interactive user interfaces.
$129 app for Mac, for creating animated interactions and flows
webdesign  web  design  animate  animated  interaction  flow  ui  effect  app  mac  tool  animation 
september 2018 by piperh
Best Practices For Mobile Form Design — Smashing Magazine
about form design for mobile. Some concept stuff about psychology of form filling and abandonment, and also practical tips and advice on construction and functioning
webdesign  web  design  ui  form  field  mobile 
september 2018 by piperh
Designing for accessibility is not that hard – UX Collective
Seven easy-to-implement guidelines to design a more accessible web
webdesign  web  design  accessible  accessibility  ui  ux  usability 
july 2018 by piperh
Accessibility at a Glance - YouTube
Series on videos by Microsoft about accessibility in website design
webdesign  web  design  accessible  accessibility  ui  ux  usability 
july 2018 by piperh
UI composition & animation in pure HTML | layerJS
interesting library for constructing pages and transitions, using frames and layers
webdesign  web  design  transition  js  javascript  script  frame  layer  effect  animation  animate  ui  ux  pattern  library 
july 2018 by piperh
10 Small Design Mistakes We Still Make – UX Planet
Some nice reminders about usability and user interaction and interface. This affects design
webdesign  web  design  graphic  interface  usability  user  friendly  interact  interaction  use  ux  ui 
july 2018 by piperh
Which accessibility testing tool should you use? – Pulsar – Medium
evaluates a number of different accessibility testing tools and extensions
webdesign  web  design  accessible  accessibility  ui  ux  tools  test  testing  extensions 
may 2018 by piperh
Managing SVG Interaction With The Pointer Events Property — Smashing Magazine
about using pointer-events (the svg property) to control where clicks matter and where not
webdesign  web  design  pointer  events  click  touch  svg  ux  ui  effect 
may 2018 by piperh
Writing Accessible Web Content | Sparkbox | Web Design and Development
general advice and tips about accessibility. A useful read from a sighted designer who started from scratch, with screen reader and closed eyes
webdesign  web  design  accessible  accessibility  ux  ui 
may 2018 by piperh
Origami Studio — Design Prototyping
an interaction design app from facebook, for Mac. Free
graphic  webdesign  web  design  origami  facebook  app  software  mac  ios  android  animate  animation  ui  ux  effect  tool 
may 2018 by piperh
Creating Usability with Motion: The UX in Motion Manifesto
article about using animation in ui - when it's useful and when not. Not about coding.
webdesign  web  design  ui  ux  usability  animation  motion 
april 2018 by piperh
Design Better Forms – UX Collective
Tips for design of forms and form elements
webdesign  web  design  form  forms  ux  ui  tips 
april 2018 by piperh
Micron.js - Webkul
micro animations for click interactions. Requires js lib. Possibly useful for quick gimmick but a bit naff and adds bloat
webdesign  web  design  js  javascript  script  css  animation  micro  library  ui 
april 2018 by piperh
My Accessibility Journey: What I’ve Learned So Far · An A List Apart Article
article about accessibility, mostly opinion and the why, but has good list of resources at the end
webdesign  web  design  accessible  accessibility  about  resource  ux  ui 
february 2018 by piperh
What are Affordances? | Interaction Design Foundation
article about an object's properties and possible interactions / user expectations
webdesign  web  design  graphic  ui  user  experience  ux  affordance  action  interaction 
november 2017 by piperh
Designing The Perfect Accordion – Smashing Magazine
detailed look at design for expanding accordion menus and items, especially (I think) on mobile
webdesign  web  design  accordion  menu  expand  collapse  expanding  collapsing  slideout  ui  ux  show  hide  toggle 
june 2017 by piperh
Semantic UI
they say: Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Looks interesting - some ready-built js for things like accordion
webdesign  web  design  framework  structure  development  theme  ui  code  coding  html  css 
may 2017 by piperh
Which Responsive Design Framework Is Best? Of Course, It Depends. – Smashing Magazine
comparison of a few popular responsive web design frameworks, ie, foundation, bootstrap and uikit
webdesign  web  design  framework  grid  template  bootstrap  foundation  ui  development  construction 
march 2017 by piperh
Great Alternatives to Hamburger Menus
article suggesting alternative navigation methods
webdesign  web  design  navigation  hamburger  menu  ui  ux  interface 
february 2017 by piperh
they say: A set of UI interactions, effects and utilities components library
webdesign  web  design  js  javascript  script  flick  visible  scroll  ui  interaction  effect  component  library 
january 2017 by piperh
12 timeless UI patterns analyzed
collection of different ui design decisions for the basic layout of page/site. Useful if you're at the very beginning design stage and want stimulation around the possible solutions
webdesign  web  design  graphic  layout  grid  ui  presentation  basic  user  interface  pattern 
december 2016 by piperh
Ten Requirements For Making Home Page Carousels Work For End Users (If Needed) – Smashing Magazine
article about the desirable properties of a home page carousel for desktop and mobile based on Baymard Institute testing. Especially interesting is the amazon 'table of contents' carousel
webdesign  web  design  carousel  slideshow  image  marketing  home  page  ui  interface  usability 
july 2016 by piperh
javascript - Prefered Alternative to OnMouseOver for touch - Stack Overflow
explanation of equivalence of click events, touch and hover, between mouse ui and touchscreen.
webdesign  web  design  click  hover  touch  touchscreen  equivalent  equivalence  mouse  ui  js  javascript 
july 2016 by piperh
a css framework with minimum ui components. They say: A few common UI elements and a grid. The rest is up to you.
Looks useful though I'm not sure if it depends on sass
webdesign  web  design  grid  framework  flex  flexbox  layout  system  css  ui  elements 
june 2016 by piperh
Frend — A collection of accessible, modern front-end components.
they say: Frend components are modest and dependency-free. Keyboard navigable. Components use js but no external library
webdesign  web  design  code  coding  components  library  accessible  dependency-free  accordion  modal  off-canvas  tabs  tooltip  ui  js  javascript 
june 2016 by piperh
Online Mockup, Wireframe & UI Prototyping Tool · Moqups
online in-browser app for making wireframes, mockups, layouts, UI concepts, prototypes
webdesign  web  design  ui  mockup  layout  page  wireframe  prototype  project  online  browser 
may 2016 by piperh
Crazy Egg - Visualize where your visitors click
company providing heatmap type stats and data about visitor clicking and scrolling behaviour
webdesign  web  design  webdev  seo  statistics  ui  user  behaviour  click  scroll  website  heatmap 
april 2016 by piperh
datedropper is a jQuery datepicker plugin.
jquery plugin for forms to present a friendly date picker
datepicker  ui  javascript  jquery  js  date  picker  dropper  form  chooser  select  enter 
april 2016 by piperh
The Illusion of Completeness: What It Is and how to Avoid It
article about usability and visual clues to off-screen content
webdesign  web  design  ui  usability 
january 2016 by piperh
Native Form Elements
displays native html5 form elements so you can see how browser renders them
webdesign  web  design  form  element  browser  native  html  ui  style 
december 2015 by piperh
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Chosen is a jQuery plugin that makes long, unwieldy select boxes more user-friendly
webdesign  web  design  forms  input  list  select  js  javascript  jquery  box  ui  user  interface 
november 2015 by piperh
asvd/viewport · GitHub
vanilla javascript scrolling interface. You can add custom icons to a vertical bar and it will show your position
webdesign  web  design  scroll  scrollbar  navigate  navigation  ui  interface  js 
september 2015 by piperh
Intence, the scrolling indicator
strange scrolling solution. Eliminates scrollbar and substitutes other indicators
webdesign  web  design  scroll  scrollbar  navigation  ui  interface 
september 2015 by piperh
Designers: Start Coding With uilang - Smashing Magazine
good article explaining use of uilang.js, but also showing good css effects of transition and transform. Some very nice stuff
webdesign  web  design  javascript  uilang  ui  js  code  coding  generator  css  transition  transform  effects  webdev  development  tutorial  howto 
february 2015 by piperh
easy way to code simple javascript events (clicks only). Use more intuitive syntax and the js translates it into proper javascript. Also there's a link here to his transpiler, so you can produce then paste in the full code. No external dependencies
webdesign  web  design  javascript  generator  click  listen  event  ui  js  css  friendly  interface 
february 2015 by piperh

Copy this bookmark:

to read