Archive for the ‘UI/UX’ Category

File Under: UI/UX, Visual Design

Get Free Design Advice From Not Pixel Perfect Yet

The web is long on opinion, but short on informed, constructive criticism.

Thank goodness then for Not Pixel Perfect Yet, a group of web experts who will critique your website’s design in public for free, offering helpful suggestions and advice on improving your site’s design, readability and usability.

The group is made up of 10 or so Czech web designers who are skilled in graphic design, UI/UX and search optimization.

You submit a link to the group by
e-mail (feedback@divdesign.cz) telling them what areas you’d like them to critique. If your site is chosen, they’ll post a screenshot of your design to their Facebook page. The different members of the group will all chip in and provide comments about your font choices, your use of CSS, the way you use images, your logo — anything you want to improve. They pick one site per week.

All of the discussion happens in the open on Facebook, and since the group is public, anyone can join the group and participate in the discussion. Even better, everyone on the web can view the Not Pixel Perfect Yet critiques, making the group a valuable learning tool for budding web designers or anyone struggling with basic design challenges.

A couple of caveats — first, the designers are all Czech, so the responses are usually written in Czech. But the team members speak English and can comment on your site in English if you ask. For the critiques that are written in Czech, Google Translate does a decent enough job of getting the point across. If you’re using Chrome, the browser will offer to translate the page automatically.

Second, if you just look at the Wall posts, you won’t see much beyond a few sentences about each design. You need to click over to the “Discussions” tab to get to the meatier comments.

Facebook is probably not the best forum for the NPPY mission. The public flow of comments is nice, but you have to be a Facebook member to comment, and the tabbed interface is wonky. Some folks on Twitter are asking the group members to move it somewhere other than Facebook, and NPPY leader Nikol Kokesova says she is considering starting a blog.

You can see a full list of the members at A Digital Moleskine, where blogger Milan Cermak has posted links to NPPY’s Twitter feeds, and where I originally learned about the project. There’s also a NPPY Twitter list you can follow.

See Also:

File Under: CSS, UI/UX

Video: Top 5 Mistakes of Massive CSS

Huge CSS files can gunk up your page loads, creating annoying wait times for your readers and (if things get really bad) even driving people away before the page fully loads.

The trick to avoiding breaking your user experience is to make your CSS as lean, clean and fast as possible. There are tried and true techniques for speeding things up, like using Gzip, or serving one or two files instead of dozens. There are also poor optimization methods you should avoid.

Today, we bring you an informative video from the recent 2010 O’Reilly Velocity conference on how to optimize CSS while avoiding some of the most common mistakes developers make. It’s especially useful for those of you with big CSS payloads. The first speaker is a little dry, but the fun picks up when Nicole Sullivan takes over about five minutes in.

See Also:

File Under: Mobile, UI/UX, Web Apps

Test Your Websites in iPad Peek, Save Yourself $500

ipadpeek

Want to see what your website looks like on the iPad? Get a load of iPad Peek, a new web-based emulator that shows you how any site renders on the new Apple device.

Click on the black frame above the browser to switch between landscape and portrait modes. You can also test your web forms by mouse-typing on the virtual virtual keyboard.

iPad Peek has a few limitations. There’s no touch scrolling, ads produce pop-ups, and embedded Flash videos and objects will still render inside the emulator even though the real iPad doesn’t do Flash. So, it’s basically a Webkit wrapper set to a fixed width and height. But, it does give you a pretty close approximation of how your site will look on the new shiny.

Also, Mashable has instructions for changing your Firefox user input string to that of the iPad:

Type “about:config” in the address bar, click the right mouse button, select New – String, and name it “general.useragent.override”. Then enter the value “Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10″.

See Also:

File Under: UI/UX

Information Archetecture Tutorial – Lesson 1

Why’s Information Architecture So Important?

Information architecture (also known as IA) is the foundation for great Web design. It is the blueprint of the site upon which all other aspects are built – form, function, metaphor, navigation and interface, interaction, and visual design. Initiating the IA process is the first thing you should do when designing a site. This series of articles describes specific methods and processes for developing a site’s information architecture.

Clients sometimes view the development of an IA to be impractical, both in terms of the time it takes and the skill needed to do it effectively. But this mentality is slowly changing. A good IA is incredibly effective, and knowing the basics of the IA process can save both time and money in the long run. Also, you don’t need to be an expert to use it to your advantage.

This series will demonstrate how easy and powerful the IA process can be. We’ll present two ends of the design continuum, which can be thought of as either the difference between developing a small and a large site or the difference between having little time and having lots of time to design a site.

Each article presents a portion of a design document. Upon completing this series, you will have the template for a complete IA design document; the record of the decisions made in designing the site. It serves as a road map for the site’s construction. Additions and revisions are made easier by the presence of this document. Oh, yeah – and clients and management love this stuff.

Also, just about everyone these days is a proponent of ease-of-use. Well, ease-of-use starts here. It’s practically guaranteed if you have a solid information architecture at the outset.

Continue Reading “Information Archetecture Tutorial – Lesson 1″ »
File Under: UI/UX

Information Architecture Tutorial – Lesson 2

Define the User Experience

After figuring out why a site should be built, the second most important aspect of designing information architecture is determining who the audience is. This is an invaluable step that many people fail to grasp. Many sites do not even take into consideration who will be using them. How can you design a site if you don’t know who’s going to be seeing it?

Some people think an audience is defined by the technology it uses to access the site. This, too, is missing the point. That a user visiting the site uses a 28.8 modem is only a small part of the audience definition. A true audience definition consists of who the users are and their goals and objectives. Scenarios, or stories, are useful in visualizing the audience.

Oftentimes, a single department or group in a company takes the lead in putting together a Web site. The result is usually a site focused on that group’s needs, which ignores the needs of everyone else. For a long time, MIS departments were responsible for putting together their corporate sites. These sites were utilitarian, and neglected important departments, like marketing. It is your job to prevent this from happening on your site.

Defining beforehand the user experience you seek establishes a clear, well-documented definition of your audience, and it helps in understanding how users will react to the site.

To get started on this stage of the IA process, just as with defining the goals, you need to figure out who will be involved and how much time you will have. Generally, the same people will be involved. However, you probably will change how you weigh each person’s opinion. For example, the marketing department should have a good idea of who your audience is. If that is the case, you’ll want to listen to them more than to others.

Defining the audience takes less time than defining the goals, because you have already established how you will be working with people – whether formally or informally – and you are more familiar with asking them questions and getting responses.

Continue Reading “Information Architecture Tutorial – Lesson 2″ »