Content tagged “design”

  1. The UX of LEGO Interface Panels – George Cave

    Two studs wide and angled at 45°, the ubiquitous “2x2 decorated slope” is a LEGO minifigure’s interface to the world.

    These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces.

    Welcome to the world of LEGO UX design.

    Be still my childhood heart.

  2. 18F User Experience Design Guide

    18F user experience (UX) designers join cross-functional teams to improve interactions between government agencies and the people they serve. The 18F UX Guide helps us get this job done. It’s a starting point for UX design at 18F: doing it, discussing it, and ensuring it’s done to a consistent level of quality.

    Another useful open source guide from the incredible team at 18F.

  3. Preserving the Eameses’ Film Legacy - Herman Miller

    the Eameses’ massive archive—one million items, including their films—went to the Library of Congress after Ray died in 1988. Now the stewards of The Work of Charles and Ray Eames, the Library of Congress is at work creating preservation-quality copies of their films. They’ve done 20 already with more to come.

    In this article, Herman Miller’s WHY Magazine details three recently preserved Eames films: S-73 Sofa Compact, Soft Pad, and Fiberglass Chairs—Something of How They Get the Way They Are.

    Also worth watching, Eames: The Architect and the Painter.

  4. A11Y Style Guide

    The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.

  5. BBC GEL Technical Guides

    The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.

    This technical companion to the BBC’s Global Experience Language serves as a reference for developers implementing GEL’s user experience recommendations.

  6. Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid — Smashing Magazine

    “When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

    This 2017 article from Manuel Matuzović goes deep on how to creatively use CSS Grid Layout in a progressively-enhanced manner. Naturally, the baseline techniques we use will change over time, but Manuel’s demo illustrates how you might think about design and layout as experience layers.

  7. US Flags [dot] Design

    A design guide for the flags of the United States.

    Lynn Fisher put together this love letter to state flag design. She writes:

    I’ve always loved the Arizona flag and consider it one of the best designed. After a visit to the National Constitution Center in Philadelphia and seeing all of the state and territory flags hung together in a row, I was eager to learn more about their designs and histories.

    Personal favorites include Colorado, New Mexico, and—like Lynn—Arizona.

  8. I Used The Web For A Day On A 50 MB Budget — Smashing Magazine

    The latest in Chris Ashton’s series of “I Used the Web for a Day…” articles is a doozy of a read chock-full of facts, figures, tips, and tricks.

    The cost (in dollars) of mobile and broadband data plans globally varies wildly and Chris’ post goes deep on how the cost (in page weight and in dollars) of our work building for the Web impacts users around the world. Chris concludes:

    We don’t have the power to change the global cost of data inequality. But we do have the power to lessen its impact, improving the experience for everyone in the process.

  9. W3C TAG Ethical Web Principles

    The web should be a platform that helps people and provides a net positive social benefit. As we continue to evolve the web platform, we must therefore consider the ethical consequences of our work. The following document sets out ethical principles that will drive the TAG’s continuing work in this direction.

    The W3C’s Technical Architecture Group lays out their set of ethical design principles as applied to the Web and—surprise—they’re solid:

    • There is one web
    • The web should not cause harm to society
    • The web must support healthy community and debate
    • The web is for all people
    • Security and privacy are essential
    • The web must enable freedom of expression
    • The web must make it possible for people to verify the information they see
    • The web must enhance individuals’ control and power
    • The web must be an environmentally sustainable platform
    • The web is transparent
    • The web is multi-browser, multi-OS and multi-device
    • People should be able to render web content as they want
  10. 18F Content Guide

    How to plan, write, and manage content at 18F.

    Another great resource from the folks at 18F. The Inclusive Language page is especially noteworthy:

    The words we use can make the difference between forging positive connections or creating distance in our personal and professional lives. Particularly in writing, impact is more important than intent.

    As we build government services, we want to ensure they are accessible and welcoming to everyone who needs to use them. Inclusive language helps us to be more accurate and build trust with our users.

  11. Introducing USWDS 2.0 | United States Web Design System

    Today, we’re launching U.S. Web Design System 2.0 (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience.

    USWDS is a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices. USWDS 2.0 is an important update to the design system — it introduces a powerful toolkit of new features to help make creating useful, consistent digital services faster, simpler, and more fun.

    Two years in the making, version 2.0 of the U.S. Web Design System is now live. This is a tremendous update and will be a boon to anyone building digital services for the American people. Congratulations to Dan, Maya, and the rest of the Technology Transformation Services team!

  12. Gauges II

    Gauges II

    Taken on .

  13. Gauges I

    Gauges I

    Taken on .

  14. Jen Simmons on CSS’ display property

    Collecting a few of Jen Simmons’ tweets:

    Learned on today’s CSSWG call—I had a fundamentally out-of-date mental model of how the display property structures its values.

    It’s not display: <value>;. It’s display: <outer-value> <inner-value>;.

    drafts.csswg.org/css-display/#outer-role

    This realization won’t change what I write in my code, but it does change how I think about what I’m writing.

    display: grid; = display: block grid;
    display: flex; = display: block flex;
    

    Also: display: inline grid;

    You can write display: inline-grid;, but that’s actually out of date. It makes more sense to write display: inline grid;

  15. plainlanguage.gov

    Plain language makes it easier for the public to read, understand, and use government communications.

    Led by the incomparable Nicole Fenton, the team at 18F recently relaunched plainlanguage.gov, an exceptional website full of writing guidelines, examples, and resources. While the Plain Writing Act of 2010 mandates that government resources be written in clear, concise language, there’s ample evidence that agencies have been slow to update problematic services.

    It’s heartening to see GSA tackle the matter head on.

  16. Extended Validation is Broken

    Today, I will demonstrate another issue with EV certificates: colliding entity names. Specifically, this site uses an EV certificate for “Stripe, Inc”, that was legitimately issued by Comodo. However, when you hear “Stripe, Inc”, you are probably thinking of the payment processor incorporated in Delaware. Here, though, you are talking to the “Stripe, Inc” incorporated in Kentucky. This problem can also appear when dealing with different countries.

    In this post, Ian outlines several Web security-related flaws in current-era browser user interface. Browsers, in an attempt to be clever, obfuscate several important pieces of information that might provide users with details about the people behind a particular website. On top of that, Ian demonstrates flaws in the cross-jurisdicitonal systems that allow for the coexistence of like-named but unrelated business entities.

    Browser vendors treat extended validation certificates as special cases, giving them visual priority over standard TLS certificates. The average user won’t know the difference—nor should they—when they see “Trusted Company X” highlighted in green in their browser’s URL bar. The expectation is that they’re actually viewing Trusted Company X’s website and not the website of some rando with a little bit of money to spare.

  17. Answers to Questions About Performance — Google Developers — Medium

    Google’s Paul Lewis answers the same questions that Matt Gaunt received (and that I previously linked to). Paul’s focus on the user and their experience of our work resonates strongly with me and is something I harp on quite frequently.

    I think performance, accessibility, and security share some traits: they can’t be retro-fitted to a project, they’re often thankless tasks, and they’re only notable by their absence. They’re all, however, the bedrock of a good user experience, onto which you can layer high quality designs and interactions.

    Paul also cites one of my favorite documents, the W3C’s HTML Design Principles:

    In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

    Truth.

  18. Web Development is a Balancing Act — Medium

    Google Chrome Developer Advocate Matt Gaunt publicly answers some Web performance-related questions he received. Many of the questions have to do with frameworks, a topic of great interest to me.

    A slow website, no matter how it’s built, means someone didn’t notice, didn’t care or couldn’t fix the problem. That doesn’t mean the framework or tools used to build it is the problem, it could be the way those tools have been used.

    It could also be that the chosen tool isn’t the best solution to the problem at hand.

  19. How Changing WebFonts Made Rubygems.org 10x Faster

    Nate Berkopec’s article is chock full of useful information, but I was particularly taken by his framing of a developer’s job (emphasis his):

    As developers, our job isn’t to tell the designers “Hey, you’re dumb for including over 500KB of WebFonts in your design!”. That’s not their job. As performance-minded web developers, our job is to deliver the designer’s vision in the most performant way possible.

    Equally interesting, but more technically-focused, is the rundown of how Google Fonts takes advantage of the unicode-range property to deliver smaller fonts.

    The unicode-range property describes what characters the font supports. […] By telling the browser what characters the font supports, the browser can look at the page, note what characters the page uses, and then only download the fonts it needs to display the characters actually on the page.

    Brilliant. I switched to serving fonts from Google and trimmed 45–70 kilobytes from my homepage. Your mileage may vary, but… not bad.

  20. Mobile Web Stress: Understanding the neurological impact of poor performance

    Slides from Tammy Everts’ 2013 presentation on the neurological effects of poor performance on our websites’ visitors reveal some startling facts. Right out of the gates, Tammy cites a 2010 EEG study of users navigating a site on a connection throttled from 5MB to 2MB. The study found that participants had to concentrate up to 50% harder and reported a negative brand association afterward.

  21. Imagining the Web of Things with Stephanie Rieger and Jonas Sicking | The Web Ahead

    I find myself with IoT talking about progressive enhancement all the time, even though it’s a Web thing, but it makes even more sense. Really, it should be the thing it was designed to be first and then the smarts layered on top.

    Stephanie Rieger on a recent episode of The Web Ahead podcast, speaking with Jen Simmons about designing network-connected physical devices—ahem the Internet of Things—with the philosophy of progressive enhancement baked in. Sure, you could build a Web-connected light switch, but if it isn’t first a well-designed light switch, you’ve missed the mark.

  22. Visions of the Future

    Imagination is our window into the future. At NASA/JPL we strive to be bold in advancing the edge of possibility so that someday, with the help of new generations of innovators and explorers, these visions of the future can become a reality. As you look through these images of imaginative travel destinations, remember that you can be an architect of the future.

    This collection of WPA-style travel posters from NASA/JPL appeals to my interests.

  23. Bloodlines

    Bloodlines

    Taken on .

  24. Notes from “Designing for Performance”

    If you build websites for a living or work with people who do, stop what you’re doing and get yourself (or your team) a copy of this book.

    Published on .

  25. Fifteen Years of “A Dao of Web Design”

    This week marks the fifteenth anniversary of one of the seminal articles on Web design: John Allsopp’s, “A Dao of Web Design.”

    Published on .

  26. Designing Experience Layers

    Wherein I rattle on about the Web, content-first design, and progressive enhancement.

    Published on .

  27. What do you value?

    A recent interview with a candidate got me thinking about values.

    Published on .

  28. The Web Is Cake

    Or, more specifically, web pages are cake. Here's why.

    Published on .

  29. swissted

    swissted is an ongoing project by graphic designer mike joyce, owner of stereotype design in new york city. drawing from his love of punk rock and swiss modernism, two movements that have (almost) nothing to do with one another, mike has redesigned vintage punk, hardcore, and indie rock show flyers into international typographic style posters. each design is set in berthold akzidenz grotesk medium, all lowercase. many of these posters are now available for sale in three different sizes at print-process. every single one of these shows actually happened.

  30. Fluid Grid System

    A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

  31. Ignorance, Mockups, Bliss, and Markup

    In this article for ADCMW's FullBleed, I interview several well-known web designers and get their thoughts on the controversial topic of designing in the browser.

    Published on .

  32. Interactive Sketching Notation - linowski.ca

    The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions. Through a few simple and standardized rules, what the user sees (drawn in greys and blacks) and does (drawn in red) are unified into a coherent sketching system. This unification of both interface and use, intends to enable designers to tell more powerful stories of interaction.

  33. The myth of the page fold: evidence from user testing | cxpartners

    As web professionals, we all know that the concept of the page fold being an impenetrable barrier for users is a myth. Over the last 6 years we’ve watched over 800 user testing sessions between us and on only 3 occasions have we seen the page fold as a barrier to users getting to the content they want.

    In this article we’re going to break down the page fold myth and give some tips to ensure content below the fold gets seen.

  34. A List Apart: Articles: The Wisdom of Community

    It’s one of the most important concepts on the web today—perhaps the most important for social media—but it’s one of the least understood. When James Surowiecki wrote The Wisdom of Crowds in 2004, he explored the stock market and other classic social psychology examples, but “web 2.0” was still nascent. It’s time to connect his ideas to the social web, where they can reach their full potential.

  35. Function Web Design & Development [ Blog ] » How to Spot Quality within Web Design: Examples & Tips

    Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

    I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.

  36. Politweets mixes Twitter and Election '08

    What if one could harness Twitter messages from the general populous based around a single topic or event? Enter Politweets.

    Published on .

  37. Heading to Future of Web Design

    A whole bunch of the DC crew is heading up to New York City for the Future of Web Design conference next week.

    Published on .

  38. Mixx goes beta

    I'm happy to announce that Mixx has gone beta and we're slowly letting people in to hammer away on the system.

    Published on .

  39. circaVie launches

    CircaVie allows you to create visual timelines of events: your life, a vacation, etc. etc.

    Published on .

  40. Reading Mode

    I just added a feature I'm rather fond of.

    Published on .

  41. Ficlets

    The much-talked-about Project Ape Shirt has officially been born and christened Ficlets!

    Published on .

  42. Catching up

    It's been a while since my last post.

    Published on .

  43. Refresh DC site relaunch

    I'm happy to announce we've just relaunched the Refresh DC site.

    Published on .

  44. Retro Theater

    The latest design over at the Zen Garden is sick.

    Published on .

  45. Musings

    A new project at work has me diving deep into Microformats and XFN.

    Published on .

  46. Recent goings-on

    Here's an abbreviated list of things that have been going on lately.

    Published on .

  47. design fckr launches

    Alex Giron just launched a new site, design fckr.

    Published on .

  48. Yahoo!'s Wii feature

    Yahoo! has a feature/mini-site devoted to the Nintendo Wii.

    Published on .

  49. PJ Hyett

    Tavis found this yesterday while digging through some bookmarks and came across PJ Hyett's site.

    Published on .

  50. Cindy Li redesigns

    Superfriend Cindy Li just launched a CSS-ified redesign of her personal site.

    Published on .

  51. Rhythmic Uprising podcasts

    Ben Watkins and I are pleased to announce the launching of Rhythmic Uprising podcasts.

    Published on .

  52. SXSW 2k6

    Casually late, it's a ridiculously brief wrap-up of this year's trip to Austin for SXSWi.

    Published on .

  53. Grassroots and The New Web

    I recently handed over the reigns of the Global Youth Partnership for Africa site to their team.

    Published on .

  54. Groupr

    Carbomb and I just finished up Groupr, a Flickr API app that lets you view the latest photos from your (or anyone else's) groups.

    Published on .

  55. Refresh DC

    Refresh DC launched today.

    Published on .