Home Babes About

Category: Web Design

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!


(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!


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.

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.


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.


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.


Online/Web Web Design

The Internet’s 10 “Ugliest” Websites

The Internet’s 10 “Ugliest” Websites

Craigslist is one of the ugliest websites on the Internet. The home page is an indistinct wall of links and text, the site is tough to navigate, the postings are cluttered, and the design has barely changed in the past 15 years. At a time when websites are competing to offer the best digital experiences, Craigslist is the pinnacle of user unfriendliness. And that’s exactly what makes it brilliant, says Pascal Deville.

Deville is founder of Brutalist Websites, a site dedicated to the most frustrating design on the web. The site takes its name from the controversial architectural movement Brutalism. To some, Brutalist buildings are poetry in concrete; to others, they’re chilly monoliths. Web design, Deville argues, has a similar dichotomy. Here’s how he describes a Brutalist website:

In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design.

Appropriately, Deville’s website has some of the hallmarks of the content it espouses—a rudimentary layout, one of the most basic typefaces (Courier), an infinite scroll, and no tabs or ways to sort the dozens of blog posts.

i remember wanting… itching… so badly to redesign craigslist, but now after all these years? i think it’s brilliant and have to give them kudos for sticking to their guns… really is amazing just how little it’s actually changed.

Web Design

What’s Flat 2.0?

What’s Flat 2.0 and Why Should You Care?

Just when you thought you had flat design figured out, everyone has shifted to talking about Flat 2.0. If you never took the leap into designing a flat project, now is the time.

Flat 2.0 is easier to use because it combines the best of flat design with additional user interface cues to help you create website design that’s beautiful and functional. It’s also highly adaptable and works with almost any concept. Unlike some of the purest flat designed websites, Flat 2.0 combines elements of flat with subtle additions to enhance user-friendliness.

dunno why, but i usually can’t help but smirk smile a little bit whenever i see “2.0” these days… i mean, you know it’s lost whatever charm it had whenever you start seeing it in tv commercials, or some business exec / marketing chick dropping it in their company-wide blast emails.

i’m sure some of ya know what i mean.

The Future of Content, According to Facebook Instant Articles

Leave a comment
Site Related Web Design


not sure what it was exactly, but the other day i pulled up my site and it just felt a little… old… not like super dated or anything, but i just suddenly felt a little bored with it — it usually happens this way, and when it does, i’ll usually start thinking about it until something or a design idea just “clicks” in my head.

…and that’s exactly what happened a couple days back.

yup, so here’s the new blog design i whipped up.

this past thursday i started looking around on some of the popular wordpress theme sites, figuring that it’d be a helluva lot easier to find one that i liked and tweak it out… but after an hour or two of looking around, i just didn’t see anything that really grabbed me and i finally got to that “okay, fuck it” point… so then i grabbed my trusty paper and pencil to sketch some ideas out — might sound old school, but i’ll be damned if it’s not easier and faster to sketch it out with paper than firing up Sketch or Photoshop… i usually only go that after i got a good idea on paper, and really only if i / when i need them.

it’s been a couple years now i guess, and i’ll be honest… i’m really no closer to really getting and understanding all the ins-and-outs of WordPress… seriously man, i just grab either my last theme or one of the free stock ones that come with WP and roll up my sleeves… and start editing / modifying / tweaking it out until i beat it into what i want.

…and that’s exactly what i’ve been doing for the past 2 days.

anywho, figured it was time for a change around here and this is what i came up with… still probably needs some edits and various tweaks — it’s my personal blog, so i never really quite seem to cover all the bases or find every little “bug” since i’m usually moving pretty fast and just want to get all the main parts of the blog theme done.

hope ya dig!

Online/Web Web Design

Google: All Your Mobile Are Belongs To Us

Google’s Ambitious Project to Remake the Mobile Web

With widespread adoption of smartphones and tablets, more people are accessing websites than they ever. But that doesn’t mean that going online using a mobile device is always a pleasant experience.

From the sometimes excruciatingly long wait for websites to load on smartphones to the annoying ads that hog screens, surfing the web on a phone can sometimes be a chore. To fix the problem of slow-loading mobile websites and often obnoxious online advertising, Google is embarking on an ambitious plan to convince media companies and web publishers to alter the software code powering their sites.

Over the last three years, the search giant has been working to standardize the underlying software code that runs mobile websites. The idea is that if Google can convince website operators to switch to something more efficient, the speed of mobile websites will increase while letting web publishers add new features like messaging services and notifications.

have to say, google has been kicking some ass of late… and i absolutely love what they’re doing with ‘material design’ for both the web & mobile… hell, i was just reading about their new Firebase Analytics for mobile web/app development the other day.

good stuff, mang.

Leave a comment
Online/Web Web Design Web Development

What Front-End are you?

What Front-End are you?
About the Front-End professional

First of all, I want to clarify that this post is just my humble opinion. It is not the absolute truth, but wanted to share with you how I see the Front End professional. I will be very direct and objective.

Front-End has two ways: Designer and Development

Front-End Designer: is a professional that will care about all concepts of creation to User Interface. Knows HMTL, but knows very well CSS. He creates animations that has direct relationship with usability. UX is in his blood, knows about colors harmony, he has very affinity with layout creation tools… Some don’t like Javascript, others until that makes some things with jQuey, but the focus is on Design.

Front-End Developer: is a professional that will develop interfaces, as the designer, but Javascript it is what he loves. Knows accessibility, performance, JS frameworks, code tests, concepts of programming, and others. He code semantic HTML5, modular CSS and performatic Javascript.

Although knows CSS, he don’t has diference sense of Design itself. This professional is a Interface programmer.

What I show here with this definition is that although both sides are Front End, what differentiates a professional from another is the affinity he has with each area. So, logically, he will devote his time studying what enjoy: design or development.

Not wrong to think the guy is Front End and just know HTML and CSS. He can be very good at UX, knows how to create an interface that will take you where he wants, creates pages that convert, know design tools, he’s good at it.

I think the big problem is the term variable-Front-End. Sometimes we complicate things too — keep it simple, stupid — Want to work with Front-End? See what else has affinity and specialize in it. Just It.

have to say, i really do feel what he’s dropping here — i’m asked all the time what i do (for a living), and i often just say something like “i design and code websites” or “i try to make sites look good”.

but even at work, it’s sometimes hard to say what exactly you do… since if you think about it, just “front-end design” doesn’t quite encapsulate it all, y’know?

think my job title at Oracle is currently: Senior UX Developer.

yup, i guess that’s me.

Leave a comment
Online/Web Web Design

New Instagram Logo

Instagram just changed its logo in a big way

One of the most recognizable app icons of all time is no more: Instagram is making big changes to its logo.

The Facebook-owned photo-sharing service updated its iOS and Android apps Wednesday with a new, flatter design and multicolored app icon. Instagram’s other apps — Layout, Hyperlapse and Boomerang — also have similar redesigns.

Instagram’s new design swaps the Polaroid-inspired camera with rainbow accent for a brighter, more minimalist look. (Update: Of course everyone is already freaking out about this.) Layout, Hyperlapse and Boomerang get the same treatment, though those newer apps — most of which debuted years later — already brandished more modern design.

The reason for the big change, according Instagram’s head of design Ian Spalter, was to bring the design more in line with the aesthetics of the app’s users. “The Instagram logo and design was beginning to feel, well… not reflective of the community, and frankly we thought we could make it better,” he writes in a post on Medium.

have to say that i’m digging the new Instagram logo… definitely a lot more slicker, more modern than the old one — though at the same time, the old logo was almost iconic.

makes sense when you see the whole family of apps, though.


Instagram’s New Logo Is a Travesty. Can We Change It Back? Please?

Leave a comment
Design Web Design

UI Inspiration

UI Inspiration: Site Interactions

Designed by Ben Clide

Designed by Jim DeBrock

Designed by Vladyslav Taran

Designed by Leo Leung

Designed by Barthelemy Chalvet

some of these UI interactions are pretty slick, mang.

Hilarious “Enter Your Phone Number” UI/UX Fails


Leave a comment
Web Design Web Development Work

My Dashy Hackathon Project

not sure if i mentioned it, but we had another hackathon yesterday… and yeah, as usual, it kinda wiped me out being that it’s an all day / all night affair… ended up working on a couple things, one being pure design and the other was coding, but hot damn it all came out really nice! sorta proud of myself here, if you don’t mind my saying so… heh… can’t show some or most of it, but this is something i “cheated” on a bit by working on it before the hackathon — it’s an idea i’ve had rolling around for awhile now, and just wanted to get a static prototype up and running to show peeps what i’m talking about.

basically, it’s a native OSX app that loads up a web-app, much the same as Slack which we use at work everyday and i love it.

so here’s some screenies of the prototype, which i’m calling “AddThis Dashy” at the moment.

Dashy Login Screen

Dashy Dashboard

can’t see it in the screenshots, but the login screen has a looping video background of some of the guys at work… then i went ahead and designed / coded up a mockup dashboard that’s also responsive (naturally).

think it all worked out really nicely, and can’t believe i actually got this thing working! freak’n awesome… oh, and special thanks to my buddy Brad, who helped me get this whole thing working in the first place — you rock dude!

it’s a little basic at the moment, and i have a lot of ideas and features i want to add, but i’m stoked just to get the whole thing working so peeps could fire it up on their macs at work… only caveat being that it only works on El Capitan right now.

anywho, just thought i’d share ;)


