Category Archives: Design

Attention Web Designers

Please stop doing the following.

Creating external links without a default target=_blank. You might be against it for whatever religious reason, but this doesn’t change the fact that people expect this behavior. I’m looking at you, Reddit.

Unnecessarily modifying the URL as you scroll through a page or highlight text. This makes me have to hit the back button 20 times.

Loading your title tags up with SEO garbage instead of my location on your page. This doesn’t help your SEO, and it makes tabbed browsing frustrating.

Infinite scrolling. Unless you can save the user’s position after they return to the page from clicking something, don’t do this. The user will have to scroll all the way from the top, wasting the user’s time and wasting your bandwidth even more.

Creating floating divs that pop up when you hover over text. I’m trying to read here.

Designing a website to be mobile-first without appropriately scaling up. This is just as bad as making a non-responsive website.

Needlessly using custom scrollbar solutions. These tend to break a lot and suddenly snap me back to the top of the page, or stop scrolling altogether. They also don’t scroll the way the user expects.

Using Hashbangs for AJAX crawling. That is so 2010. There are better ways to do this now.

Making black and white, animated on hover, circular cutouts for your About Us photos. Good lord, this is overplayed.

Outsourcing your blog to Tumblr. This is tacky. And what’s the point? Are you trying to anger the Google Gods? Or has Rails backed you into a corner with bad WordPress knockoffs?

Using slow CDNs. It sorta defeats the purpose.

Requiring users to use an app or sign in with Facebook. I leave every time, no exceptions.

Populating the meta keywords. No search engine since the 90s uses these. All you’re doing is giving the competition a glance into your marketing strategy.

Skeumorphism. No more cloth and wood backgrounds.

Java and Flash. The world really needs to move on now.

Fantasy Healthcare

I have an announcement to make: I placed 3rd in the Robert Wood Johnson foundation’s Games to Generate Data Challenge. I have been secretly working on this project for most of the year, and now that it’s over, I can talk about what I’ve been building.

Fantasy Healthcare is a game that allows friends (in the Wisconsin area for this version) to create their own healthcare provider dream team and pit it against other friends and players online. The provider data and provider names are 100% real, but the doctor/department names have been changed to protect the innocent. The idea is that players will better familiarize themselves with providers in the area, while also learning which providers perform best in certain areas.

The interesting part of all this is how it all got started. At my public sector job, I joined up with a group that was looking to enter the Games to Generate Data Challenge as a team, but alas, government red tape (and lawyers) prevented this from happening. However, since I was a contractor, I was able to take an idea of my own into the challenge and see how far it would get. It ended up being a good enough idea to place in the Top 5, so from there I developed the game on my own.

Fantasy Healthcare is written in HTML5, Canvas, CSS3, Javascript, jQuery, jQuery Mobile, PHP, and MySQL. The back end stuff runs on a Linux server. The Canvas stuff is also cross-compiled to native iOS and Android platforms for the efficiency and fast performance you expect from a game. I did it all myself, so considering I competed with some large teams and some big industry players, I guess I did pretty well for 3rd place.

So besides winning some nice prizes, I also got a trip to Boston to attend Games for Health, and a trip to the Health 2.0 Conference in San Jose to see the winner announcements. First off, Ben Sawyer’s Games for Health project in Boston was a wonderful experience, and I wish I were able to go again. There are really some amazing interactive ideas out there ready to transform the industry. As far as Health 2.0, I also had a great time hanging out in the Valley, drinking local brews and eating some In-N-Out Burger. The 1st and 2nd Place winners were totally deserving of their prizes, each having some fun-looking and interesting games, and I sincerely wish them all the best with their endeavors.

While I was in San Jose I got caught up in the government shutdown, but that’s a story for another time.

The Robert Wood Johnson Foundation and Health 2.0 are doing some wonderful things right now to provoke and promote bleeding edge ideas in the healthcare industry, so be sure to visit their challenge site.

