Addorn

Almost Single Page

Slate published an interesting article on Google’s Master Plan. When I got to the bottom of the article, I noticed they had a multi-page article breadcrumb.

Oh, one of those.

Like many ad-driven websites, they split the article into two parts because it will get them more ad impressions. Okay, whatever. But what’s this?

slate-single-page

Notice the option to click “single page”. But in a two-page article, what is the point of that, since I’d still be performing the same act of clicking to another page? Obviously, this functionality is probably automated and it’s in place for heavier articles on Slate where there would actually be a benefit (anything more than three pages).

But it clearly should be disabled for two-page articles. Maybe it’s not Slate’s fault, or maybe they’re just not interested in modifying the plugin or the code used to create that functionality.

As a side point, I clicked around to many different recent articles on Slate, and couldn’t find another multi-page piece. So this doesn’t seem to be a regular thing.

I guess the lesson for UI designers is: Make sure every bit of functionality in your apps and pages has some purpose or benefit to the user experience. Clearly this piece of redundancy doesn’t.

Goodbye, CSS Galleries

What ever happened to CSS galleries?

I always thought the term “CSS galleries” was a bit of a misnomer. I have no idea who came up with that phrase, but it really makes little sense. Those galleries were not just showing off “CSS”, as the name implies. But I guess because of the CSS boom that was happening around 6-7 years ago, the name seemed to fit and nobody had a problem with it.

Also, I don’t think it’s likely that all the websites that were submitted to such galleries had beautiful CSS. I’m sure many of them were as bloated and hacky as the worst of them. And I’m sure the JavaScript on those sites was mostly awful (in the head, lots of HTTP requests — kind of like WordPress, but without WordPress).

But I have to admit, on numerous occasions in the distant past, I’ve Googled CSS galleries to get inspiration or even screenshot-worthy content for the odd roundup article that I would write (I didn’t do many of them). Many of the sites featured on such galleries were very nicely designed. They often featured strong typography and abundant use of images, so they were great for certain articles.

It’s good that the industry seems to have moved on from the relatively brief gallery craze. While other websites can serve as inspiration from time to time, a design should never be based solely on something you saw in a gallery. I’ve done that sort of thing before, and it rarely translates into an effective design.

Evidently these kinds of websites still exist. I didn’t bother to check to see if many of them are still maintained, but I’m pretty sure they aren’t as highly trafficked as they were about 4 or 5 years ago.

We’ve moved on, and that’s good. Let’s keep putting content first and design second and we’ll be fine in the long haul.

And if you don’t remember CSS galleries? I envy you.

Everything is an Ad

I find it somewhat amusing when people assume that by using an ad blocker, they are actually blocking ads. Nothing could be further from the truth. In fact, the growth and proliferation of ad blocker usage in browsers today is having the opposite effect. It’s creating more ads.

Yeah, technically, it’s true. When you use ad block software, you’re preventing a web page from displaying annoying flash ads, animated banners, pop-ups, audio ads, and similar. But all that means is that companies are finding more cloaked ways to promote their products.

Just about everything in the web design and development industry today is an ad, in some form or another.

  • When you visit an open source project on GitHub started by a freelance developer who wants to ‘put his name out there’, that’s an ad.
  • When you visit a blog post by a web standards guy who links to one of his buddy’s recent book projects, that’s an ad.
  • When you visit the newest article by a CSS blogger who links to his for-sale video course, that’s an ad.
  • When a well-known tech company releases an open source project and uses their brand when promoting it, that’s an ad.
  • When a book author tweets personal updates while casually mentioning his upcoming book, that’s an ad.
  • When a web standards advocate that works for one of the big browser vendors interacts with the community and contributes to open source projects, that’s an ad.

I don’t like the fact that even attractive, unobtrusive, non-animated banners that are clearly marked as advertisements are being blocked, while all of the above actions are mostly treated as ‘being a constructive member of the community’. What I’ve described above is treated as run-of-the-mill, even though it’s not that much different than banner ads. But there’s one key difference: The stuff above is not marked as ‘advertising’.

I prefer to browse the web and be able to easily differentiate between a shameless promo and a genuinely curious blogger creating something because they enjoy it and want to contribute to moving the industry forward. Unfortunately, the way things are now, we cannot differentiate those things.

So go ahead, block all the flashing banner ads you want. But it’s not coming even remotely close to blocking all ads.

A Revolutionary Blog Post

