Designing Content-First

If you’ve ever been to this site before, you’ll notice that I didn’t have a ton of content. That won’t necessarily change, but the content that is here should be accessible. The new site design focuses on getting the content I’ve got in your hands as effectively as possible.

Better Implementation

Because the old site was a quick hack from flat file over to WordPress, much of the wonderful functionality of WordPress was ignored. The search didn’t work, the 404 page was useless, and the things that make WordPress the best CMS in the world weren’t utilized. You’ll now find that the site makes use of many of the finer things WordPress offers.

Cleaner Code

Another artifact of the old site architecture was the code. The HTML and CSS wasn’t maintainable, as I’d quickly ported the code over from a custom flat file format. The new site code (conveniently available on GitHub for your perusal) is easier to maintain and takes advantage of  cleaner CSS, JavaScript best-practices, and more modular PHP.

Hopefully the site should serve me better moving forward, and that just might give me the little push needed to update more.

Happy 2012!

The post A New Design for a New Year! appeared first on Andrew Heins.

(quoted from sciencebuddies.com)

When I first got started with web design, I thought it was an art. That was bad news at the time because if you’ve ever met me, you’ll know I’m not the most artistic or coordinated person in the world.

In reality, however web design, and most web-oriented business, is more akin to a science. Thoughtful, analytical research will drive much better results than pure artistic talent will any day.

That’s not to say that there aren’t some incredible artists in the web design community, there certainly are, and I envy them, but the ability to draw is not required for our craft.

In fact, lifting the scientific method right off the pages of your high school textbook can be a great way to apprach web design.

1) Ask a Question

The question is your client’s business goal. Why did they bring someone in to build a website for them? More sales leads? Higher sales? Increased subscription rates? Launching a new product? There’s a measurable, defined goal that your client has in mind that defines “success” for the website you’re being asked to design, and your first job is to figure out what that is.

2) Do Background Research

Your next step is your market research. Look for best practices in their industry, talk to the target audience about what they want in a site. Do your research and find out how best to meet the needs of your client.

3) Construct a Hypothesis

Your hypothesis is your best guess at the first design. It’s your gut instinct, and it’s both good and bad news.

• For novice web designers, your gut is usually wrong, but you code it as-is anyway.
• For experienced web designers, your gut is usually close to the mark, but you test it to get it right.
• For veteran web designers, your gut is almost always correct – and you test anyway.

Don’t ignore your gut instinct. Gut instinct is your subconscious mind building connections and patterns of the various data points you’ve experienced so far on the web.

But like anything else, don’t rely solely on gut instinct. Good science is based on multiple points of documented evidence. The more you design, and the more experience you get in the field, the better your gut instinct will be.

4 and 5) Test -> Analyze -> Repeat

This is the heart of good web design. Here, you test your hypothesis against the problem from step 1.

Your tools for this are mockups and user testing. Do some wireframes. Put them in front of people that resemble your target audience, and carefully watch their reactions.

The question you’re trying to test isn’t “do they like the design?”. The question is “do they meet the goal criteria set out by the client?”.

Are they clicking the “Buy Now” button? Are they successfully getting through the shopping cart? Are they quickly finding the information they want? Are they successfully entering the contest?

Whatever that call to action was – the goal your client’s trying to achieve, that’s what your design has to accomplish.

Iterate. Build on your idea based on the feedback you receive.

While your first idea won’t always be right, it doesn’t mean that you’re a failure as a web designer. The standard by which good web designers are measured is results. Are you solving the problem your client gave you? If so, move on to step 6; if not, try again!

If it takes you five tries to get a design that works, that’s a success. You meet the goals laid out in Step 1, and your client is happy.

If you sell a client the first thing you think of and it doesn’t work, your client won’t be coming back.

6) Publish your Results

Once you’ve got a working design, build it. This part you should be familiar with.

Conclusion

Web Design is a beautiful science. You start with an idea, and create something beautiful as an outcome. A little bit of science can go a long way towards making that beautiful thing more successful.

Like what you’ve read? Follow me on Twitter.

The post The Mad Science of Web Design appeared first on Andrew Heins.

The best advice I can give someone who is just getting started in responsive design is to starting thinking responsively right from the start. Don’t create a site for one device and scale down, think about all devices the whole way.

