Web Design Critique #30: Grey Ang
Welcome to our 30th design critique! Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Grey Ang, the personal portfolio of a web designer in Malaysia.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
About Grey Ang
“My name is Grey, and I am a web designer and front-end developer based at Kuala Lumpur, Malaysia. I research, plan, design, and code websites. I am good friends with Photoshop and HTML/CSS/jQuery, and I make clients, users and machines happy.”
Here is a screenshot of the homepage:
As you can see, the site is built on a colorful spectrum background with a reduced-opacity tag cloud containing things like “web design” and “CSS3”. What you don’t get from the screenshot is that the background has an animated element as well. There are several blurry circles that float and dart about behind the content. Click any of the screenshots below to stop by the site and see it in action.
This site is actually fairly small and simple so we’ll be taking a look at each of the pages and analyzing how the aesthetics affect the user experience.
Home
I definitely appreciate the work that went into the aesthetics of the site. The ambient setting is quite beautiful. However, the problem with creating such a complex background is that you eventually have to place content on top of it, and this can be a very difficult task.
The large, faded words in the background reduce the readability of the text on the homepage. The main paragraph is by no means impossible to read but the design is quite busy in the area of the text, forcing users to work a little harder than they would normally.
Further, the red used as a hover color and point of emphasis tends to get lost in the background. This is understandable as it’s simply not easy to find a color that contrasts well with a multi-colored background. However, you still want to avoid visual dissonance.
The easiest solution to all of these issues, and indeed most of those that we’ll discuss today, might be to simply place a slightly transparent black background behind all of the content. This will give the content more of a solid ground to stand on and will allow the designer to keep the current background.
You might also consider adding some sort of header graphic to this page. I really liked how the photo on the “About” page stood out and I think that idea could be duplicated here.
About
Here we see another page that is quite attractive, yet suffers from the same problems mentioned above. I do like the interesting layout at work here though. The navigation stays fixed while the other content scrolls and the page is split into clearly separate and nicely arranged columns.
The About page splits into three separate sub-pages: introduction, resume and “things i do.” This allows the designer to fit in quite a bit of content while keeping the primary navigation super simple.
Works
The “Works” page is a great looking arrangement of thumbnails and text that in turn lead to dedicated project pages like that shown below. The thumbnails have a nice thick border treatment that helps them stand out from the background and the quote at the top left is large and bold enough to be readable.
I do find the right alignment of the large quote to be a little awkward though. Everything on the page has a strong left alignment, and while it’s often effective to intentionally break a rule such as this, I don’t think it’s working here. The general shape of the paragraph is irregular, making it pretty difficult to read with a right alignment.
Contact
The last page of the site is the “Contact” page. This contains a few paragraphs of text and a simple but stylish contact form. The first thing I noticed here was that the quote at the top of the page feels a little off. You might try left-aligning it independent of the quotes so that the “T” in “The” and the “m” in “miles” form a hard line. This should help the left alignment feel a little stronger than it currently does.
Further, the fields in the form are so transparent that they’re nearly invisible. Again, this may look nice but the usability suffers. Remember that the aesthetics of a page have one primary goal: to highlight the content in an attractive way. Your design should serve to increase usability, not sacrifice it in the name of style.
When you click on a field to begin typing, the opacity increases and it becomes much more noticeable. I would suggest setting this opacity to the default state and increasing it even further when it is selected.
Your Turn!
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.