private-co-branding-eres-chanel

I did not like the horizontal scroll on the site and felt this was a shortcoming since they used flash. Horizontal scroll? Really? If you’re going to use flash, step it up a notch. That’s possibly the reason why I had to refresh when I first loaded the site.

private-co-branding-eres-chanel

private-co-branding-eres-chanel

private-co-branding-eres-chanel

Other than being able to play with the site by erasing top layer to see bottom layer, I don’t see the point in this website. There’s no message, story or anything to tell me what this is about. However, if you’re a brand like Chanel, this is pretty much all you need.

Visit website at Private Co-Branding.

Navigation is easy to use and has great interactivity. It doesn’t get lost and most people often forget an active state that tells user where they are. There’s also a tactile characteristic of the design which is something even I should remember. It’s nice that on every mouse-over there’s a feedback. This design has some good subtle implementations of this throughout. These user friendly attributes of the design definitely exemplifies good usability.

SohTanka

It’s interesting how Soh Tanaka went a different route in terms of layout. With most portfolios they tend to have a banner area focusing on portfolio work. Was this way of differentiating or Soh Tanaka just felt introducing himself is more important? That’s the designer’s call.

I prefer seeing the work first before knowing who you are and where you live. In my mind what I want to know about you is really simple: can you design or not? Answer that question first and users would find their way to knowing more about you because your work is so bad-ass. I guess the point being made is that I feel his awesome portfolio is like a third-wheel.

SohTanaka

This design generally lacks balance to me and it has to do with layout. The columns on the main page have such short widths that the short lines of text is what contributes to that lack of balance. I think that’s really highlighted when you crop this specific part of the design as shown above. While the design does have good alignment, it has some inconsistencies in it. The 2 green lines drawn in image above highlights this. You’re probably not seeing what’s my problem but to illustrate further, see the image below:

SohTanaka

What the 3 boxes shows is how I see things chould be. Anything falling outside those boxes is what causes the design to look unbalanced because content seems to be where they shouldn’t be. Notice the second lines falling outside the green boxes? They’re just hanging there contributing to that unbalance.

I also think that the blocks of text on the main page could be better designed. It’s nice to see the text broken up in paragraphs as it makes reading easier and the copy seems less overwhelming. These really aren’t deal-breakers in the design obviously but the greatest designs are the ones that look at every single detail.

Overall the design is simple and effective. It does a great job of bringing the designers personality forward in an elegant interface. What are your thoughts on SohTanka’s re-design?

The navigation rocks out of simplicity and style. I like how it’s placed on the shed, the 5 links makes navigation easy for any novice. It’s known that reduced choices increases conversion because the less users have to think about, the faster they will make a decision.

When navigating to other pages, I feel the navigation links should have an active state to remind me where I am. That would be useful.

The area where we have ‘Your Website’ on the top right is very nice. It uses basic information architecture to explain just what goes into a website, something many clients do not know. However, I feel they could have added a pop-up or some type of info box to elaborate on what CMS, W3C and all this fancy lingo means. I mean, you and I as web individuals know but not the average client.

It’s good they quickly get to the WHO, WHY and WHAT because at this point I’m wondering just that. Key point here is to note how the text is very short and not overwhelming to readers. I personally have some issues with the layout causing it to have only 2 words per line. It’s a little annoying and doesn’t allow me to read as fast as I normally would if it had more words per line. This might be just me but I’d do it differently while including those lovely illustrations that keeps things visual.

This area got a little busy for me but I find myself enjoying the illustrations. It does a great job of breaking up boring text with great visuals. The only problem is that the content ‘how do they do it’ took precedence over portfolio work. It seems fitting at this point to stop talking and start showing what exactly it is they do. The entire ‘how they do it’ to me can be discussed verbally or even be presented on another page. The portfolio is completely downplayed. In fact, when I go to ‘Designs’ I expect just that but get more copy.

I know personally, if I’m hiring, the last thing I look at is text. I simply absorb the portfolio but considering this is geared towards average clients, a more sales like approach like this might work.

The footer looks great but I’m not sure what’s up with the boxes. This is a great segway for me to go into branding. The name ‘Ready Made Designs’ seems to imply that they are template designs but according to the site copy, it’s not. The boxes seem to reinforce the message of pre-packaged designs ready for shipping. I’m being sent mixed messages and as a client I would be a little confused. Their name doesn’t seem to align with their message of ‘tailor-made’. Truth is, ready made and tailor made are the exact opposite.

