recentpopularlog in

abberdab : design   303

« earlier  
Accessibility for Teams
This guide provides:

- An overview of how each team member can contribute to a product's accessibility
- A framework for thinking about accessibility and inclusive design in your role
- An understanding of the human need behind accessibility practices
- We focus on the issues most likely to impact government sites. These guidelines do not provide a comprehensive list of all possible issues. Your team will need additional resources and work to conduct manual audits to conform to the standards of Section 508 (which aligns with the W3C Web Content Accessibility Guidelines (WCAG) 2.0 Level AA), a law that ensures all web content is accessible to anybody with a disability.
a11y  accessibility  design 
july 2018 by abberdab
Other component articles have already explored the advantages of using lists to enhance assistive technology users' experience. Briefly:
Screen readers provide shortcuts to lists and between list items
Screen readers enumerate the items so users know how many are available
a11y  accessibility  css  design  cards  lists  components  focus  focus-within  layout  flexbox  grid  clip 
june 2018 by abberdab
Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article
Simply put, a priority guide contains content and elements for a mobile screen, sorted by hierarchy from top to bottom and without layout specifications. The hierarchy is based on relevance to users, with the content most critical to satisfying user needs and supporting user (and company) goals higher up.
design  wireframes  content-first  mobile  ia  ux  requirements 
june 2018 by abberdab
The All-New Plugin from Plant – Prototypr
Visual design version control app and plugin for Sketch
design  versioncontrol  versioning  sketch-app 
april 2018 by abberdab
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
Create type pairs, set a modular scale, tweak spacing between a basic type ramp of H1-H6 and paragraphs.

A nice alternative to Typecast when all you want to do is choose some fonts (Google or local fonts only) and test your typographic pairing and grid — no layout to confuse things.
css  design  fonts  tools  typography  google 
january 2018 by abberdab
Advanced image alignments with CSS Grid: Full Bleed and beyond
"An experiment to mix regular floated images and full-bleed / full-bleed variant images within the same layout using a combination of old layout methods and CSS Grid." from Morten Rand-Hendriksen
image  css  alignment  floats  grid  layout  blog  article  design 
january 2018 by abberdab
Home | Laws of UX
Laws of UX is a collection of the key maxims that designers must consider when building user interfaces.

It was created by Jon Yablonski using paper, pencil and Sketch App for design, Gulp for development workflow automation, Sass for CSS preprocessing, and Nunjucks for HTML templating.

Typography is set in IBM Plex Sans and Plex Mono, an open-source typeface by IBM.
ux  laws  rules  guidelines  design 
january 2018 by abberdab
ex-jedi/perch-admin-theme: This 'theme' adds a little more contrast and visual hierarchy to the Perch UI.
This theme uses Google's Open Sans font and adds more contrast and visual hierarchy to the Perch UI.
perch  admin  cms  design  custom 
january 2018 by abberdab
Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
I thought about taking screenshots and Photoshopping wireframe boxes over the various layout pieces, but then I wondered: could I overlay boxes on the live page with CSS? Or perhaps even create and overlay them with nothing but some declarations and a wanton disregard for the sensibilities of god or man?
css  design  wireframes  experiments  examples  ia 
november 2017 by abberdab
Create A Basic Portfolio Filtering System by Brian Haferkamp on CodePen
One of the things I'm often looking for but can't find is a basic filtering system for portfolio items. It seems like the ones I find online are too complicated or bloated. They're trying to do way too much. So I created a basic framework for a portfolio filtering system that works great as-is. You can also fork it and add any bells and whistles you want.
codepen  portfolio  filtering  jQuery  gallery  images  css  design  grid 
october 2017 by abberdab
100 Days of Fonts
100 Days of Fonts is a personal creative project inspired by Elle Luna the 100 Day Project. Every day for the last 99 days, I designed and coded a combination of Google Fonts, the result of which lives on this page.
design  fonts  free  google  inspiration  lists  webfonts  typography 
october 2017 by abberdab
Get rid of FoMO clutter around your SaaS. – The Rectangles – Medium
Discovery with the User Centered Design Canvas.