What’s next for Fantasy Healthcare? I’d like to publish the apps and expand it to more cities. This will take some time I don’t have at the moment, though. In the meantime, it is available here for anyone to play with.

Icon Fonts: The Vast Wingding Conspiracy

Icon FontsThe latest trend in web design is to use fonts to do render glyphs, in place of the img tag and the still-elusive SVG. I’m sort of on the fence about this, although I recognize there are definitely some good reasons to do this. Instead of blathering on about theory, let’s go to the chalkboard, shall we?

Positives:

  1. Less messing with Photoshop and/or sprite sheets
  2. Load images faster
  3. Advantages of infinite scaling
  4. Advantages of CSS (shadows, hover, etc.)

Negatives:

  1. Limited to the glyphs in the font
  2. Limited to font limitations (no color, no texture, etc.)
  3. Bad semantics
  4. Potential for bad 508
  5. Potential for bad SEO
  6. More verbose than img tag
  7. Potential to cause your site to suffer “Wingding Syndrome”
  8. Necessary to load an external font, including hundreds of icons you won’t be using
  9. @font-face, and the baggage that comes with it

Hmm. You know, I was actually meaning for this article to sing the praises of icon fonts, but I’ve suddenly changed my mind. Instead, we’re going to have a fair and balanced look at the above. So without further ado, let’s pit the two technologies against each other…

Logistics
The less dealing with Photoshop for icons, the better, right? Well don’t forget that you’ll also have to deal with font creation software instead (gross) unless you want to use stock images for your icons. That’s fine, except we went down this route in the ’90s with Wingdings 1-3. I still have nightmares to this day.
Also, don’t forget you will need to store and serve several copies of the font. The IE version, FF version, Chrome version, mobile version etc.
Winner: images

Browser and Loading Time
In theory, vectors will load faster than a sprite sheet, right? Here’s the thing. A font is a giant sprite sheet already… well, a vector sheet, but a sheet nonetheless. You might have a 20k PNG representing your icons, but you might have a 60k font representing tons of glyphs, 90% of which you will never use. But let’s say the font is smaller. So it’ll load faster, right? No. Custom fonts can take a few seconds to install, etc. before being applied to the website. In the meantime, you’ll have random letters sitting around you page while it waits for the browser to do its thing. Is it worth it?
Winner: images

FX Advantages
What has always sucked about CSS is the lack of support for image effects. You cannot add drop shadows and change colors (at least, not in the way you’d expect). With glyph fonts, now you can. So I’ll concede to fonts for this, but the question I want to leave you all with is… why do you need to be able to have hover effects and shadows on your glyphs?
Winner: fonts

Scaling
This is another brilliant argument for font glyphs. Img tags are bitmap only at this point, and adding retina resolution is a huge pain and there is no best way to do it.
Winner: fonts

Semantics
You need to add an icon to your page, which is more semantic: <img src=”email.png” alt=”Email:”> or <span aria-hidden=”true”>&#x25a8;</span> ? Yeah. And what do you do about those with visual impairment?
Winner: images

SEO
How do you think Google feels when it has trouble reading your website? You know that friend of yours that uses Outlook and the smiley faces turn into letters in your email client? J
I know you can use “content:” in CSS, but that’s not going to save you from Google, and “content:” is something you should always strive to avoid using. And it may not be happening now, but eventually black-hat SEO companies could start using ROT-13 rotated fonts to hide stuff they don’t want Google to necessarily see. I don’t think they’re doing it now, but there’s that possibility they’ll spoil the fun.
Winner: images

This reminds me of when we were using Flash and Javascript to render custom fonts 6 years ago. It’s overkill. Wait for SVG, and in the meantime, just deal with bitmaps unless you have really good reason to use this method.

In closing…
Don’t. Just don’t. Unless you plan to build an obnoxious website with tons of glyphs all over it.
Which you shouldn’t.