Here’s something to look at; because I cropped the footer to show only the part with the boxes downward, how does it feel to you? To me I can easily take this for a shipping site. That’s just an observation but luckily it’s the last thing on the page I see.

Visually the site design is great and usability is on point. There are some great details in the site design you’ll enjoy if you look around (hint – the contact page, I love the dropdown). Of course like any design there can be improvement and I feel they’ve overlooked certain things like branding; still, nice design.

What are your thoughts on Ready Made Designs?

The first thing that caught my eye was the huge bold heading “Creative Engaging Branding”, this instantly tells the reader exactly what the company specialize in.

To the right of this great looking title is a slideshow of recent work from the agency, giving anyone interested an idea of the style of work they produce and the sort of clients they have worked with. I particularly like the way the work slides in using an array of different techniques, making it interesting throughout. It would have been very easy to put the same transition on every slide but I’m glad they put a little extra effort in to make them all different.

I know the Charles Elena Design site uses a very commonly seen colour scheme of Red, White, Grey and Black but they have used it to great effect throughout the site to give the whole thing a very striking impact.

Every section in the site has a different background colour making each unique, with the supporting colours used expertly to give hierarchy to the page. The pages with the red background are my personal favourite.

I really love the use of huge graphics throughout the site, these are very much in-line with the big bold headings on every page. There are more and more sites online these days incorporating massive font and graphics and Charles Elena Design is a great example of why. As you travel down the page you are treated to some lovely shapes that really show off the agencies skills.

One point I would make though is that the speed at which the page scrolls down means that these graphics are shown too briefly in my opinion. While you can scroll to the graphics and take them in properly it wouldn’t hurt to slow down the scroll speed.

While I’m suggesting improvements that could possibly be made I’d like to highlight the very small copy font that is used on occasion. In the example above the copy font size is 10.67px which is very small for such a long paragraph of text. I would love to see this bumped up a pixel or two because it’s currently very hard to read.

One final improvement I would love to see would concern the presentation of their portfolio. They have used a scrolling carousel to display their work, which in my opinion, is difficult to use as it makes focusing on specific work very fiddly. An option to scroll through the work one by one would be my preference.

Also, their is currently no way to enlarge the work on offer. I’d love to have the chance to open their work up in a lightbox and see it in all it’s glory.

I don’t want to seem too negative here though because overall I really love this site and think it’s a great piece of work. With that in mind, I want to now go onto my favourite design feature on the site, the fixed logo and navigation. As you take a journey down the page the logo and navigation come with you staying in a fixed position on your screen.

This may not seem special but the designers of the site have thought about this journey and incorporated the logo into the background graphics. In the example above the logo merges with the curved graphic to make it look as if the curve is bleeding out. There are numerous examples of this as you go down the page and it is small touches like this that, in my opinion, makes sites stand out from the crowd.

Brand Identity/Typography

Blurtit’s logo has a straightforward design that beautifully compliments the idea behind the site’s purpose. It seems to be using just about three different types of fonts, and from the looks of it, two of them are modified. The blue box encasing the word “it” is the pivotal point within the logo design that backs the service offered by this website.

Elements of Design

The site has all of its elements separated into sections. The main content on the site is the unanswered questions, they take up just about 35% of the space on the home page. The design seems to have been put together using a grid. The navigation menu is extremely accessible and gives you a brief description of the content you’re going to see on every corresponding page. When you scroll over the latest questions, it automatically gives you the option to answer it or report it.

Entering and posting your questions to the community is by far one of the easiest features to work with on the site. The area where you type your questions is designed to look like as though you’re saying something.

Once you enter your question and you press the ‘go’ button your question is posted in an instant. You’re then taken to another page where it gives you a few options like registering, be interested in other similar questions, or search your corresponding category.

Overview

Overall, the Blurit.com is a nicely designed site with effective and organized use of whitespace. In my opinion its design rivals and is easier to navigate through when compared to Yahoo Answers (which operates under similar concepts). The Yahoo Answers pages seem too cluttered, and one of the most important elements of the site (where you search for questions) lacks visibility. Yahoo Answers has a large display of featured questions on the front page unlike Blurtit, however, Blurtit likes to circulate recently asked questions in more than one area of the site.

