Home Babes About

Category: Web Design

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.”


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.


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!


(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