Design Icon

Design

55 Stories
All Topics

Dennis Reimann dennisreimann.de

UIengine 1.0 – a workbench for UI-driven development

Dennis Reimann: The UIengine is a tool to build pattern libraries and documentation for design systems. It helps designer and developers to work closely together and offers features to boost their productivity. Alternatives already exist in the ecosystem (Fractal, Storybook, etc). Why reinvent the wheel? Most of the existing tools focussed on the component development, but lacked ways to also provide good documentation. Some were limited to using a specific templating language or framework, which was suboptimal for me: As a freelancer I am working on many projects and each one has its own set of constraints and requirements. I wanted to build a tool with an open source license, which I could use and extend with every project I work on.

read more...

Josh Comeau joshwcomeau.com

Dynamic Bézier curves

If you've been looking for a fun, interactive, deep-dive into Bézier curves, this blog post from Josh Comeau is for you. Also, this is Josh's first post to his new blog, which is also open source on GitHub — so the following is a nice intro for what to expect. The whole reason I started this blog was that I wanted a way to build dynamic, interactive articles that are more effective at sharing and teaching concepts. Unlike with plain text on Medium, this blog is a fully-powered React app, and so I can create and embed interactive elements that help the reader build an intuitive understanding of the subject being presented. These dynamic "flattenable" Bézier curves are a perfect subject for this format, as they have underlying complexity that would be difficult to explain with words alone. And here's what to expect from this post on Bézier curves. In this maiden blog post, we'll go through the basics of working with Bézier curves and SVG in React.js. We'll learn how to build dynamic curves that respond to user input.

read more...

Joel Califa joelcalifa.com

Tiny wins

Joel Califa writes on his personal blog about small interface changes to GitHub that have saves millions of developers immeasurable amounts of wasted time and anxiety. One small change can add up to a big win. High frequency actions (such as creating new PRs on GitHub) take place millions of times a day. A given user might go through the same flow several times per week, per day, or even per hour. These flows become a part of their lives. If there is even a slight inefficiency or frustration, it compounds with every use. One confusing moment that takes an extra 5 seconds—repeated multiple times a day in perpetuity—adds up to a lot of anxiety and wasted time. My takeaway? Don't underestimate the impact of seemingly small interface changes!

read more...

Jon Rohan GitHub

Using Figma to build Octicons

Jon Rohan writes on the GitHub Blog: To support your project’s contributors it’s important to make the contributing experience as frictionless as possible. Migrating our Octicons to Figma let us cut out painful steps in our previous workflow. Having their API available for automating the work has allowed contributors to contribute using powerful platform-agnostic design tools without any overly complex setup. This seems to be one of the first major steps I've seen to use a platform-agnostic design tool like Figma, which lets you design, prototype, and gather feedback all in a browser based design tool. Couple that with a robust API and some robots to automate things as well as open up your design flow to contributors.

read more...

iOS fastcodesign.com

3D face tracking UI experiment with iPhone X

Peder Norrby created TheParallaxView, a UI experiment for his iPhone X, that gives it a trompe-l’oeil effect. Trompe-l’oeil is an age-old trick used by painters to create the illusion of 3D depth on a 2D plane. On the iPhone X, it’s downright mesmerizing. The touchscreen itself seems to melt away as the phone transforms into a portal to an infinite abyss. Angle the phone, or your own head, and you can even peek inside, as if you’re looking through a peephole into another room, or inspecting a can of Pringles for the last few crumbs. The source is on GitHub — plus check out this blog post and this Twitter thread for more of the backstory.

read more...

CSS frankchimero.com

Everything easy is hard again

This is a long, nuanced piece about progress in web-building technologies and practices. It's written from a designer's perspective, but many of the themes ring true to my developer's brain. I wonder if I have twenty years of experience making websites, or if it is really five years of experience, repeated four times. If you’ve been working in the technology industry a while, please tell me this sounds familiar to you. The primary example cited is how we answer the simple question, "How do I put two things next to each other?" The status quo has changed (tables -> floats -> Flexbox -> CSS grids), but to what advantage? A few of his points feel a bit like looking back at the "good 'ole days" through rose colored glasses, but his case is mostly well-reasoned and powerful. the foundations are now sufficiently complicated enough on their own that it seems foolish to go add more optional complexity on top of it. I’ve kept my examples to the most basic of web implementations, and I haven’t touched on Javascript, animation, libraries, frameworks, pre-processors, package managers, automation, testing, or deployment. Whew. Whew, indeed! The breadth and depth of knowledge required to feel competent in today's web ecosystem is probably why we spend so much time dealing with imposter syndrome in this industry.

read more...

Daniel Stenberg daniel.haxx.se

Curl gets a spaceship progress bar

Starting in curl 7.58.0 If the total size is unknown, it will now instead display a small space ship flying across the line, back and forth – and it will only move as long as there is data being transferred. If it stalls, the little ship stops. Daniel calls this new progress bar style "useless", but we always love seeing people inject fun and whimsy in to their open source projects, even at curl's state of maturity. Curious what it looks like? There's a sample video on YouTube.

read more...

Kottke Icon Kottke

Bad design in action: the false Hawaiian ballistic missile alert

Instead of selecting “DRILL - PACOM (CDW) - STATE ONLY” from what looks more like a list of headlines on The Drudge Report than a warnings & alerts menu, the operator chose “PACOM (CDW) - STATE ONLY” and sent out a real alert. This is another display of just how critical good design and attention to detail is in the software industry. We have to do better.

read more...

JavaScript changelog.com

Changelog Films at NEJS Conf!

As many of you may know, we launched a films division to The Changelog. We call it Changelog Films. Over this past year, we've been working hard to build the right team and skills to serve the software development and open source community like we do with our podcast. We had the pleasure of attending NEJS Conf on August 7th, and worked with the conference organizers to interview all the speakers of the conference. This interview is with Christian Heilmann, Developer Evangelist for Microsoft Edge, about the most exciting things happening in JavaScript right now. This interview is with Ethan Marcotte, an Independent Designer and the person who coined the term "Responsive Design" also known as Responsive Web Design (RWD). We talked with Ethan about what's happening in the JavaScript space now and what he's most exciting about for frontenders.

read more...
0:00 / 0:00