AVB Homes: Main

Design & Creativity

On design the site has a strong presence. It’s not trying too hard to be fancy but at the same time it is not being too conservative so there’s a great balance of creativity and simplicity. Take note on how the logo pops off the page elegantly thus pushing the company’s identity to the forefront. This is the first thing I imagine they want you to see; thus its prominence. Also take note at how it’s done – very stylish and creative. It even sets the tone for the website through colours and style.

There’s that lovely texture that gives the site an elegant feel and of course ties into its entire purpose – selling homes. The dark texture gives great contrast to the background and there’s enough white on the site that doesn’t make it feel dark. It’s welcoming, friendly and has a comfortable atomosphere.

AVB Homes: Community Homes

I don’t like the treatment on the contact button – I just don’t think the brown is contrasting nice enough with the button colour. However, I do think it’s the best pick. Why? To stay on point with branding colours on a site should be consistent. There were few options really: red, brown or white. The one with the best contrast of the three is the one chosen. And speaking of colours, the consistent use of red makes for strong branding, something set in stone by the logomark.

The bar used to divide the body section and the footer is a nice touch – clearly it’s an element from a house. This is an example of creativity with purpose. It pulls in the element of the product without going overboard.

Usability

The navigation is clear, easy to use and friendly. I used the photo gallery because this is something that has to be intuitive and it is.

An interesting observation is in the arrows. Someone visiting for the first time couldn’t know that the arrows showing are inactive. How would one know they’re inactive if they never saw active state?  It’s a minor thing and you can quickly figure it out by trying to click. Wouldn’t it be best to simply hide it if there’s no use for it and show it when there is use? You be the judge of that.

AVB Homes: Footer

In the footer I noticed the titles but I thought they were just that – titles. However they are actual links. When I looked at ‘Home’ and ‘Contact us’ it feels like something is missing. I guess this is due to the inconsistency with the others. I also felt that ‘Contact Us’ could have the phone number below it; it is obvious they don’t want to share an address – which by the way can raise some doubts.

In Closing

Overall this is a stunning design that’s well executed, very detailed and has a great web identity. I’m a little tired seeing designers’ portfolios constantly win the site of the day on The CSS Awards. I feel a well designed corporate or business site should be highlighted more often. Why? Because these sites are aiming to sell something other than design services and it allows us to see how we can go about doing that.

I’m not saying this should win but I’d certainly like to see more sites like these submitted and showcased. What are your thoughts on this point? What are your thoughts on the design? Please, don’t hold back.

I came across their site this week after seeing it displayed in a CSS gallery and I liked it so much I thought I would have a further look at it for you now.

The First thing that caught my eye about the site was the unusual layout. The reason for this is the huge mixed media centrepiece that houses a slideshow of upcoming acts. I really like their decision to have a large ‘billboard’ as the main attraction of the site as it quickly and clearly shows the viewer what sort of things they can see at The Albany.

The fact that this slideshow is placed slightly off centre also adds to the overall composition of the page. There has been a decision made to make this site look ‘imperfect’, which gives the whole site a softer personality. Not only are things asymmetrical, there are also wonky boxes, handwritten notes and crumpled paper, to name a few.

There is a very stark black and white colour theme running through The Albany site. However, they have used a bold yellow within this colour scheme to place emphasis on certain important areas. One excellent example of this is the box office phone number, which has not only been expertly placed at top of the page (making it one of the first things you notice) but has been entitled in yellow, which ensures it stands out and is very easy to find when you want to. It could have been very easy to overuse this yellow but luckily it is used sparingly throughout the site. Every time you add another striking element to a web design you lessen the effect of the existing calls to action.

While the designers of this site have expertly used yellow to make certain information stand out, I must admit that I feel they have used the wrong colour for their navigation. The grey they have decided to use is struggling to stand out on top of the subtle grey gradient that it sits on. While they have made the font very large the lack of any contrast means that I find myself ignoring it time and again. I would recommend that they try using black for this font and changing the hover state to the grey they have now.

One other problem I have with the navigation is the fact that there seems to be 2 placed very closely together. The aforementioned navigation is accompanied by another one directly above it. This is very confusing for a user, as there doesn’t seem to be any distinction between the types of content that fit into each section.

To summarize, The Albany site has a vibrant sense of personality, which seems to fit well with the type of performances that go on in the venue. There is a lovely use of colour and a fabulous centrepiece that highlights the upcoming performers.

