Home Babes About

Category: Web Design

Web Design

Bring The Web Back To Life

Interactions 2.0 — Bring the web back to life

one of my co-workers slacked this little gem earlier this morning, and not only do i think it’s freak’n awesome… but man, talk about getting nostalgic.

#awesomesauce  #thumbsup

Leave a comment
Online/Web Web Design

Where Can NK Reach?

Where can North Korea’s missiles reach?

just thought this page had some cool interactions as you scroll on down…

good stuff, mang.

1 Comment
Online/Web Web Design

Material Design Awards 2017

Material Design Awards 2017
Recognizing best-in-class designs from around the community

A design system only comes to life when it’s used to create meaningful experiences. The Material Design Awards recognize best-in-class achievements in employing the Material Design system, and honor the makers behind each design.

For this, our third annual Material Design Awards, we decided to do things a little differently by opening the nomination process to the public. We wanted to reach back out to the community to help us find the very best, because there is so much excellent work being created. After reviewing hundreds of submissions, we’re proud to announce the winners, who will be joining us to celebrate at the SPAN Pittsburgh conference on September 14-15. Read on to learn what makes each of these experiences great.

i still prefer the iOS interface, but the “designer” in me really does like the stuff i’ve been seeing with google’s Material Design — especially over this past year or so, as it seems to get a little more solid and mature.

good stuff, google.

Samsung Galaxy S8 Icon System

Leave a comment
Web Design

In A Creative Rut?

In A Creative Rut? Try MIT’s Mad Libs For Designers

It’s easy to get into a slump at work. But a tool from MIT Media Lab offers a simple way to spark inspiration through random–and often nonsensical–design prompts. The game offers up problems that you’d never see in the real world as a bit of mind-opening creative exercise. Think of it as Mad Libs for designers.

Called design(human)design, the game has physical and digital manifestations as a deck of cards and a website, each providing a different interface for the same idea. According to the game’s structure, there are five categories that make up the basic components of a design: the artifact, the inspiration, the experience, the attributes, and the medium. In the card version, each of the these categories has its own deck of cards, and you pick five randomly to give you a new design prompt. On the website, you just hit refresh and the interface will present you with five usually unrelated concepts that together make up something like a brief.

oh man, it’s actually kinda cool… feel like i’ve seen similar things before, but to be honest i can’t really think or remember one off the top of my head.

#interesting  #bookmark

Leave a comment
Design Web Design

Bennies of Design System

The Benefits of Creating a Design System

In recent years, the styleguide has been given a refresh, and with the introduction of the concept of a Design System, or a Design Language. With this, comes a whole new approach that can epically effect how a product team approaches design as a whole.

With a solid, consistent, well explained and thought out system, the visual aspect of creating a design becomes totally modular. Products such as Craft by Invision or Brand.ai have made the visual design phase almost drag and drop to a certain extent.

Creating safety in the knowledge that the elements you’re using are consistent with every other designer on the team. They remove any animosity from the visual design phase, almost to a level where creating low-fidelity prototypes are a thing of the past.

“Styles come and go. Good design is a language, not a style.” – Massimo Vignelli

i’ve been messing around with redoing an old styleguide and updating it since it’s been a couple years since anybody took a stab at it, and i gotta say… this article is right on point, mang.

it’s harder that it looks, and will usually have you putting on that thinking cap and thinking things through.

PS. it’s just a pixel, baby!

Leave a comment
Design Online/Web Web Design

YouTube Has A New Look

YouTube has a new look and, for the first time, a new logo

For the last 12 years, YouTube’s logo has been a pair of anachronisms wrapped inside each other. “We have the word tube in a tube,” says Christopher Bettig, the head of YouTube’s art department. “This is weird. No one know what this is.” Tube is slang for a television set, which used to be powered by vacuum tubes. But neither tubes nor TVs are central to the world’s biggest video service, which now reaches over 1.5 billion people each month, streaming to almost any screen with an internet connection.

And so today the brand is getting its biggest aesthetic makeover ever. The YouTube logo is being refreshed, shifting the emphasis away from the word “Tube” and onto the familiar play button which has already become an iconic shorthand for the company. The service is also getting a new typeface, color scheme, and a bunch of major changes to the look, feel, and functionality of its desktop and mobile app.

nice write-up of the design updates youtube has been working on and testing/pushing out for the last few months now… i’m liking it, and love seeing designers printing stuff up and putting it all up on the wall.