Is it just me? Or does it seem as though every new modern hipster-tinged app, device, or innovation is dubbed as “revolutionary”? I like the word, I really do. But it needs to be reserved a little more for times when it really does mean something.

The word is probably in most minds associated with the American Revolution, but it actually was in use as a term to characterize social or political changes long before that. In modern times it has a broader, less significant meaning. But I think it’s now been watered down far too much due to overuse.

I think it’s cool when we use a historical term to encapsulate what we are doing as creatives. But when every new product that gets released is described as “revolutionary”, the term loses its value and impact.

Yes, some of these products have impacted our lives, our productivity, and sometimes even our overall health and well-being. But in most cases, using that word becomes nothing more than mind-bait (that is, “link bait” for the mind). The word draws you in, it makes you feel warm and cozy, as if buying the product is going to make you part of something almost religious. But, truthfully, it’s become nothing more than a cheesy tag line incorporated to increase sales. And, as has been pointed out before, Apple might be the guiltiest party, having, well, revolutionized the use of the term.

So what’s the solution? Be truthful when marketing what your product seeks to accomplish. Yes, we all want our thing to be the next big thing. But your product will only be revolutionary if such is the end result, not if it’s in your body copy.

On Simplicity

There are two areas we can look at when talking about simplicity: The product itself and the way it’s presented.

Often we hear about concepts like minimalism, reducing clutter, generous use of white space, and so forth. Those are design principles often applied to websites, UIs, and promotional materials. But unless you’re doing something like creating WordPress themes, those aren’t your products; they present your product.

Let’s consider craigslist. Yes, the craigslist UI is fairly minimalist, it’s relatively devoid of clutter (albeit in an anti-design sort of way), and there’s lots of acceptable use of white space.

But what makes that website work is the simplicity of the service: Post classifieds, read classifieds. Not a lot more to it than that. And so it works. The same design applied to a more complex product would not work nearly as well. In fact, I would argue that no design can make a complex product work as well as something as simple as craigslist.

I guess that’s why I find that in my development life, single-purpose stuff is so much nicer to use. A jQuery plugin that does one thing is often more memorable and useful to me than a utility library that tries to do too much (jQuery itself, of course, being an exception).

Now think in terms of visual design. You can showcase your product on a minimalist, clutter-free website, but if the product itself is too complex and has a steep learning curve, the design will likely have limited success.

There are certainly many exceptions. In addition to jQuery, CodeKit comes to mind. I wouldn’t necessarily say that’s a simple product, because it does so much. But it fills a huge need in the development industry, so it works well. Photoshop might fall into that category, too.

So again, I’m not minimizing the importance of applying design principles to our websites (or other media). But if the product the website presents is too convoluted and difficult to use, no amount of promotional material utilizing white space or minimalism will change that.

Thus, simplicity starts and ends with the product or service itself, not the way it’s presented.

Can We Ditch the Pinterest-Style Grid Trend Yet?

I’m not really sure who officially started it, but it seems that Pinterest made it famous. I’m talking about the current trendy grid/masonry layout that everyone seems to love.

Well, I’m officially declaring it an anti-usability pattern that has fewer advantages than we think. The websites that quickly come to mind that are using this design pattern include:

That’s just a few I came up with off the top of my head. If you do a search for the concept of copying Pinterest, you’ll see lots of round-ups of Pinterest-like clones and even a discussion of how this has affected web design.

Overall, I think this style of layout is not appropriate for a lot of websites. Many of the sites that use this layout are doing it badly and (I believe) it will have an adverse effect on quality of traffic. All the sites mentioned above appear to do nothing to solve any kind of design problem with their grid layout other than squeezing more content above the fold.

I don’t think it’s appropriate for Google+, because Google+ is competing with Twitter, which presents its content in a visually linear manner, rather than the mentally cumbersome grid. No, I don’t expect Google+ to be a Twitter clone, as that would somewhat defeat the purpose of what they are trying to build. But I don’t think it helps to just copy Pinterest and hope it all works out (not that they did that, but it seems like it). Google+ is a usability nightmare, and one of the reasons has to do with the visual overkill that it creates with the grid layout.

SitePoint is, more or less, a web design blog. They too use it, I believe, to their detriment. I believe the linear blog layout is much easier to digest, and encourages better quality reading. Yes, the grid format will get you many more scans and maybe even more clicks. But I think the quality of readership in proportion to traffic goes down when this type of layout is used on a standard blog like theirs.