Project Workflow for Lone Developers

I’m not ashamed to admit I’m a designer-developer hybrid. I worked as a graphic and web designer for several years. I did back end development professionally for 4 years. I’ve done UX development professionally for 3 years. I love design and I love coding, and I love doing both at the same time. So it’s not uncommon for me to build entire web applications by myself. This practice gets a bad rap because developers are typically awful designers, and vice-versa, but for me it comes naturally.

I’ve been designing since age 6 and programming since age 11, and never quite knew how I could merge those talents. Since kindergarten, everyone always told me I would grow up to be an artist, but I wanted to be a programmer. Once the time came when I needed to choose a major, I chickened out at the last minute and chose multimedia (I hated math and still do). Back in 2001, CD-ROMs and VB were king, and Director and Flash were still in their heyday. That was how you built interactive applications. But slowly, web and mobile took over this space, and bridged the gap between design and development. I was lucky to be caught in the middle of that merge.

Throughout the years, I’ve typically been unmanaged throughout the web development process, since the stuff I do is usually highly experimental. Because of this, I’ve developed and refined my own process for development that seems to work great for me. Your mileage may vary, but I’ve found this workflow to be the winning combination, especially for projects where I’m going it solo.

Lone Developer Workflow

  1. “Liveframing”, what I call wireframing with HTML. Create a preliminary GUI with no design, just basic structure. I prefer this to wireframing in most cases… honestly, I’ve never been a fan of wireframing tools, and I avoid them whenever possible. It depends on the project though.
  2. Mockup. Based on your liveframe, use Photoshop to design what the final website will look like. You want to throw a bone to the client to keep them busy awhile, but you also want to put a vision in your head of what you’re working towards.
  3. Database schema. This is the third thing I usually do, for two reasons. One, after building the GUI I have a pretty good idea of what data I’m collecting and how it will be used, and second, I want to do this before starting on the back end. I usually use Excel or pen and paper to draft a schema, and then build the actual tables as I need them. The schema will always change from start to finish, but usually I nail it with 90% accuracy. And usually, I end up needing fewer tables than I had originally schemed.
  4. Back end development. Once I have a barebones liveframe and a schema, I’m ready to start back end development. Of course I start in the planning stages, figuring out which pages do what, how the API will work, .htaccess considerations, etc. and generally decide how communications will be coded. Communication formats will also be decided in this stage (XML vs JSON, data structure, REST considerations, etc.). Then, I start coding, and hook the liveframe up to the code as I go for testing purposes.
  5. UX development. I start elaborating on the liveframe by adding the necessary Javascript and jQuery.
  6. Test, test, test. As I move through my prototype on the front and back, I add or modify decisions for both sides. The pieces slowly come together. The client should be engaged during this time to verify the project is functioning under the proper requirements.
  7. Once the project is 90% solid, then I start slicing the front end. The liveframe’s header, footer, and CSS will be replaced with the new design, and if you did it right, it should pop right in.
  8. Beta and QA testing. This is probably something you don’t want to do yourself. Find friends willing to test it out.

Behold, and Impart My Learned Wisdom Unto Others

Bartek’s Law of Coworking
Nothing says the digital era like piling people into a downtown office building with tons of talent and zero ideas.

Bartek’s Law of Private Sector Employment
Make the boss love you. Make management respect you. Make HR fear you.

Bartek’s Law of Project Management
“Man, it’s really hard to find developers. Let’s add more esoteric technologies to the stack and hopefully that’ll make hiring easier.”

Bartek’s Law of User Experience
“The client called. They’re worried that by simplifying the design, you’re confusing the user.”

Bartek’s Law of Software Engineering
The only career path where more money gets you fewer of the opposite sex.

Bartek’s Law of Google Image Search
No matter what the search term, you will always end up with furries in the results. Once you see the first one, you’ve reached the end of relevance.