Skype’s new ‘Interviews’ feature lets you test candidates using a real-time code editor

#ThumbsUp  #DesignWall

Leave a comment
Web Design

Nasty UX Truths

Nine Nasty UX Truths

Four truths about design:

It’s actually not that hard, and you’re not half as clever as you think.

  • Color is meaningless
  • Position matters most
  • Nobody reads
  • Navigation is failure

“Design is making the tough choices so your user doesn’t have to.”

Continue…

Leave a comment
Online/Web Web Design

New Twitter Design

apparently twitter is rolling out a new look…

funny, but i don’t use twitter on my phone all that much, unless i actually want to post a tweet or something… most of the time i just open flipboard.

Leave a comment
Web Design

Making Sketch Fluid

How to Make Your UI Design Fully Responsive With Sketch

Or How to Use the Fluid Plugin to Make Your UI Design Automatically Resize to Its Content…

I think you all know the following situation: You create a design for a one pager or an app and you have to change the height of the second module because you added text or an element. On top of this you want to change the header image size. What happens? You have to have in mind all the margin values between each module, select them and move them up and down accordingly to the adjusted module heights.

No, I don’t like that! I’d rather like to hit “Update” and all the elements move automatically according to the changes. And that’s what can be done with the Fluid plugin. Continue…

i was just playing around with this fluid plugin in Sketch the other day, and have to say… was happily impressed! seriously, been doing this the “old” or hard way for the last couple years i guess, making multiple sizes and manually designing/laying out the various screens… not sure you can still get completely around that, at least for all projects, but it sure is handy.

Leave a comment
Web Design

Microsoft’s Fluent Design

Microsoft launches the Fluent Design System, its take on Google’s Material Design

At its Build developer conference in Seattle, Microsoft today announced Fluent Design, its design system for building user interfaces across devices. In many ways, the ideas behind Fluent resemble those of Google’s Material Design language. The main purpose here is to give developers access to a single design language that will work well across devices.

As Kevin Gallo, Microsoft’s VP for the Windows Developer Platform, told me, the team wanted to build a system that would help developers write more “delightful” applications.

The overall design principle here was to create a design language that looks light, features layers and depth and animations, as well as materials. Because of this support for materials, Fluent will also bring back some of the translucency that Windows apps lost in recent iterations of the operating system.

interesting… didn’t see this one coming, especially from microsoft.

#GoodStuff

Leave a comment
Online/Web Web Design

Youtube Material Design

YouTube now lets you officially opt-in to its revamped Material Design interface

Over the last year, YouTube has been A/B testing a revamped interface on the web for some users. An official preview of that Material design, along with its dark theme, is now available for all users to enable and test.

This new interface is built using the Polymer framework. Besides speed, Google notes that it will allow for “quicker feature development from here on out.” The dark theme is one of the first features and aims to “cut down on glare and let you take in the true colors of the videos you watch.”

To enable the Material interface, head to youtube.com/new and follow the instructions.

dig’n the “material” design update, and definitely like it better… i’m only kinda surprised that it took them so long, to be honest.

#thumbsup  #chuckle

1 Comment
Web Design

Why Government Websites Suck So Much

Why government websites suck so much, according to Obama’s White House webmaster

Our interactions with government websites are often memorable for all the wrong reasons. Whether you’re trying to change your official address or applying for a local permit, you’re likely to see conflicting information, have to pinch-and-zoom a non-responsive design, or need a law degree to understand the five-paragraph disclaimer below a simple log-in form.

In a world where industry giants like Facebook run hundreds of user experience tests daily, why are our government websites so far behind the curve? I witnessed this problem first hand at the US Department of State and while running the White Houses’s digital technology initiatives under Obama. And I discovered that while change does not exactly happen overnight in these large bureaucracies, it is possible. And we, as frustrated citizens, should be demanding it.

The Trump administration is focused on upgrading a crumbling public infrastructure, proposing to invest $1 trillion over 10 years. Though not crumbling, our government’s digital infrastructure is weak and inferior. The systems through which we receive government services should be deemed as critical​ as our roads and bridges.

We must remember that our government is here to serve the people. Military jets should not fall out of the sky, filing taxes should not fail, and you should get your social-security benefits on time. Using internet services quickly and easily should be no different. Government websites exist to provide citizens with essential services and information, yet more often than not, it is difficult to find voter registration information or the form to pay your parking ticket.