I’d love to know what you think of the site, please comment your opinions and feel free to tell me if you think I’m wrong. Alternatively, if you think I’m possibly the best web design writer on this planet and everything I have said here is spot on then I’d love to hear that too.

The first thing I noticed about the site was it’s unusual layout. The content pods are arranged in a random order (although they do conform to a 4 column grid) and give the site, in my opinion, a nice feeling of fluidity. This theme continues throughout the site as the location of the pods vary on every page.

There is also a key pod on most pages that contain the copy for that page. These pods are twice the width of the others and don’t include a white border (the other pods do.) These design choices make the bigger pods stand out much more and I constantly found myself looking at these before their smaller counterparts.

One problem I do have with the pod design however, is the ‘reflection’ that has been placed beneath them. I know this is a purely personal design opinion but the layout of the site doesn’t call for having a reflection under the pods, they just don’t look like they are sat on a reflective surface. I would suggest that a subtle drop shadow would look better.

The very subtle grey colour scheme makes any use of colour really stand out. As you navigate through the site you see that each section has been given a corresponding accent colour which has been used within the pods. I really like this contrast as it puts emphasis on the important areas.

As you dig down into the site and get to the bulk of the content the layout reverts back to what you might call a conventional style. The page is split using a traditional 3 column layout with the largest of the columns housing the copy. This is an important step because the site needs to convey its message to the readers, and making the main content easy to read is obviously a must for this. If they had decided to use the random pods structure on these lower level pages it could have been very difficult to focus the users’ attention on the copy.

Anyway, I’ll stop there and summarize by saying that I really like what the guys have done with their site and think that it looks great. The guys working for CEMP are producing a lot of very interesting work and I suggest you get yourself on the site and find out exactly what they do.

TrippingWords is  a blog styled site housing intellectual opinions on print and web design philosophy by Josh, an academic researcher. This is his first attempt at designing a website which is impressive because it’s a nice design, it’s creative and adheres to a lot of web design principles.

One principle followed is the amount of leading given to paragraphs along with the fact that he used light grey font-colour instead of pure white on black. These choices in design allow for maximum legibility on a dark design.

The Problems

The problem with this site to me is placement and positioning of content. I really feel that a lot of space is wasted on unimportant things. I will attempt to outline and illustrate this.

Exhibit A: Tripping Words

Exhibit A talks a little about what this blog is about. The copy is all well and good but I feel it’s unnecessarily overpowering. After one reads this, they probably don’t care to see it again but it’s always there with this layout. For regular visitors, it would get annoying because it presents nothing fresh.

What most blogs do these days is use content as part of their design element because every time that changes it gives a fresh perspective to the design. It’s not static but dynamic. Look at Abduzeedo where he used typographic elements and imagery in his design. As titles and images constantly changes, his design has a fresh look every time.

Exhibit B: Tripping Words

I liked this bit. It’s graphic, creative, has personality and character, funny and engaging. In my opinion this should have been at the top engaging people because of its qualities rather than Exhibit A. The other reason I prefer this at the top is because it takes much less space that ‘Exhibit A’ so it could have worked nicely at the top.

When you put Exhibit A and B together it does two things for me: it comes across as ramblings to me and it blocks users from relative and important content. It’s a psychological frustration when you make or require people to do things they don’t care to do. Think of a frequent reader who comes every other day to the site… need I say more as to how inconvenient these two blocks of area can become?

Exhibit C: Tripping Words

And now there’s Exhibit C which is visually appealing to the eye. I spent some time looking at it and asked myself, ‘what’s the purpose of this?’ I couldn’t find any so once again to me it comes across as ramblings. The worst part about this is that it’s in one of the most prominent locations in the layout.

Design is not about being pretty. It’s about form and function. Neither comes before the other so you cannot aim to make something visually pleasing but lack in functionality or vice versa. They must and should be equal. For example, the iPod dominated the mp3 player market because it mastered both form and function.

Another issue this area possibly presents is that it shows the logo in two different formats thus taking away from the branding. Choose one, stick with it because consistency is the key in developing a strong brand.

If you move Exhibit C will anyone miss it? Probably not. Point is, you don’t have to move it, just make it functional.

Exhibit D: Tripping Words

