brainiacsatwork.com

Several sites are beginning to get more and more visits for its very deep library of articles, information and resources on web design today.

One of them is Smashing Magazine. Another site has popped-up on my always visit list, and which I subscribed to is Mashable. Excerpted (and edited) below is from an article in Mashable – Web Design Toolbox: 130+ New Tools to Make You a Better and Faster Designer.

Edited because I went through all of the 130+ sites listed (yes it was tiring) and in this article, have kept only the ones that matters or should matter to breed of web designers who on a daily basis strive to achieve the balance of creative design and front end engineering.

2 strong criterias behind what gets removed and what don’t from the original list is that first, the sites must be free and no registration required. And second, that it must be an engine that is useful to the creative designer as the end user. Most importantly in the end, even if these sites don’t make you a better designer, they most definitely will make you a faster web builder.

[Addendum] Besides removing items that don’t matter from the list, I have now added in more collections from my delicious bookmarks.

CSS and Code Design Tools

YAML Builder
Easy to use YAML (Yet Another Multicolumn Layout) XHTML/CSS site layout builder.

960 Grid System
Streamline web design production workflow by using commonly used dimensions in grid layout format.

Occassionally, when prancing around the Internet I’d find some sites that would make me say to myself “cool site”.

Sometimes, in rare times, I’d then come across website design that can make me cry. Not because that they are nice, But because they are f******g nice.

Recently, a post Smashing Magazine made me do just that. It posted an article by Torley Wong’s on great user interface ideas. (Link to original – “Creative User Interfaces in Modern Web Design” here).

I decided to check all of the websites out. And most of them really truly inspired me that I had to share with the team here. I’ve replaced the author; Torley Wong’s article with mine below. Feel free to visit the original article and read up on his thoughts. Some sites have also been omitted from my updated version as I believe, after checking the works, they did not really fit into the context of user interface design from the perspective that I am writing on.

Hope you enjoy it. And to the design team working with me, hope you are all truly inspired to go create stuff as good as these.

OkayDave

Dave Werner’s website is not new. It’s been around since 2006. And I first saw it was back then. Yet even till now (now being 2008) it is still innovative and ahead of the curve. What is more surprising was that he had created this site as part of his portfolio piece for his graduation. Yes. His student work kicks more ass than most industry veteran designers combined.

Dave Werver

Vimeoland

Vimeo is cool. Vimeo with HD is cooler. Vimeo with VimeoLand is coolest. Vimeoland is like watching a cartoon show with characters going around speaking in videos. This is probably experimental and a fun side project by the staff. But heck, it’s a way to show videos to the short-attention-span, visually oriented group.

vimeoland

Article below has everything to do with what we do and the quality of work we produced. I’ve seen many web design but am always amazed at seeing beautiful websites that marry content and style very well.

Noticed taht in the top 10 websites, the design is focused on bringing the beauty of the content forward. Style is minimal, yet when doing so, it made the site so much more visually striking.

1. guardian.co.uk

2. BBC – Homepage

Here’s a quick feature list of what current web design style consists of:

• Simple layout
• Centered orientation
• Design the content, not the page
• 3D effects, used sparingly
• Soft, neutral background colours
• Strong colour, used sparingly
• Cute icons, used sparingly
• Plenty of whitespace
• Nice big text

It’s been a while since I last visited Razorfish, and now it has a brand new spanking name, and an amazing portfolio to boot.

Check it out, I believe you won’t regret it. Oh yeah, the background are live camera feeds from different countries.

Catch the fish here

Smashing Magazine just released results of an extensive survey of web registration forms of Top 100 websites where forms should matter. Extremely useful to us now as we start rolling more and more websites every few months or so.

If anything, these are our benchmarks that any web form design must meet.

Extracted and condensed are the survey results below.  Actual links (with nice graphical charts) to both parts of the survey follows right after.

Here it goes. Web Form Design Pattern Best Practices Part 1…

- “Sign Up” is most popular link title to form (40%)
- The header is the most popular place to put the link (59%)
- Placed at top right hand corner (76%)
- Simplified design when compared to page layouts (61%)
- Benefits of registration are presented next to form (41%)
- One-page forms (91%)
- Using bold to highlight title of input fields (62%)
- Right aligned labels closer to input fields (41%)
- Only 3 to 5 mandatory fields (50%)
- 6 to 8 mandatory fields (30%)
- Zero optional fields, only collected after sign-up is complete (62%)
- Less than 5 optional fields (98%)
- Vertically arranged forms (86%)
- Do not have asterisks* to indicate mandatory fields (78%)
- Progress indicator (9%)
- Simple web form with as little fields as possible (86%)
- Grouped and divided by white space (69%)
- Divided by borders (22%)