As citizens, it can be hard to understand why our local governments are so slow to innovate. In my experience, I found that it has less to do with technical ability and skill and more to do with an environment of complacency. Innovation requires risk, and that’s a potential headache most governments want to avoid. Continue…

oh man, what a great fucking read!

+1

(hat tip: jayden)

Leave a comment
Web Design

HATE Your FAKE Redesign!

Why I HATE your FAKE redesign!

I’m tired of seeing new and frankly stupid redesigns of Facebook, Skype, and Twitter pop up on my newsfeed. Why not make something useful? Stop supporting these redesigns with likes, re-posts, and articles at Muzli, Medium, Designer News, etc. You’re aiding and abetting this brainless work. These designers may start to think that they are true professionals, and that they know more about how popular services should look than their creators.

Disclaimer: I don’t think that all redesigns have silly and unattractive UI, but I think that 99% of them do. If you read this article to the end, your redesign might just end up in the 1%.

funny, since i stumbled across that gmail design concept and posted it yesterday… then turn around the next day and see this.

#ummmmm  #chuckle

Leave a comment
Web Design

Gmail Redesign

i know i tend to post these redesign concepts every now and then, since occasionally i’ll stumble across one that i really dig… like this one for Gmail.

i love how minimal and clean it is :)

nice work, dude!

#ThumbsUp

2 Comments
Web Design

The Man Behind Comic Sans

Meet the Man to Blame for Comic Sans

Comic Sans has gone from being the ubiquitous text choice of early web Angelfire pages to being that font that everyone thinks sucks. But for its creator, Vincent Connare, it’s “the best thing I’ve ever done.”

Connare made the endlessly ridiculed font while he was working as an engineer at Microsoft. But the story of Comic Sans actually begins when he was a fine arts student in New York City. The young student spent his days wandering the art galleries of the old SoHo and taking in what was most affective. He says that he quickly learned, “if you didn’t notice them, I considered that was bad. And if you did notice that was good because at least they made you stop and look.”

After his rebellious incubation period, Connare found himself working for Bill Gates and tasked with creating a playful font for a new program called Microsoft Bob. Inspired by the lettering in Batman and Watchmen comics, he came up with what would be known as Comic Sans. And his bosses didn’t like it. This is one of those rare stories in which the close-minded suits were actually on to something. But the young designer was undeterred and fought for it—arguing that it should be weird and stand out.

Microsoft didn’t end up using the font in Bob. It’s a bit ironic that Bob was a failed attempt to make Windows a little more user friendly like a Mac and that Comic Sans would end up being packaged with every new Mac by 1996.

everybody loves to make fun of comic sans, myself included… but it’s still rather interesting to read about it’s backstory, and the guy behind everybody’s favorite font.

Leave a comment
Web Design

Death by Hamburger

Oh, the hamburger menu…

Recently, I was reviewing my work on a mobile app with another designer, when he asked me why I didn’t use a hamburger menu for the app’s main navigation.

The question caught me off guard. I paused for a second as I asked myself, ‘Why didn’t I do that?’ It almost felt like a trick question. I briefly explained that the hamburger menu obscured navigation and made it harder for users to find what they’re looking for. For the specific app I was working on, the content was not complex enough to warrant a hamburger menu.

After this conversation, I couldn’t stop thinking about it. Was I wrong? The designer reviewing my work was more experienced than I was, but I felt certain that a hamburger menu was the wrong way to go.

The Pros and Cons

A hamburger menu is great because it saves a lot of screen space, which allows for a simple, clean design. On the other hand, this requires that the user do more work to move between sections of the app, increasing the interaction cost to the user. Though a hamburger menu can visually simplify a design, it complicates the app structurally because it obscures information behind three little lines that provide no information scent.

With any project, your design choices should be informed by a strong understanding of the people you’re designing for. Do they understand that three horizontal stacked lines means menu? Have they interacted with a hamburger menu before and is that experience extensive enough for them to quickly understand what it means?

The hamburger menu is one of those trends that designers often don’t question often enough; they just do it without further ideation. It’s dangerous to implement any design trend without considering if that choice makes sense in context of the app experience and its users. This is especially so if the trend in question applies to primary navigation.

So, I did a little investigation to see what other major companies use a hamburger in their mobile apps. Spoiler alert: there aren’t as many as you’d think. Continue…

not the first article about the hamburger menu, and it won’t be the last… still found it interesting enough to read through.

What’s New in HTML 5.1