Bartek’s Law of Design
Apple sets all trends, because that’s what your boss and clients want. If that means ushering in the return of early ’90s hypercolor, then so be it.

Bartek’s Law of Web Design
Take any random picture, blow it up and add 1000% gaussian blur. Add some aquamarine and coral buttons. Congratulations, you made a website.

Bartek’s Law of IT Jobs
Everbank has had those jobs posted for 4 years now. Ignore those, they have no clue who they want to hire.

Bartek’s Law of Front End Job Hunting
The search term you’re looking for is not “frontend”; it’s not “front-end” either. The standard search term is “ninja“.

Bartek’s Law of Modern Web Development
Yo dawg, I heard you like having to learn 5 languages. So we put languages on top of those languages.

Bartek’s Law of IT Careers
You can live where there are awesome jobs. You can live where life is relaxed and easy. But you can’t live in both at the same time.

Bartek’s Law of Search
If you’re searching the web and can’t figure out why Google is giving you unusually awful results… you’re accidentally using Bing again.

Bartek’s Law of Photoshop
“Client: My 11 year-old nephew knows Photoshop. I’ll have him design the website to save money.”

Bartek’s Law of Art School
Congratulations, you graduated. Hang that piece of paper on the wall and commence to starving.

Every year, it goes something like this…

CEO: I just read in Forbes that…

2013: …all websites should be written in Scala. Let’s rewrite our Java to Scala, by next week.
2012: …relational databases are dead. Let’s migrate 30 years of data to MongoDB, they’ll be around forever.
2011: …all websites should use responsive design. Make it pop.
2010: …all websites use Ruby now. Let’s hire Rails experts; there should be tons of them, and willing to work cheap.
2009: …millennials only buy through social media. Let’s make a Tweeter, whatever that is.
2008: …SEO is the future. Let’s buy tons of backlinks, spam up blogs, and set up microsites. No way this plan will fail.
2007: …all websites should be web 2.0. Let’s market ours as web 3.0!!
2006: …all websites should use Flex. Let’s rewrite our entire website in Flex, but don’t use any Flash.
2005: …all websites should have a blog. What, you mean we have to pay someone to write articles for it?
2004: …all websites need an RSS feed. Content? What’s that?
2003: …IE won the browser wars, and no other browser will ever compete. Let’s only write for IE now.
2002: …ASP.NET is going to revolutionize the industry. This is how all web applications should be developed.
2001: …we need a Flash landing page to sell customers on our branding. Make it so.
2000: …e-commerce is the future. Let’s sell pet food online and advertise at the Super Bowl, this is going to be HUGE.

C’mon Apple, get with it

Why am I not surprised that the Apple Developer website got hacked and account info stolen? Their developer site has always been, to me, a horribly engineered site that made very little sense and was extremely restrictive. It seems painfully obvious the site wasn’t thought out before it was built, so I’m not at all surprised it was hacked; I’m only surprised it took this long. In all fairness though, things were starting to look up for that site, since they finally added a way to transfer an app from one company account to another. Why it took them 6 years, I don’t know.

While we’re on the subject, why do I get the sneaking suspicion that Jony Ives’s bizarre iOS 7 design is about to be the next trend in web design? If neon colors and gradients become the latest thing, maybe I’ll just call it quits, hehe. But anyway, I guess the skeumorphism thing has been overplayed as of late, especially by Apple.

Other than that, I dig the new iOS. Definitely a step in the right direction, at least.

Down with CMYK!

All you graphic designers out there, I’m about to rock your world. Your professors, art directors, and magazines have been telling you wrong all these years about CMYK. Here’s the real scoop.