Web Form Design Pattern Best Practices Part 2…

- No hover, active, focus effects in use (84%)
- Static help support placed obviously next to input field (57%)
- No hints (33%)
- Error messages at the top – no fields highlighted (30%)
- Error messages highlighted at form fields – no top message (29%)
- Both top error message and error fields highlighted (25%)
- Real-time AJAX validation warning or error (22%)
- Colour Green used to indicate success, and Red to show failure (97%)
- Not necessary to ‘confirm email address’ by second input field (82%)
- Necessary to confirm password (72%)
- Captcha not in use (59%)
- Cancel button not used (92%)
- Left-aligned submit button (56%)
- After successful sign-up, load non-mandatory fields or tell friends (45%)
- After successful sign-up, recommend places to go or link to click (33%)
- After successful sign-up, basic thank you page with no extra links (4%)
- After successful sign-up, redirect to homepage (2%)
- Using tab indexes (99%)
- ‘System Talk’ tone and manner – Login, Password, Location (38%)
- ‘Business Talk’ tone and manner – Your name, Confirm Password (38%)
- ‘Conversational talk’ tone and manner – Tell us who you are, etc (22%)

Too much text! IToo much to read. Don’t understand. I know.

So here’s the link to both parts – Part 1, Part 2.

Ejen Sinar is basically Sinar fm on-ground team. It’s similar to hitz.fm cruisers, Skuad ERA Avanza, mixfm Roadrunners, etc. We have came out with a fresh new look for their special page in sinar.fm where we have decided to use a comic look-and-feel for the whole section.

In case you don’t know already, UI Design Patterns are not creative design patterns or illustrations. In web practice, they are a set of solutions that happened as a result of best practices of design layout.

UI Design Pattern is a strong marriage of Information Architecture (IA) and User Interface (UI) turning a set of User Experience (UX) goal into simple intuitive interfaces.

Here is a collection of design pattern library from UI-Patterns.com. Great help for when designing intuitive next gen user interfaces.

Let’s be real. There are many things in life we’d all prefer to be original in. And then, there’s also other things which we’d happily follow. Web design icons are some of them. It has to look fresh while looking like the usual. We’ve heard it before… An arrow is an arrow but it’s a different arrow right?

Here are links to icons sets that help you shorten design and development timelines. Starting with…

Stock web icons
Fineicons – Nice general sets of icons. Not much design to it but most definitely worth a visit and a download. For icons that serves it’s purpose, fineicons is it.

Proving that when you’re on a roll nothing can stop you, resident designer cum blogger cum photoshop extraodinaire Rames’s web site at rames.blogspot.com once again picked for a feature.

This time, into Smashing Magazine. Read full article here. Dive straight into point 5 – Hand Drawing Used Extensively and you’ll find his work among other greats.

Is it time for a Joshua-Rames collab on Brainiacs at Work skin design?

Okay, first I espouse Smashing Magazine. Then I said Mashable. Now here’s one more – Six Revisions. A web design blog of sorts by Jacob Gube. Similar to Smashing Magazine (and Brainiacs at Work), it’s a repository of the wild west of web design. Something odd, something nice, something beautiful.

Go visit – Six Revisions

hitz.fm is the official station for Coldplay Live in London on June 16, 2008. Win an all expense paid trip for 2 to go watch Coldplay perform in London! This promo is to promote Coldplay concert in London and Coldplay ringtones from Hotlink.

If you visit or travel to Denmark don’t forget to stay at this hotel.

Each room is an individual piece of art. From wacky comical styles to strict graphic design. From fantastic street art and Japanese Manga to simply spaced out fantasies. You will find flowers, fairytales, friendly monsters, dreaming creatures, secrets vaults and…

There was a time when I had only been working as a designer for about a year. So, when a friend of mine came to me with a client who needed some freelance work to design his company’s Product Catalogue, I was happy to take it on.

http://www.astro.com.my/euro2008

After weeks of hard labor and sleepless nights (really!), we have finally launched the site for EUFA EURO 2008 on Stadium Astro. With our amazing google mashup for the team profiles and a couple of widgets to boot.