Leave a comment
Web Design

Every Fucking Bootstrap Website Ever

stumbled across this the other day and it cracked me up, mang.

p.s. funny thing is, it’s not bad at all really.. lol


1 Comment
Web Design

Over 200GB For Sketch?!

How Sketch took over 200GB of our MacBooks

Maggie, one of our great designers, kept getting a full hard drive warning on her machine. Our first thought was to unsync all of her big dropbox folders; but that didn’t solve the issue. We weren’t sure what was causing the problem, so I went on a quest to find out where all this disk space was going!

Finding the issue
We started off by running a simple daisy disk scan, here are the results:

Daisy Disk shows the Macbook’s hard drive filled up for 406GB, though it is only able to account for 50% of the gigs. The Users folder takes up almost all the space, with only 136GB. So where did all that other space go? I figured Daisy Disk’s default scan isn’t as administrator, so I opened up a terminal window and started looking around and quickly found this mysterious folder in the root directory of the hard drive: /.DocumentRevisions-V100. It was HUGE.

The folder was a whopping 212GB, hidden away on the hard drive.

You can easily find out how big your Document Revisions folder is by running this command in terminal, it will prompt you to enter your administrators password. The characters from your password won’t be visible as you type it, but I promise it is working! When you’re done hit return and the folder’s size will be printed!