Starting your print documents in CMYK is bad. Really bad. It’s like starting a web image as a JPEG. Let’s think about this.

  • CMYK has an vastly inferior color gamut to RGB
  • CMYK takes up more file size
  • RGB is considerably faster at processing
  • Most Photoshop filters and adjustments don’t work in CMYK, or work unpredictably
  • If you want to adapt this image for web later on (which these days is likely), you’ll wish it was in RGB
  • Besides gamut restrictions, you’re not getting an accurate portrayal of the actual printed output, anyway
  • These days, your output probably won’t even be in pure CMYK, but hexachrome, which can probably do more with your RGB file than with CMYK.
  • CMYK therefore is lossy, causing irreversible damage to your future workflow

The truth is, CMYK mode isn’t much more than a tool to help the designer visualize the restrictions of CMYK. I suspect that CMYK probably holds a slightly better gradation of colors even if the gamut is clipped, but then again, if it’s that big of a deal, you could use 16 bit RGB instead. But even though it’s a helpful tool, it’s also destroying any future prospects of your image being used elsewhere in the real world. Simply put, print is dying and web is much more important these days, so it seems fair to assume that you shouldn’t prematurely limit yourself to a CMYK color space, for fear of shooting yourself in the foot later on.

So then, what is CMYK good for? Well, again, it’s like a JPEG. You should save it in that format once you are completely done, and do not overwrite your source files. In other words, keep the RGB PSD file, and render your CMYK print version to PSD or TIFF (TIFF is a dying format though these days). CMYK should be the last thing on your list before saving for print.

“But converting my RGB image to CMYK will make my image all muddy looking!”
Only if you’re a beginner designer and don’t know what colors can and can’t fit the gamut. And at any rate, it’s more or less an optical illusion; It’ll be fine when it’s printed–it wouldn’t have been able to use those bright RGB colors anyway, so get over it.

“But this will affect my subtle gradations and other visual benefits of starting in CMYK.”
Look– your end user and/or client won’t notice these subtleties, and they won’t give a crap either, unless you’re designing for National Geographic, or an art magazine, or something. Use 16 bit color if you want slightly better gradients. And anyway, you actually can visualize how it’ll look in CMYK without actually using CMYK mode. Check out “View → Proof Colors” in Photoshop. You’re welcome. 🙂

“But I have to know how it will look in print!”
Do you think web designers need to know how JPEG artifacts or PNG color banding will look while they’re designing the image? Do you think they mess with color profiles or calibration to try to get the colors exact on every web browser? Those would all be an exercise in futility. Your colors will never be 100% the same for everyone. We know this, and it doesn’t bother us. It shouldn’t bother you either.

I know the truth hurts, but these days there is almost never a good reason to start in CMYK. Don’t sabotage your workflow. Work smart–use RGB and only switch modes towards the end. Or better yet, if your final work is in InDesign, you can let InDesign do the final color conversion instead of doing it to every image in Photoshop.

Happy Photoshopping.

Presenting my latest project, SoulTrade

As you might have guessed, I’ve been working on another app these past few weeks. This represents only 2 weeks of work, so overall I’m okay with how it turned out. Without further ado, I present:
SoulTrade (soultra.de)
(available for iOS and Android!)

What is SoulTrade? It’s a market for buying and selling souls, basically. Yeah I know, it’s a pretty stupid idea, but I mostly just wanted to flex my design and development muscles with some of my free time. I really didn’t care what the website did, as long as I got to use PHP/MySQL/jQuery/Javascript/HTML5/CSS3. So ironically, this project really has no soul, heh.

Technical details: SoulTrade was written by me in 2-3 weeks with a PHP/MySQL back end using my own framework. The front end was designed by me in Photoshop and Dreamweaver, and of course utilizes HTML5/CSS3/Javascript/jQuery. The website is running on a LAMP stack, while the mobile version is using jQuery Mobile and Phonegap.

Enjoy.

…mwahahaha….

Why I won’t buy Windows 8

This won’t really be anything you haven’t heard already, but I feel like I really need to voice these concerns.

