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

Mulders Stylesheets Tutorial – Lesson 1

Building Web pages with HTML is like painting a portrait with a paint roller. Only truly determined and tenacious souls can achieve the exact result they want. It’s just not the right tool for precision and flexibility.

Anyone who’s used HTML for more than a week knows it isn’t a very effective tool for making Web pages. That’s why we sometimes resort to making large GIFs when we want just the right font or layout. That’s why we’re forced to use convoluted table tags and invisible spacer GIFs to push things around on a page.

It’s ridiculous, really. Our code gets too complicated, our GIFs too numerous, and our final pages too bandwidth-heavy. It’s not exactly optimal Web page construction.

But in late 1996, stylesheets quietly entered the scene. Officially called cascading stylesheets (CSS), it was an elegant cousin to HTML that promised:

  • more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
  • a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
  • compatibility across browsers and platforms; and
  • less code, smaller pages, and faster downloads.


Despite lukewarm support from many of our favorite Web browsers, CSS is starting to make good on these promises. It’s transforming the way we make Web pages and is the cornerstone of Dynamic HTML.

We’ll spend the next five lessons taking a tour through the land of stylesheets. You’ll learn the basics of how to create and use cascading stylesheets within your Web pages as well as what’s possible with fonts, typography, colors, backgrounds, and positioning.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 1″ »
File Under: UI/UX

Photoshop Tips for the Web

It’s difficult to think of an electronic gadget that’s changed the way I look at the world more than my digital camera. I held off from buying one at first, but after a year of researching and one particularly hefty tax return from Uncle Sam, I made the plunge. Roughly US$500 later and I was staring down a convex lens at my life. Suddenly, every sight was a picture waiting to be taken! Every scene a perfect composition begging to be snapped up and stored on a memory card. After some advice from my pro photographer friends and a whole lot of practice, I officially became the annoying guy with the camera at the crowded party.

The truth is that digital photography is actually rather difficult. Not the taking pictures part, that’s easy. It’s the creation of a perfect end product that’s the sticky part. Taking a raw JPEG or TIFF file and crafting a digital image that looks beautiful on all the different monitor types is a process that transcends art and borders on science. Some photos turn out almost perfect from the get go – never underestimate the power of good natural light! – but most of your snapshots are going to need some gentle persuasion in the right direction before they are ready to wow the New York gallery scene.

Don’t panic, because Webmonkey is here to impart advice on creating that sharp, bright, and well-balanced image that you can show off on your site, your blog, Flickr, Zooomr or anywhere on the web. We’ll be using some tools and techniques that will be familiar to you if you’ve ever spent any time messing around in Photoshop. I’ll also be covering some basic rules about file handling, monitors, and display options.

Continue Reading “Photoshop Tips for the Web” »