sudo du -sh /.DocumentRevisions-V100

I quickly figured out that none of our developers were having this issue, so clearly this was a design related problem. Not every designer has a folder as big as Maggie’s; some of our designer’s folders were only around 2GB, which is totally fine.

The Cause
DocumentRevisions-V100 is an internal version control system introduced by Apple in OSX Lion. It basically saves a copy of a file each and every time you save it. Apple uses it for TextEdit, KeyNote, Pages, Numbers, and some other programs. Developers can also interact with this API in their apps. Basically this system is a very big database file that keeps track of all your changes to documents and allows you to revert back to any versions. When you think about it, it is really an amazing system.

thought i’d better go ahead and blog this one, since it was news to me..!

holy shit man.

1 Comment
Online/Web Personal Web Design

When Did You Start Coding?

When did you start coding and why?

We asked 25 world leading web development experts about when they started coding – and why?

We asked 25 world leading web development experts about when they started coding – and why? Their stories might inspire more people to start coding. Here are the answers we got! (Add your story below)

1. Derek Sivers

“In 1994 I started making HTML websites. Just HTML. Not really programming.

In 1997 I made cdbaby.com – but it was still just HTML.

In 1998 I learned some PHP because cdbaby.com was growing and needed to be automated.

And then I just kept learning. Still learning every week. Right now learning Elixir and Elm.”


this one caught my attention, probably because reading through some of these felt like it mirrored my own experience… i never went to school for “web” stuff, but more-or-less just fell into it by accident (or luck?)… mid-90s i was working in the tech support center at Nasdaq, and my boss called me into her office one day and asked me if i’d create a new “portal” on the company intranet — didn’t know HTML or anything, so i fired up Netscape 3 and started to view-source… and that’s how i learned, by reverse engineering web pages and figuring it out… took a little while, but i remember finally finishing up the little support portal on the nasdaq intranet, and how happy / proud i was… actually, i remember having all these other groups suddenly asking me to help them create their own portals.

that’s pretty much how it all began, and as they say… the rest is history.