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 Architecture Tutorial – Lesson 4

If you’ve followed the first three lessons, by now you have a good handle on your site’s goals, who the audience will be, and what kinds of content and functionality you’ll need. It is now time to define the site’s structure, which is the foundation on which you build everything else.

Think of the site structure as a skeleton that holds the body together. Without it, your site will be a jumbled up, confusing mess – kind of like an amoeba. Do you want an unorganized, hard-to-use, crappy site? No! You want an evolved, highly structured, and easy-to-use site that can walk upright on its own two legs.

After creating a good site structure, everything else will fall into place. It can’t help but do so! A well-designed structure makes it easy to define a navigation system, and the two together make designing page layouts and templates a snap. This is the last step before you can actually get into building things.


Continue Reading “Information Architecture Tutorial – Lesson 4″ »
File Under: UI/UX

Information Architecture Tutorial – Lesson 5

Visual Design

By now you know a number of things about your site:why you are building it, who the audience is, what will be on the site (i.e., the content), and how the whole thing is structured. You are now ready to work on the visual design, which is often the most satisfying aspect of site design.

One of its main purposes is to provide users with a sense of place. They need to know where they are on the site, where they have been, and how to get to where they want to be. A good site structure combined with an effective visual design enables users to construct a mental map of the site.

The goal of this lesson is to take the site’s structure and map it onto the visual design. A number of tools are useful in creating the design. The first step is to make layout grids that define the structure and organization of the site as it will show up on the page level. Then design sketches will establish a general look and feel. Layout grids and design sketches together lead to page mock-ups, which in turn lead to the construction of Web-based prototypes.

At this point, you’ll need the help of graphic designers, art directors, and creative directors, as well as your production crew.

Continue Reading “Information Architecture Tutorial – Lesson 5″ »