“If you run a business for people, you need to meet their needs. And we know that you have neither the time nor the money for research. With UCDC you don’t have to have either of those. Bear with me for 6 minutes and I assure you, you won’t regret it.”
UX  design  discovery  SaaS  products 
october 2017 by abberdab
Color Contrast for Better Readability | Viget
I’ve been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too.
a11y  color  contrast  design  colorpalettes  accessibility 
august 2017 by abberdab
Signal vs. Noise: Color as a Wayfinding Tool | Viget
Used carefully, color can become a helpful wayfinding tool to better help a user know where she is and where to go next. When it comes to user interface design, you may want to limit your use of color. Instead, use it cautiously in very intentional and meaningful ways.
color  wayfinding  design  ui  ux  colorpalettes 
august 2017 by abberdab
Using Visual Loudness for Better Wayfinding | Viget
Well-designed interactive experiences use loudness to help identify and amplify wayfinding systems. Because, if everything screams all you will hear is noise. Emphasis used properly—like a loudspeaker in a crowded room—can help guide attention more effectively. Careful use of visual loudness helps illuminate priority.
color  colorpalettes  design  hierarchy  loudness  volume  wayfinding  ux  ui 
august 2017 by abberdab
Rethinking web design
Browsers operate on an evergreen update model now, so features and bug fixes get shipped much faster than we’re used to with traditional software. So the range of browsers with varying features is extremely wide. This is part of parcel of web design, where we layer on different styles and looks based on feature support. This is part of the new normal I want to see.
web  design  responsive  feature-queries  crossbrowser 
august 2017 by abberdab
A hard look at how the browse experience translates in the digital space
I thought I’d take a stab at exploring this concept as it relates to one experience in particular: browse. Designers have notoriously poured their blood, sweat and tears into browse experiences, and to what end? These experiences often overstimulate and under deliver.
ux  browsing  search  patterns  design 
august 2017 by abberdab
Our Articles | Viget
Nice reference articles on everything from color palettes to design systems to code snippets, unfortunately it doesn't have an RSS feed. :(
articles  ux  reference  design  process  content  code  strategy 
august 2017 by abberdab
Add Colors To Your Palette With Color Mixing | Viget
Really nice approach to generating a spectrum of colors that complements an established brand palette.
color  design  palette 
august 2017 by abberdab
From Darkness to Light: Color Versatility Using Tints, Tones, and Shades | Viget
In my last article, I wrote about how using more specific names can be useful when referencing colors. Several people shared how this is doubly useful when mapping to SASS variables—and I agree. This time around I want to share how to use more specific color names when applying lighter and darker values through tints, tones, and shades and how this can be further helpful for color reference.
color  design  sass  css  naming  naming-conventions  tints  tones  shades  colorpalettes 
august 2017 by abberdab — Ethical Design Manifesto
Human Rights

Technology that respects human rights is decentralised, peer-to-peer, zero-knowledge, end-to-end encrypted, free and open source, interoperable, accessible, and sustainable.

It respects and protects your civil liberties, reduces inequality, and benefits democracy.

Human Effort

Technology that respects human effort is functional, convenient, and reliable.

It is thoughtful and accommodating; not arrogant or demanding. It understands that you might be distracted or differently-abled. It respects the limited time you have on this planet.

Human Experience

Technology that respects human experience is beautiful, magical, and delightful.

It just works. It’s intuitive. It’s invisible. It recedes into the background of your life. It gives you joy. It empowers you with superpowers. It puts a smile on your face and makes your life better.
business  design  ethics  privacy 
august 2017 by abberdab
Your Site—Any Site—Should be a PWA | Aaron Gustafson
The other day, Frances Berriman—who coined the term “Progressive Web App”—wrote a bit about how she came up with that name. In it she clearly points out that the name has become a little problematic in dev circles:

"I keep seeing folks (developers) getting all smart-ass saying they should have been PW “Sites” not “Apps” but I just want to put on the record that it doesn’t matter. The name isn’t for you and worrying about it is distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer. It’s a way for you to keep making things on the open web, even those things that look really “app-y” and your company wants to actually make as a native app, 3 times over. They don’t want you to make websites anymore, but you still can if you’re sneaky, if you tell them it’s what they think they want."