I know I don’t speak for every UX designer out there, but there seem to be a lot of troubling aspects of the Metro UI that I’m having a hard time justifying. Notably, eyeflow. When tiles are laid out in a linear fashion, the eyeflow is simple. Left to right, top to bottom. That’s what we do in Western Civilization; it comes natural. But when you have small-sized icons, medium size, large size, double-wide, etc. as tiles, your brain can no longer read in a linear fashion. It sees the big one first. Then maybe the medium or doublewides. Then the small icons. What order do you see them in? Who knows. Maybe the colorful ones–but wait, they’re all colorful. Your brain will fight with your eyes over what should be seen first, which creates a stressful experience for the user.

So then the question becomes, what was Microsoft trying to accomplish in order to improve upon the system that was already in place? Good question… I’m still trying to figure that out. Some icons are big. Some are small. I can see that maybe you’d want the most used icons to be big, but does it really matter that much? Or at all? Does it make sense for one icon to take up the same real estate of 8 others? So then, the colors. Great, color coding. I assume that blue could mean web, orange could be productivity, green for games? Nope. It’s entirely random, apparently. So then what is the point of having candy colored buttons strewn all over the place in various shapes, sizes, and colors? I’m just not following it.

The other issue I have is with their obvious end goal, which is merging the user experience across phones, tablets, and desktops. It seems like it would be a worthy endeavor, and perhaps it can be done, but that doesn’t mean that Windows 8 is doing it right.

Let’s take my personal use cases. On my smartphone is Android 2.3. It has a desktop. With same-sized icons. It has a drag-down bar with a list of recent programs and notifications (the equivalent to a taskbar and icon tray). It has a button at the bottom that slides out a list of applications (you know, a “start menu”). I’m able to do everything I need to do, using this system. At home I have Windows 7. It has a desktop, same-sized icons, a taskbar, and a start menu. The experience is virtually identical, besides the lack of notification list and a different approach to multitasking–but that’s okay, it makes some sense that I would have different needs on a desktop versus smartphone. But in the case of Windows 8, it seems to want to force a unified “jack of all trades and master of none” experience across all devices. No device has just icons. No device has a start menu. All implementations are based on utilization of touch. On a desktop, this is especially silly. Who’s gonna sit there with their arms in the air to use Excel, Word, and Visual Studio? Who needs the calculator taking up their entire 22 inch monitor? And to top it all off, providing both a Metro mode and classic mode to create an utterly segregated, confusing mess of an experience.

It appears to me that Microsoft went the same route as iOS in the reimagining of Windows (the dreaded “let’s just do what Apple is doing and call it innovation” move in Silicon Valley). iOS also has merged the start menu into the desktop, for instance. I would imagine the reasoning behind this was for simplicity’s sake, and lack of screen real estate. For the record, I disagree with the decision. A desktop should be for human-organized shortcuts and unfiled folders and documents. A start menu should be your entirety of installed applications. It seems like Microsoft is trying to copy this idea, the idea being, why have both when you can merge the two? Because it creates a mess, that’s why.

I remember when Windows 1-3 was using windows of grouped icons (that’s why they called it “Windows”) on the desktop instead of filing them in a start menu or just having the commonly-used desktop icons. When I was a kid and Windows 95 came out, I was upset at first, but then I realized I didn’t use most of those icons, so they didn’t need to be taking up my desktop all the time. Apparently, Microsoft has done a complete 180 and decided to pile everything back on the desktop again, so what was 20 years old is new again. Now my beloved desktop experience is gone, and instead I’m being forced to use a tablet experience. Instead of a few icons on a clean desktop, I have every program I own and barely use, mixed with live gaming icons I don’t use, next to a web browser I don’t use, with social networking tiles that are completely useless, and other garbage I just plain don’t use. It doesn’t take a genius to realize that banking your flagship product on popular smartphone and tablet interfaces is going to turn out to be a huge mistake. The quicker Microsoft admits this, the quicker they can get back to selling Windows again.