On Digg and Cut 4, I can deal a little more with the grid format. In those environments, the goal of the website may be to encourage the more superficial browsing like someone might do on something like Pinterest. But personally, I’d still prefer the linear format even for those.

That’s why Twitter and Instagram have been so successful, and will continue to be.

Eventually I expect this trend to die out and designers will realize that, over the long haul, the linear format is much easier to digest, and encourages a higher quality of user.

Your Website is Your Product. Your Logo Is Not.

It’s almost a sure thing. You show a first draft of a website design to a client and the first thing they say is “Make the logo bigger.” I completely understand why a client would respond this way. After all, it’s their brand, their colors. They’re proud of it. They don’t want some silly designer minimizing how they visualize their brand.

But it’s important, as designers, that we communicate to the client a simple fact: Their logo is not their product; their website is their product.

Whatever your client’s product is, that is what should be front-and-center, receiving the most focus. If it’s a blog, then the content should be the point of focus, not the logo. That’s why good companies are willing to hide their logo for the sake of keeping the content first.

Take another example, the world-famous Polo shirts by Ralph Lauren. The classic polo shirts are the most well known and are what makes the product effective and memorable. The one with the big logo is just plain ugly and, in my opinion, devalues the product, changing the overall perception of it.

The website as a whole is the product. If the website is featuring something in particular (a service, an app, or a specific product), then that is what should be the point of focus that draws the user’s eye, not the logo. If the user wants to know whose website this is, or who made this product, they can glance at the top and see the logo. It doesn’t have to be huge, it just needs to be elegant and fit within the context of the website’s design and overall purpose.

Fundamentals of Creative Communication

I’m reading an old article on A List Apart by Andy Rutledge called Contrast and Meaning, which, before getting into the meat of the content of the article, lays the foundation by defining communication fundamentals.

I think it’s great to think of design elements in this way, especially for someone like myself who prefers writing over designing. Andy’s post divides these fundamentals into two categories: vocabulary and grammar.

The vocabulary consists of the things you see, that have definite form and visuals: Colors, lines, textures, etc.

The grammar consists of things that are seen, but aren’t as visually formative: distribution, contrast, harmony, balance, etc.

For someone like myself who has zero formal design education, this is a great way to help me visualize and categorize better what is on a page. I think most of us get into the habit of focusing far too much on the vocabulary of a design, and not nearly enough on the grammar.

After reading that article, I’ll definitely be thinking differently about the things I design in the future.

I Can’t Create

I honestly can’t stand the thought of creating a new design from scratch. It’s bad enough that I’m not a formally educated designer (last I checked, buying design books on Amazon does not constitute a formal design education), but on top of that, I just don’t have the ability to innovate.

Almost everything I’ve created aesthetically is always shamelessly ripped off of something else I’ve seen. Granted, over the years I’ve grown as a designer to some extent. For example, I understand now that every design element on a web page should solve a specific problem or serve a useful purpose.

I also know that content analysis, marketing strategy, and similar work should precede all design work. A design should always be based on a full consideration of the whys, hows, whens, and whats of a company, product, or service.

But even after all that, I still feel like my designs will copy others’ styles too much.

The truth is, I find it hard to create, that is, to innovate in the area of visual design. It’s not an easy thing to do. Even when I was a kid, when I drew pictures (which I was okay at) I always copied my drawings from something that already existed. I rarely just drew from memory or created out of nothing.

But I suppose almost everything is created with some kind of background or inspiration, so I’m probably not alone in feeling this way.

But when you look at the amazing stuff being created by different designers on Dribbble as well as stuff showcased on various galleries, it’s tough not to feel inferior.

Now I’m off to read a website brief for a new client project, and decide if I will design it myself or outsource it to someone else. Unfortunately, it looks like the budget on this one will not allow me to outsource it, so, like it or not, I’ll have to create.

Welcome to Addorn

This is my new blog, called Addorn. I normally write about front-end code on Impressive Webs, a blog that’s been running since 2008. On this new blog, you won’t see a single line of code. I’m reserving this for design principles, UI/UX design, and more personal reflections and opinions on design and usability in general.

My posts on Addorn will be based on things I’ll be learning, much like those on Impressive Webs. I believe some of the best articles written are those where the author is writing about something that is new to them. Therefore, as always, I won’t claim to be an authority on the subject I’m expounding upon, but I will merely share what I’ve learned in the hopes that others will find it as interesting and/or inspirational as I do.

Thanks for reading and I hope you enjoy Addorn.

Copyright © 2014 Addorn

All posts by Louis LazarisUp ↑