As someone who is at once a practitioner, an educator, and a consultant on web projects, this can be tough to wrestle with. But like DHTML, Ajax, and HTML5 before, when viewed as a catch-all term for an approach to building stuff for the web it really shouldn’t matter that the word “app” is in there. Sure, it could have been “site” or “thang”, but when we—and I’m talking to the practitioners here—hear someone talking about PWAs, we need to take the broad view.
PWA  article  definition  terms  progressive-enhancement  web  development  responsive  design 
august 2017 by abberdab
CSS Architecture for Design Systems | Brad Frost
Nice example of collaboration guidelines for working on css to scale.
architecture  bem  css  design 
july 2017 by abberdab
Launching a Campaign Website…Quickly | Brad Frost
2 developers in 2 weeks design a campaign site with a nascent brand identity...
design  process  web  designing-in-the-browser  visual-inventory 
july 2017 by abberdab
Zoom Mocks: Bridging The Divide Between Styles And Page Design | Lullabot
As we evaluated these challenges within our process, our fundamental desire was to find a way to ensure that our design decisions were being made based on actual page elements and components in real-world context. The result of this process has been a new hybrid approach that we call “Zoom mocks”.
style-tiles  element-collages  mockups  design  process  web 
july 2017 by abberdab
Displaying a webmentions facepile
One thing that quickly became apparent when displaying likes and reports on my own site was that the traditional listing format that we’re used to for comments is not well suited to these lighter interactions. When a like or repost is given the same visual weight and spacing as a comment, the listing soon gets very long and awkward to browse.
cms  perch  webmentions  likes  UI  design 
july 2017 by abberdab
Contrast – Guide
Nice designer-targeted summary of the WCAG 2.0 accessibility guidelines for contrast.
reference  wcag  a11y  design  accessibility 
july 2017 by abberdab
Responsive web design tool, CMS, and hosting platform | Webflow
Design and develop at the same time
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.
design  responsive  tools  gui  browser  cms 
july 2017 by abberdab
UI And UX: What's the Difference?
The digital world can be very exciting and puzzling. What are people talking about when they refer to the UI and UX of a product or website? Should you consider learning UX design yourself?
ux  ui  design  careers  titles 
july 2017 by abberdab
Connect: behind the front-end experience
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.
grid  fallbacks  feature-detect  feature-queries  illustration  animation  css  design 
june 2017 by abberdab
Easing Linear Gradients | CSS-Tricks
Linear gradients are easy to create in CSS and are extremely useful. As we'll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway!
css  design  gradients 
june 2017 by abberdab
Style Guide Guide | Style Guide Guide
Mr. @brad_frost just released Style Guide Guide, a boilerplate for creating a reference site for your design system.
css  design  styleguide  boilerplate  system  patterns 
may 2017 by abberdab
Design Better Data Tables –
Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.
css  data  design  tables  ux 
may 2017 by abberdab
Stephanie Liu
When I was TA-ing a Responsive Web Design class for Girl Develop It several weeks ago, a great question was raised as to how to keep video embeds from losing their aspect ratio responsively. So I thought I’d do a quick post on how to maintain embed aspect ratios in a responsive site. And maybe I could even brush some dust off the accepted solution to this problem, especially now that we have CSS Grid ✨.
css  layout  video  responsive  design  development  methods  article  aspect  ratio  grid 
may 2017 by abberdab
The Three-Hour Brand Sprint
Introducing the Brand Sprint

At GV, we use our five-day Design Sprint to help teams tackle product and marketing challenges. We decided to put the brand exercises into a sprint-like process that any team can use. And the best part is: We squeezed it into just three hours. We don’t think more time necessarily yields better results. And because the process is fast, you can involve the people who really need to be there.
branding  design  process  discovery  sprint 
march 2017 by abberdab
Sketch for Front-End Developers Part I
How to export assets, make a Style Library, pull CSS from Sketch, and more.
sketch-app  tutoriais  design  dev 
november 2016 by abberdab
The Ins and Outs of My Squarespace Client Design Process
It’s no secret that I love Squarespace. Not only is it easy to customize,
easy to use, and easy on the eyes, but it makes the client process so
simple for designers who use it to create client sites.

Because Squarespace is still relatively new and there aren’t as many
designers using it as there are on Wordpress, I receive several emails each
week regarding about the ins and outs of how I design client sites using
the platform. 

I get asked everything from how I handle billing...
squarespace  process  design  freelance  examples 
september 2016 by abberdab
10 Tips for Designing with Type on a Photo - Designmodo
One of the best techniques to have in your toolkit is designing with type on and around images. But it can also be one of the toughest concepts to pull off successfully.

You have to have the right photo, a good eye for typography and know what you want to accomplish to make the most of adding type to an image. If you feel like you are ready to take on the challenge, here are 10 tips for making it work.
design  photography  typography  contrast  readability 
september 2016 by abberdab
Pricing The Unknown When Quoting Web Design Projects
Slides, content, and insights from Jennifer Bourn's Word Camp San Diego talk on creating effective, accurate web design quotes when information is lacking
business  estimating  proposals  discovery  projects  clients  scoping  dev  design  www 
august 2016 by abberdab
WTF, forms?
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

Created by @mdo.
design  css  forms  dev  www 
august 2016 by abberdab
Examples: Pricing Pages
Curated directory of the best pricing layouts.
pricing  design  layout  modules  www 
august 2016 by abberdab
Design Better Data Tables — Mission Log
Poor tables. Where did they go wrong?After being the bread and butter of the web for most of its early history, tables were cast aside by many designers for newer, trendier layouts. But while they
data-visualization  tabular-data  design  tables  information-design 
august 2016 by abberdab
Angled Edges
A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
css  sass  mixins  layout  motifs  design  www 
august 2016 by abberdab
« earlier      
per page:    204080120160

Copy this bookmark:

to read