The Halloween curse seems to be over and we are back on track again. We are all very sorry for the downtime, but now we are back and kicking again. Come visit us!

Marius Roosendaal

Stylegala's comment:

It’s all in the details. And the details is just what Marius Roosendaal website has. The site isn’t flashy, there’s no need to be. The site isn’t filled with fluff. It’s just his portfolio. But what you’ll find is that this site has that little extra something that sets it apart. Like I said before it’s all in the details. The major one being the two different styles you can view the site in. One style being the day view while the other is night. What particularly stuck out to me were the colors schemes for each view. The Day view uses a nice cream with accents of red and blue and the green to highlight the portfolio piece. It’s a very welcoming color scheme. The night view doesn’t stray far from the same approach. Using mostly shades of brown with accents of red gives a nice “homey” feel. Another aspect that I also enjoy is that it’s a one-page site with everything you need to know about the site easily displayed. Now some might not find the “night version” very accessible since since the contrast is not very high. But the option to switch the styles is always available. But like I said in the beginning, the site isn’t flashy or shiny or big. It’s a beautiful site with just the right touch that really makes it great. While you’re there, check out Marius’s portfolio he’s a very talented designer.

read more »

Mozilla Store

Stylegala's comment:

What's not to like about the new Mozilla Store?
The tagline says it all "Support Mozilla. Get Cool Stuff!", that's something I can go along with.

A cheerfully casual and loosely gridded design, with a tangible paper and inked-up lightly worn look that is easy on the eyes. There's no sales pressure or hype in this design. The focus on community building is present in the design, and the store sites interactive features. Picture yourself sporting some of the casual wear or gear with a story to tell, and you just might find yourself in the Community Spotlight bragging on your own design skills and web standards superhero status.

There is a nice blog write-up on the redesign of the Mozilla Store by John Slater, Mozilla's Creative Director. John has covered many of the features and focus of the new store site, thanks John.

The curious thing is why the good folks at Nobox.com have designed such a user-friendly piece of work for Mozilla, while their own site remains flash-based and much less accessible.

If you have any comments on the design and/or it's code, please let us know what you think.

read more »

Cravattificio.com

Stylegala's comment:

This website is simply gorgeous. From the outset it's clear you're looking upon the result of many hours labour by a seriously talented individual/team. Rarely will you see a site encompass as many features as this, and yet still retain its clean, minimalist form. That alone, as you probably well know, is a tremendously difficult goal for a designer to achieve.

At no point whilst browsing Cravattificio.com does the site ever feel bland or boring. Everything is placed exactly where it works best; from the text resizing and print buttons, to the colourful masthead images that work so well in contrast to the largely monotone branding and content. Don't worry if you don't speak Italian either; the site has also been made available in English, French and Spanish.

A major brownie point here goes to the excellent navigation demonstrated. All the page links can be found at the head of each page, elegantly categorised under three clear headings 'Who we are', 'Our work', and 'Contact us'. And for those golden surfers out there who tend to get lost easily whilst shopping for their formal attire, the site also provides a crumb-trail navigation to boot. But again, at no point does this site ever feel cluttered.

The main content has been well thought out, jumping seamlessly from a three-column layout on the homepage, to two-column layout on interior pages. The masthead image also shrinks on these interior pages, allowing more space for the content above the fold. Various elements have also been added to improve the aesthetics and user experience, including Google Maps, sIFR, and a flavour of Lokesh Dhakar's Lightbox.

From a techie perspective Cravattificio.com doesn't disappoint. The markup, whilst not perfect, is still very clean, and the site validates to XHTML Transitional throughout. Semantics are in place to a good degree and the majority of the site works fine without Javascript. The only real problem I could find was with the contact form, which unfortunately does require Javascript to operate correctly - a little disappointing given that this is such an easily avoidable blemish.

Nevertheless, with all this said, and if you've taken the time to read this far, then I'd sum Cravattificio.com up as the best example of a great all-rounder website I've seen in a long time. It's a working model of excellent design that we can all be inspired by.

read more »

Rikcat Industries

Stylegala's comment:

From first impressions, Rikcat Industries is simply a beautiful site. It is the portfolio site of Rik Catlow, who also runs a site with his illustration work as well rikcat.com. What immediately sticks out to me with this site is the great use of whitespace. With the contiual rise of "web 2.0" it's great to see someone do something light and simple. Rik Catlow pays nice attention to the typography of the site, making it the main visual impact. Another great aspect, which some might not see is the simple color usage. Black, White and Gray works, I almost forgot how well it works. With this simple color scheme I'm not getting a sensory overload from all the colors. My only beef however is the portfolio page I would expect a little easier view of the portfolio work. Maybe making the pictures clickable as well. If you have time make sure to check out the portfolio which is very nice. But other than that it's a beautifully simple site. Plus it validates perfectly. Rikcat Industries is one of those simplistic sites that offset the often chaotic world of the web.

read more »

Taproot Creative

Stylegala's comment:

Taproot Creative applied a little TLC (tender-loving care) to their latest redesign. One of the main features, and most innovating IMO is the sites ambiance feature. The site offers a daytime design and a nighttime design look, depending on the time of day in sunny Tallahassee, Florida. The daytime design loads a flash background movie with lazy summer skies and song birds and wind chime sounds fill the air. The night design loads a clear and starry night background, with a far off cricket providing the night's concerto. The nighttime images are loaded from a separate folder, with the version being switched via a simple path call according to the time on the server clock, possibly done in the flash movies action scripting? This is all of the details on the dual design I could coerce from Taproot's Sean Doughtie, as I would love to implement something like this in my own designs. For image replacement techniques in some cases a background image is assigned, and then a paragraph with class="invis" is used, with display property none making the text invisible in the screen version. A print version style sheet would have been a nice addition to the site. At first I was not a big fan of the "What We've Done" page layout, the thumbnails are a bit ambiguous. But after clicking on a few of the items in the portfolio, and seeing the resulting page where they've done a nice job giving a brief overview for each project, I say bravo. The one screenshot tells the story use of the lightbox, fade-in - click - fade-out, is getting a bit stale, as seen on other sites. Finally I was somewhat impressed by the use of the curvy corners javascript on the contact form, it just looks so right-on with the design. The digitally rendered black and white version of the Taproot's physical address in this Southern locale, make me yearn to visit this multi-disciplinary creative studio. If you don't agree that this site has the right stuff to make the SG gallery, the please let us know why. Your comments are highly valued.

read more »

Team Viget

Stylegala's comment:

A new school of design is emerging, one that involves heavy CSS, javascript, and (x-d)html web standard skills. A new school of cutting-edge designers is emerging as well, one who is not afraid to dabble in javascripting to do some wonderful and amazing things, leveraging javascript libraries such as jquery, prototype and others to lighten the load. To be successful many things must be considered: • The target audience and their browser of choice. • Screen width and height available in pixels, with some of the best designs extending well beyond the 800 pixel width range. • Processing power –also figuring into the overall scheme of the design for optimal performance when pushing the envelope of what is possible. • Finally optimization and load order considerations for taking full advantage of the bandwidth available and smooth loading of all web site pages. Does it sound overwhelming? Sometimes it is! A team of players in all of these skills and disciplines is sometimes the best answer. Take for example the site at hand teamViget.com. This site was specifically designed to cater to high-end designers and developers, for recruitment purposes, as well as showing off the vigetLabs.com portfolio of recent work. The sliding navigation, when you have the processing power to view it as smoothly as possible, rivals any flash site out there, and without the inconvenience of sitting and waiting-watching the oh so nifty & annoying flash movie loading sequences, only to have to sit through another such delay after subsequent clicks –arghhh. What to look for on the teamViget site, if you are in a hurry? It is loaded chock full of sliding navigation mastery, showing and hiding divs mimicking pages, and easing transition calculations (provided by jQuery if you are keeping score). Click any of the list of "Top 5 Reasons" items on the piece of paper, and a div slides from the right into view, without any of the other divs before or after, just one smooth slide. How smooth depends on your processor power trust me, if it's not smooth check it on something with more power. Next once you've begun to marvel at the flash-like smooth horizontal sliding, click the "See Our Positions" green post-it sticky at the top of any of the inside pages, and presto-change-o the navigation on the page is now a vertical one. Go ahead click an available position. Now the really sweet part with a job opportunity open, say Web Designer for example, scroll down if necessary and click the << Back button next to the green sticky. The vertical and horizontal div movement simultaneously slides back towards the homepage. This dual hierarchy of navigation is what blew me away! There's more see for yourself.

read more »

Oxford Hotel

Stylegala's comment:

When first visiting the site I initially thought it was another flash website, but a further investigation shows that it is rather a great use of JavaScript to get the same effect. The site itself is clean and easy to use, which is a great place to start. The navigation is clear and easy to understand, even though I don't speak the language. The site uses a sliding door approach to display their content in an small space and on the same page. My favorite part of the site has to be the "Garlerie Foto" page. The gallery is really intuitive, fun to play with, and an amazing showcase for the Hotel. It is a little buggy without JavaScript enabled, but it still works. Even their form validation is cool. The best part of this site, for me, is that even with the cool features and nice uses of JavaScript the site still validates and even works without JavaScript enabled! A great job all around by the people that created it.

read more »

Dara's Garden

Stylegala's comment:

This website is both attractive and stylish, with a skilfully executed design that fits the wedding subject matter perfectly. Many of the layout decisions are well handled, and the code is generally clean throughout. I'd say Dara's Garden will likely please everyone; particularly the client who I’m sure will see a healthy increase in their online customer enquiries as consequence. Each page supports a masthead image that sets the pace for the two-column content that follows. Interestingly the main column occasionally splits into internal sub-columns of two and three which markedly improves the look and feel of the site's content. The typography is good, with a bold use of colour, font and size variations distinguishing areas of text, particularly the first line of each paragraph. Other nice features such as the gallery stand out too, with its internal sub-navigation and image selection design. Unusually the branding is located at the bottom of the page; its position beside the contact details works well. The markup, though somewhat disappointing in comparison to the design, is fairly clean bar the occasional inline JavaScript. Forms have been well put together with proper labels given to form field titles and server-side email validation. The semantic structuring could be better; many of the headlines are simply images, and there’s a notable void where should have been image replacement. Additionally there appears to be a small bug in the Internet Explorers with the homepage banner, though this is no biggie. I should also point out that the site came so close to validating it’s almost painful to see; just one small error at the foot of each page fails the entire site! However, all weighed up this is a beautiful website, and one which I’d be more than happy to present on my portfolio. If only the designer had spent just a little extra time tweaking some of the finer details I think we could have had a winner. Here’s hoping he/she will reconsider :)

read more »

Terralien

Stylegala's comment:

A living metaphor in illustration, "the difference between night and day". If you notice the foreground illustrations are clearly in the daytime, while the background presents a starry night... Looking for a reference on the site to this design enigma, and I couldn't find one. Is the marketing dept. over there at Terralien trying to slip one by us then? The layout is not your standard header, two-column layout, and then footer, or is it? There are some smart aethestic design choices that spice up the look of the layout on the various site pages. A super easy to navigate site, with a plain text navigation placed above the free-form light green header swoosh. The layout gives each element a good amount of space, and doesn't feel crowded in. This visual hierarchy gives the viewer the time to leisurely scan the content. Where some sites fall down with each item screaming to be seen, and all bunched together. A back-end for the site reportedly uses Radiant CMS with SimpleLog being the app of choice for blog duties, both built with Ruby-on-rails. A fun site and design by a decidedly geeky bunch of web developers and Ruby-on-Rails fanatics, the site offers the everyday "non-rocket scientist" the opportunity to launch the web application of their dreams by successfully teaming with the qualified developer/designer talent to make it happen. The site makes me want to buy-in to the dream of dreaming big, now if I only had that million dollar idea! If you are one of the ones who are lucky enough to already be "dreaming in code", you might still want these guys on your side to knock out a cool, clean, consistent design. Design credits go to John Long (design & coding), Matt McCray (illustration), and Nathaniel Talbott at the bridge. Ship's log Twenty-Oh-Seven, Five, Oh-One...

read more »

the Geniant Blog

Stylegala's comment:

I've been waiting for a while to make sure that when I submit a post it is worth it's merits. The Geniant blog is one that really stood out to me as something that would definitely be worth writing a review for. Upon the first impression of the site it doesn't scream blog! which so many sites do these days. The Geniant blog presents it's information much clearer and very easy to read format. The design is very well thought through. The color selections and typography are clean and very well defined. All around this is a very impressive blog. The topics are very useful...I've already added them to my RSS feed...and come from a variety of writers with some impressive credits in the online community. This site is a really interesting read and gets my stamp of approval...which is worth less than the paper it's printed on. What they had to say: ------------------------- Nicely designed standards-based corporate blog. Designed by Jared, IA by Garrett Dimon, and built by Nathan Smith.

read more »

ElectricPulp.com

Stylegala's comment:

The overall look of the site, leads one to think that the sites design may have indeed been created on construction paper and that mock-up scanned in. More than likely though, the designers dug deep into their photoshop "trick-bag" of brushes and plug-ins to create the carefree digital surrealistic look. The layout comprised of two major exstensive sections, the header and footer starkly contrast one another. Yet both seem to be sharing the common gray paper-like background, with the footer section having a wide brush stroked, dark gray texture. Giving the footer the look of an artistically rendered driftwood paneling. The extensive header potion of the page resembles a gray fibrous paper, complete with coffee stains. The header takes up various portions of the screen depending on the layout for that page, giving a variety of "looks" to the site. Pages with extended headers have two trees on the lower right, illustrated in abstract, with the roots of those trees extending as dotted-lines with arrows into the footer portion. Creating a certain connectivity & symmetry to the information in the header & footer, and creating a unified theme of growth + structure, albeit "earthy". The background for content when it is shown in the header section uses transparency to allow the background image to show through, grunging up things nicely. The "Pulpsters" have done themselves proud with this new earthy realigned-redesign. The site exudes a certain amount of cheerful charm & color, while focusing on just what ElectricPulp does, and does quite well. "They build websites that make you smile."

read more »

The Principles of Beautiful Web Design

Stylegala's comment:

I’m quite jealous of Jason Beaird. Not only because he has design skills that exceed my own, but also because he's the author of an impressive-looking new book, which this site is based upon. I was immediately attracted to the many qualities of this website. From its chilled blue colour scheme to the big friendly two column layout, it oozes quality. Even the unusual hand-drawn typeface works without detriment to the design. However the real “wow” factor becomes evident when you move your mouse over the navigation links, or click them. The unique visual prompts have been thoughtfully designed and portray a friendly, hands-on approach which I imagine fits the aura of the book like a tailor-made glove. Personally I would have removed the hover effect and left it to click only, but that's something and nothing. A peek under the bonnet doesn’t disappoint. Clean code and decent semantic structure runs throughout, and I couldn't see a shred of inline JavaScript cluttering the body markup, which is great. The site validates to XHTML Strict, although sadly the CSS just misses the mark. Overall thought a great, albeit small website that communicates effectively with its target audience.

read more »

Dept. of Spanish & Portuguese, UC Berkeley

Stylegala's comment:

The Spanish.Berkeley website does a great job of mixing bold typography with a minimalist approach to styling, and some beautiful randomly presented header graphics that are quite spectacular. I found myself sitting and clicking the refresh button, just to cycle through the header graphics, which were almost thirty some in number! Attention to details is evident throughout the site. For example the seldom seen noscript tags, which tells the user in a polite way "Viewing this site with Javascript turned off, or using an outdated browser will not make the content inaccessible in any way, but the visual experience will be somewhat less aesthetically pleasant". Oh how true, the aesthetics that make up this site are very nice indeed. Employing a variable fixed width layout that works remarkably well, see more on this design technique. The div structure breaks down nicely in almost any browser window size, down to an 800 pixel width setting. It is by using a series of div's, float left, and margin left techniques to name a few of the tricks incorporated in this type of layout, that it does it's magic. This smart school of layout is on my short list of must-try design techniques. Built on WordPress 2.0.2, with a host of additional features and plugins. This setup does a great job of allowing blogs and all sorts of input from school staff and students. All in all the site does a great job of mixing modern minimalist design, with a rich almost old world flavor and heritage.

read more »

GarrettDimon.com

Stylegala's comment:

Empty your head of any pre-conceptions and definitions of what a Stylegala website should be. Garrett Dimon’s redesign supports no ornate JavaScript effects, nor does it reek of flash-powered wizardry. In fact it features barely no design-related imagery at all. Yet the site works beautifully.

Give it more than a few seconds and it will soon come apparent that the content is the design. A bold headline immediately hooks those with an interest for the subject matter, whilst a rich variety of typographical variations keep the text looking fresh and clear, even on heavier pages. Images are neatly presented in grey surrounds, complete with caption, whilst small visual touches such as the emboldened first letter make the overall appearance feel very much like a homage to print, intended for the web.

This site may not have elaborate effects, but it frankly it doesn’t need them. The designer has put the content exactly where it should be - head and shoulders above everything else.

read more »

A-Film

Stylegala's comment:

I love this style of design. I love the way the site works for me. From an accessibility point of view though this site will not work well for many. Navigation is not consistent. Flash does not degrade when not available. Small text. That's the bad bit over. Now for the positives. Love the photography, love the overlay. Love the colors and use of light. The site is innovative from a design perspective even if it is not breaking new ground technically. The design style suits the subject material well.

read more »