“But that’s a lot of work!”, you say.

It doesn’t actually have to be. Here’s a simple hack I use for wireframing sites that I want to be responsive, and it doesn’t take much work at all.

Tools

All you need for this is:

1. a sheet of 8.5 x 11 paper,
2. a pen,
3. and if you’re a slightly OCD like me, you might want a ruler.

Step 1

Fold your sheet of paper in half height-wise. You want two fat rectangles, not two long, slender ones.

Step 2

Fold the closest rectangle up. When pressed totally flat, the paper should look like 1/4, 1/4, 1/2.

Step 3

Open your paper up, and it should look something like this:

Step 4

Rotate your paper 90% and fold it up lengthwise. We’re trying to create thirds here, so with the backside of the fold hidden and pressed completely flat, you should be looking at two equal halves.

Step 5

Open your paper back up again and use your pen to draw along the folds so your paper looks something like this:

You’re done!

Now you’ve got a single sheet of paper ready for simple wireframing that gives you approximate dimensions for Monitors, Tablets and Smartphones, while leaving a little space for a Site and Page Name, as well as some Notes!

The dimensions aren’t exact, but they’re close enough, and at this point, you’re just wireframing; you shouldn’t be focusing on details anyway!

Using a tool like this, you can ensure that non-PC devices are first-class citizens, and your responsive with purpose, not as an afterthought.

Do you have any cool tricks that help you with web design like this one? Let me know!

If you like stuff like this, you can follow me on Twitter and drop me a line!

The post Mocking a Responsive Design appeared first on Andrew Heins.

A Horrible Idea

Reinventing or reskinning the scroll bar isn’t exactly a new phenonmenon. Ever since Flash became a popular medium, we’ve seen lots of different attempts to make scrollbars sexier.

Altering the scrollbars creates two problems:

1. Scrollbars are a central part of the application
2. Scrollbars are normally uniform across the OS of computer.

Scrollbars are Central to the application

Scrollbars are a tool to give access to content that normally wouldn’t fit on the user’s screen. They’re particularly important because screen sizes vary so widely. Altering the design or function of the scrollbars leaves you in danger of discouraging or disabling access to some of your content – content that you presumably want people to see!

Scrollbars are uniform across an OS

For most applications, scrollbar design is set by the OS, not the individual application (similar examples would be the minimize and close buttons, or with window chrome). Changing scrollbars for your particular application or website can be confusing because your UI will be an exception. Even if your design is good, you’re causing an initial element of confusion with your alternative view.

Examples

Ubuntu 11 and the Unity UI

The most notorious example of Scrollbar UI gone wrong is Ubuntu’s new Unity UI. Linux distributions have never been particularly pretty from a design point of view, but Unity was Canonical’s attempt at stepping into the 20th century with UI design and bringing Linux closer to Windows and Apple in visual appeal.

Unfortunately, the scrollbars in the new UI are particularly bad. As a slim coloured bar with no iconography, they’re largely hidden when not in use. The pop-up overlay is particulaly confusing, as it moves with your cursor even when not actively engaged.

Google Docs

I’m a huge fan of the clean design of Google now that they’ve launched Google Plus, but the scrollbars in Google Docs are not effective. Similar to Ubuntu, they’ve gone for the slim coloured bar with no iconography. There are also no buttons at the top or bottom as with traditional scrollbars. These scrollbars literally disappear into the screen noise. Not good.

Gawker

Gawker – The only indication that more content exists…

Worst of all designs is the new sidebar of Gawker. Their idea? No Scrollbars. They made the decision that between the scrollwheel and cursor (assuming the scrollbar has focus), the user should be able to figure out how to scroll.

This is awful for many reasons, but the biggest of which is that the user has no visual clue that more content even exists. Unless you magically happen to scroll while hovering over the scrollbar, you’ll miss that content. That’s downright awful.

I think I read somewhere that they’re planning on changing it back, and I certainly hope that’s the case.

Conclusion

Look, I get it. Scrollbars are dull and kind of ugly, and everyone would really be much happier if they were just a little more elegant, but please, do your users a favour, unless it’s absolutely mission critical to your application to modify the scrollbars AND you’ve done a ton of research and user testing on the new design, just leave them alone.

Please.

The post Stop Screwing with the Scrollbar! appeared first on Andrew Heins.