Exhibit D illustrates the same issue of content blocking. This huge banner does not necessarily communicate ‘headline’; it’s really the copy that does that. What then is the purpose of the imagery?

Since the layout of the blog shows one full post at a time the ‘Headline’ (Recent Posts’) is incredibly important because it’s essentially a form of navigation. However, this banner pushes the navigation further down the page. This placement communicates this bit of information as unimportant. If someone perceives it as that, they won’t read it and that reaction affects usability. Why? Because the content that can help them cannot be found because they didn’t bother to read it.

Navigation should always be clear and easy to use.

In Closing

Visually it’s a nice design and functional on many fronts. Obviously others find it appealing since it’s featured in many design galleries. However, when you start to break it down it comes down to simplicity being the one thing that it lacks. However from a content perspective, there are some interesting articles here and I think for that reason we can all overlook the little flaws.

What are your thoughts? Feel free to agree, disagree or add your own points but either way, I’d love to hear from you.

MarianaOnate.com

Mairiana Onate

This site uses CSS in a very creative manner, merging easy-to-use navigation with some nice bold typefaces. Lovely design.

VladGeorgescu.com

This is a very unique site. It uses pure copy and typography along side a hint of green. It’s interesting and the copy is very strong because you read it, it draws you in and you like it. However, after reading all that I’ll be honest – where’s the portfolio? Show potential clients why you’re expensive.

If I was a client or looking for a designer I most likely wouldn’t contact this designer. The reason I wouldn’t is because I believe portfolio should do the talking in our industry. Nothing else! That’s just my opinion. Nevertheless, it’s interesting.

52KDesign.com

52K Design

Nice use of texture, clean, simple and elegant. Portfolio of this design is great. The one thing I have to say is that the text can be bigger, bolder and more typographic. There’s enough space going around to do something quite interesting with the type. I’d like to also see DesignersCouch where DeviantArt is but that’s a very personal comment that you should laugh at.

Flayks.com

Flayks

This design is obviously simple but I think it shows great attention to detail. The mouse-over on navigation is nicely animated. I think what we can learn from this design is subtle but effective use of gradients, bevel, emboss, inner glow, etc. There are lots of those effects in the design but it doesn’t become tacky, silly or unprofessional.

Yodaa.com

Yodaa

I love this design. It shows great compositional skills because art and content is perfectly integrated with each other without content getting overpowered. Everything just fits. I enjoy the depth of hue effect – that really helps in terms of protecting the design from being cluttered. Where it says ’services and cms design’ the copy on the cloth looks flat. It needs maybe an engraved effect; still, cute design.

SheldonFarmBaskets.com

Sheldon Farm Baskets

Sheldon Farm Baskets is another design that shows how you can bring elements of the product to create an atmosphere that’s relevant. You’ve gotta love the entire basket feel of the design communicated through the navigation, background and the basket themselves.

It almost  feels like you’re walking in the store itself and that’s ideal. The one flaw is that the logo gets lost. I wouldn’t put it directly on the background but rather give it some background element that makes it contrast with every other element.

CloudiaCMS.cz

CloudiaCMS

All I know about CloudiaCMS is that it’s some CMS type application but from a visual standpoint, I know it’s attractive. This is one of those designs that really integrates illustration with content well.

FahadKhalid.com

FahadKhalid

I like the photo-manipulation on this site and the tagline it uses ‘addicted to creativity’. Nicely done, great smoke effect and overall a simple design.

EKSRTD.com

EKSRTD

EKSRTD is an art inspired clothing initiative from Sweden. What will happen is that designers in the stab will design and produce both high and street fashion t-shirts. Uniquely printed by hand with screen print.

I did not care for the loud intro upon entering this site but once I got past that, it’s an elegant site design. I believe there are some usability issues. For example, it took me a while to figure out how to navigate the collection. There’s no indication on what to do so I had to figure it out. If the indication is that the pointer is a hand, that’s not enough really because it’s small and chances are people are not looking at their pointers.

The other little detail to look at is that the navigation link should have some kind of active state to let users know where they are.

The contact page didn’t work for me so I’m assuming that’s a bug. That can be a problem since there’s no other apparent way to purchase a t-shirt if I’m interested. Obviously this is only a showcase site but what IF someone is interested in buying?

Aside from all that, I like this site.

That’s all for this edition of CritiqueSunday. Feel free to leave your comments on your favourite of this edition.