#nods  #thumbsup

Leave a comment
Online/Web Web Design Work

AddThis Refresh 2016

been jamming pretty hard the past couple weeks, but we finally rolled out this beast of a refresh on addthis.com this morning.

it’s definitely been awhile since we rolled out such a big update all at once… from the homepage redesign, to updating the rest of the top-level site pages (and most sub-pages), updating the academy theme, updating a crapload of support docs… and not readily visible unless you login, but we rolled out some big updates / changes in the dashboard — including a whole new tool configurator, which dovetailed nicely into this whole tool consolidation project we’ve been working on in parallel.

yeah, it really was a bit of a monster, but hot damn i’m pretty stoked that we finally got it out! feel like a lot of stress just got lifted, and kinda think i might take off a day or two… a long weekend at the beach certainly sounds pretty nice right about now ;)

p.s. nice job, team!

p.p.s. take the rest of the afternoon off. heh.

2 Comments
Online/Web Web Design

Site of the Day

just stumbled across this site and thought it was pretty damn cool… first time seeing a site with “3D audio experience” like this.

#impressive

1 Comment
Online/Web Web Design

We ♥ Google’s Web Fonts

Typography nerds will love Google’s revamped site for Web fonts

For years, Google has offered a cache of excellent fonts for use on websites, apps like Docs and for your desktop tools. Now, the site has been completely overhauled with a beautiful interface that makes it easy to find the right typeface for your next design project.

Google Fonts now has a brand new layout that displays font previews in a dynamic grid that resizes as you adjust your preferences. You can check out every style for each font, change the preview text and compare options side by side. A handy sidebar lets you filter the library of more than 800 fonts by category, language and parameters like thickness, slant and width.

If you’re looking for inspiration, you can visit the Featured section to see some beautiful fonts curated into collections. And as usual, you can download the fonts you like to your desktop, or grab code snippets to embed them into your own sites.

man, i’m really digging the new redesigned google font site.

#tasty

Leave a comment
Online/Web Web Design

Facebook: Death of Websites

Facebook’s Director of Product Design on the Death of Websites

For designers, it must seem counterintuitive that less diversity in online design would be better?

Once we operate inside of iOS or Android, those ecosystems have design rules that are laid out for us. If I use Google’s material design, it dictates that when you touch, a button rises up to meet your finger as opposed to depressing it. They figured out: “This is the way the system should behave.”

There are a whole bunch of design decisions that, by building on mobile, are taken out of your control. And that’s a good thing — if every designer had to worry about the way a button behaved, it would just be a lot of energy for not a lot of value.

For people, every app they’d open, they’d have to relearn how it worked.

Ultimately, it’s good that there are a whole lot of design decisions that have become standardised. But what that means is designers’ jobs are changing — what they’re going to focus on is how the thing works and less about how it looks. This is what enables you to create products that can scale to meet billions of people.

That’s different than the work we were doing in the mid-2000s. We were trying everything — this is the Myspace era — we were just going crazy. I think we had to go through that phase and I think we’re going to go through that phase with [virtual reality]. There’s going to be a bunch of things we’re going to try that will turn out not be the thing we end up with.

When it comes to web and mobile, we’ve passed through that and we’re in a phase where it’s about standardisation. It’s about creating consistent experience.

kinda feel like the title here was a bit misleading, because i just sat here and read through it… and actually felt like he made a few really good points… it has become more about standardization, with all the various frameworks / platforms / libraries out there nowadays — though i still feel there’s plenty of room for dropping a bit of design on your site to make it a bit more interesting, and hopefully not as boring… been hearing and reading for years now that “websites / blogs are dead”, and yet i’m still here… guess i’m just “old school” like that.

What do you think about the “ugly websites” trend? Is ugliness a way to rebel against the new, streamlined Internet?

There has been this rationalisation to a very common aesthetic — sites tend to look very the same.

I actually think that’s probably a good thing for people, because that sameness makes it easier to move from site to site to get what you need. You don’t need to reorientate yourself.

The ugliness thing is a younger generation of people who are now creating websites who are nostalgic for like, the wild west, geo-cities aesthetic, which they never experienced. And they have some version of it that they are putting out there.

What Erin Yogasundram is doing with Shop Jeen is a cultural riff. It’s pretty niche, but it’s cool.

i must confess, i almost went with a purposely ugly ass site design this last time around, but i just couldn’t do it.

#chuckle

2 Comments