Case Study: Fabulous Stationery

This summer, I applied for a job at a small store called Fabulous Stationery. The concept of the store is very unique: customers can choose from a collection of hundreds of card designs to create sets of personalized note cards and invitations. The store itself is about the size of a walk-in closet, since all the customers do is come in, choose the design and colors they like from the design binders and then place an order with the store attendant for what they want the cards to have printed on them.

When I was researching the position online, the store's website actually had me thinking that it was a much larger store than it actually is. I think this is because of the huge variety of types of cards and patterns available. The purpose of the site is to give potential customers a thorough idea of the designs that are available, so all of the card types are organized into categories on the site.

The homepage of the site lists these categories in two ways. There is a list of the categories organized vertically along the left side of the page. The different card types are also presented with small images of examples of the cards in the center of the page. I'm not sure why the two methods are used, but it does make it easy to get an idea of what's available.

The name "FABULOUS STATIONERY" takes up a large portion of the top of the page. In my opinion, it's a bit too large. If it were smaller, all of the primary navigation could be seen without scrolling. The designs of the cards are all very clean, using blocks of bright colors. I suppose the best way to describe them is "modern". They remind me of the designs IKEA uses for their products, clean and bright. It's appropriate, therefore that the font used for the site title and subsequent headings is a clean sans-serif, in bright flat colors.

Clicking on one of the card categories on the homepage immediately directs you to a page that displays all of the designs available in that category. At the top, there is a short explanation of the particular card category. Each card design is shown as a small image of the entire front of the card. The price of the design is also clearly listed. When I first visited the site, I found myself scanning almost all of the categories because it was so easy to see the different designs. The colors on the site are so vivid and attractive that I really wanted to purchase some cards for myself.

In the primary navigation along the left edge of the page, there is a link that says "CREATE". In this page, there is a clear list of instructions for ordering personalized cards, with the option to order online rather than going to the store.

The clean, sophisticated and yet friendly layout of the sites is in tune with the designs of the cards, and appeals, in my opinion, to a primarily female audience.

www.fabulousstationery.com

Case Study: Product (RED)

There's a lot of controversy surrounding the Product (RED) campaign. At least, that's the vibe I get on Penn's campus, but I've found a lot of students here to be pretty suspicious and cynical about most things like this. Product (RED) was started as an effort to fund AIDS treatment and prevention in Africa, and it's been going strong for the past 2 years. I bought a (RED) shirt from The Gap when the campaign first kicked off. To be honest, I probably would have bought the shirt even if it had nothing to do with Africa, because I was, and still am, absolutely NUTS about the logotype. I don't think I ever felt so passionate about a design that involved little more than an all-caps sans serif typeface.

What amazes me is that after 2 years, the aesthetics of the campaign have remained almost entirely the same, even though the range of the campaign has expanded. The questions I keep hearing are always about whether or not the money that the campaign collects actually goes to the cause that it claims to support. Seeking some clarity, I visited the Product (RED) website.

Despite how large the campaign is (involving 9 major companies), the website is amazingly simple and clear, conveying the central message of eliminating AIDS in Africa.

The site is full of what I believe is flash animation involving mostly text, all in the same all-caps sans serif as the logotype. The primary colors of the site are red, white, grey and black, the only exceptions being color photographs.

The homepage is like a preview of some of the sites contents. It features a short introduction to (RED) WIRE, a new digital music magazine. There are rotating images of various (RED) products, and news section enclosed in a red frame in the lower right corner. The news section features links to the 2 most recent news stories, with the option to view more.

The primary navigation is arranged vertically underneath the logo in the upper left corner. The links are the same red as the logo, with darker red overstates. The links themselves are easy to understand. While there is a lot of information on the site, it is conveyed with clear, concise text and clean images that are placed on a white background.

In contrast to the clean organization to the site, I noticed something rather confusing and clunky about the navigation. Clicking on a primary navigation link opens the secondary navigation underneath that link. The secondary navigation is light grey and easily distinguishable from the primary navigation. However, opening this secondary navigation causes all of the navigation underneath it to shift downwards to accommodate the secondary navigation. As a result, it takes a few seconds to reorient oneself to the new navigation arrangement. I feel like there should be some way to display the secondary navigation without causing everything else to shift.

I really like the way that the information is presented on the site. Each time a link is opened, it gives an introduction to whatever the topic is, followed by an option to "view more". I find this much more effective and less overwhelming than trying to organize all of the information on the very first page. It allows the user to decide what they'd like to see and learn more about.

www.joinred.com

Case Study: Swarovski

Swarovski crystals are a pretty big deal for the women on my father's side of the family. Usually, a Swarovski item is given to a girl on a very special occasion: a sixteenth birthday, a wedding, etc. A few years ago, when I turned 18, I received a Swarovski heart-shaped keychain as a birthday gift. I was intrigued by the clean-cut appearance of both the keychain and its packaging. I loved the swan logo and the deep navy color of the box. It was little wonder to me why these items were considered such precious gifts.

Recently, I came across some magazine ads for Swarovski jewelry. I really liked it, so I decided to check out their website.

I have to admit, I was really hoping to open the web page and find lots and lots of the lovely, deep navy blue that I've always seen in the Swarovski packaging. There is no navy, but in its place is a rather pleasing combination of white and cream that give the site an overall clean, crisp look. Suitable for crystals, I think.

The homepage is anything but elaborate. The name "SWAROVSKI" is placed neatly in the top left corner, in a seemingly translucent and icy grey that works well with the creamy palette. I wanted to see the lovely little swan logo prominently displayed, but it only occurs at the bottom right of the homepage, grey and tucked away.

There is very little content on the homepage. There's not even an introduction to the site or the company. The first thing that caught my eye was the slideshow of pictures in the middle of the page. The pictures are a combination of advertisements for seasonal products (in this case, Christmas ornaments) and an article about accessorizing called "Dazzling with Grace". The photographs are elegant, much like the products they are trying to sell.

Immediately below this slideshow, there are 3 smaller images that are geared more towards customer service, advertising a promotion, guaranteeing prompt deliveries, and offering a telephone service. I'm glad that these images are much smaller. They don't distract from the main content (the slideshow), especially since the palette and background of the page are so simple.

The primary navigation is located in the top right corner of the site, on the same line as the name "SWAROVSKI". The font is an all-caps sans-serif, which does add to the clean look of the site, but I'm curious to see what a serif typeface would do. It might make it a little more elegant and a little less sterile. The primary navigation is grey, just like the site title, and both the rollover and selected states for each link is a darker, more opaque grey. The primary navigation is consistent throughout the site, and you can get back to the homepage by clicking on "SWAROVSKI".

Swarovski makes a large number of different kinds of products, so one thing that is quite helpful about the primary navigation is the fact that, if you mouse over "Online Shop", a drop down menu appears, giving you the option to explore the products by category (example: jewelry) or collection (example: Disney). This is particularly helpful for someone who is new to the site, since the homepage itself is not very explicit when it comes to describing the company's products.

One of the primary navigation links that is a bit unclear to me is "Magazine". Clicking on it revealed a collection of articles, but I'm still not sure if these are articles from a Swarovski-specific magazine or just a collection of articles written for customers. In any case, the articles are beautifully laid out with very elegant serif typography, which makes for an easy read. They are also punctuated with several clear, attractive pictures, which always gets a thumbs up from me.

The exclusivity that I've always associated with Swarovski is emphasized by the "Crystal Society" link in the primary navigation. The drop down menu lists topics of interest for society members, with words like "Exclusive". I have no idea what most of these topics mean, but perhaps that's the point. If you're a member, you'd know.

My favorite part of the site is by far the page that opens when you click "The Story" in the primary navigation. It opens a beautiful, animated timeline that looks like a string of crystals. It moves as you click and pull with your mouse or click on the arrows at the left and right sides of the page, and when you reach a large cluster of crystals, a short description of the significant events at that point in Swarovski's history pops up when you mouse over the cluster, and then disappears just as smoothly as you move your mouse away. The background of the timeline looks like you're looking straight into a crystal. It's absolutely stunning in my opinion.

In the "Online Shop" section of the site, the products are organized in rows much like products are displayed on sites like Amazon. It may not be a particularly innovative way to display products, but it's clear and concise, and frankly that's all I need when I'm shopping for something online.

Despite the lack of the oh-so-lovely navy, I really enjoyed browsing this site.

www.swarovski.com

Case Study: Aveeno

I've been using more and more Aveeno products lately. As a sucker for beautiful packaging design, I have to be mindful that I don't purchase a product just because it looks pretty (a costly mistake I have made one too many times). The great thing about Aveeno is that I'm really happy with the products themselves AND I get to gaze adoringly at the packaging.

In search of a more effective skincare regimen, I decided to consult the official Aveeno website for a comprehensive look at their products and what one can expect from them. I found that, and on top of it, a really beautifully designed site.

The site opens to the homepage, with a pleasing color palette that looks like it's inspired by flax and wheat (appropriate, since wheat is a common image used on the Aveeno packaging). Two thirds of the page is occupied by a slideshow of images featuring certain products, with pictures of beautiful, smiling women with radiant skin and blue-eyed babies, also with radiant skin. (Oooh, I want radiant skin like that!) The bright colors in the pictures complement the neutral color palette nicely. Another source of bright color are the small images of Aveeno's natural ingredients at the bottom of the slideshow (lavender, soy, etc.) When you roll over these images, they pop up slightly to indicate that they are clickable, and clicking on them opens a larger box within the slideshow area with a more in-depth explanation of the ingredient and it's uses. It has the feel of an old-fashioned apothecary, which I really like.

The primary navigation is located at the very top of the page. The dark brown color of the navigation bar allows it to stand out without overpowering the rest of the page. The links in the primary navigation are very easy to understand and they remain consistent from page to page. There is no rollover state, but, once selected, the link is highlighted with a light green color, so you always know which page you're on. The "Aveeno Baby" link is the last in the horizontal row, and it stands out because it's surrounded by light baby blue rather than dark brown. Appropriate, since Aveeno has an entirely separate line of products intended for babies. Since the "Home" link is present in the primary navigation on all of the pages, it is very easy to navigate back to the homepage.

One thing that I really like about the primary navigation is the "Products" link. When you click on it, rather than immediately redirecting you to a new page, it opens a drop down menu with the different product categories, and the sub-categories of those types of products (example: The category of "Lip Care" in the drop down menu has the sub-categories of "Lip Conditioners" and "Cold Sore Products".) I think this is a really effective organizational tool, and makes the site all the more user-friendly.

Another thing that's nice about the homepage is the fact that ads and promotions are distinctly secondary to the products themselves. For example, a "Special Offer" promotion banner is located under the picture slideshow, but it blends in with the rest of the site.

What I noticed as I clicked from page to page is that, despite the fact that the content layout changes from one page to the next, the aesthetics remain very consistent, so the entire site is very unified and streamlined. A beautiful close-up photograph of a bundle of soybeans, wheat, and lavender is used on most of the pages, but it changes subtly in size and position. On the pages with secondary navigation, there is a clear distinction between primary and secondary in both size and color, but the layout makes the secondary navigation very easy to spot (horizontal and parallel to the primary, separated from primary by an image).

I clicked on the "Aveeno Baby" link and I liked that, even though the primary navigation stayed the same, the aesthetics of the rest of the page were slightly different and more in tune with a "baby" feel. The palette was still neutral, but it was lightened, and a stripe pattern (like nursery wallpaper) was used instead of the picture of wheat, soy, and lavender. The idea of same brand, different product line was made very clear.

Overall, the aesthetics of this site really mirror the "natural" and "simple" identity of Aveeno, as does the site's clarity and usability. I can only think of one (somewhat trivial) change I would make. Since Aveeno makes a lot of moisturizing products, I would imagine that they are in higher demand during the winter. I probably would have tried to recognize the current season in the site, since all of the current pictures look very summery. Again, it's pretty trivial, but I think it could be interesting.

www.aveeno.com

Case Study: Andrew Wyeth's Official Site

Andrew Wyeth has been a consistent inspiration for me in my painting. I find myself going back to images of his works whenever I am beginning a new painting. Having known his work since I was a little girl, his paintings are also a source of comfort to me. He seems to be a pretty private character despite the fame of his work, and this site is the only one that is officially authorized by him.

I would describe Andrew Wyeth's work as a collection of intricately crafted paintings of rather simple subject matter: landscapes, intimate portraits, windows, doorways, and much more. It doesn't surprise me, therefore, that this website is simple and straightforward in both it's construction and aesthetics.

The homepage features Wyeth's name centered at the top of the page, in a large all-caps serif typeface. A black bar serves as the background for the name, and allows the name the stand out even more. The background of the rest of the page is a flat, neutral grey. Under the name, there is a large image of one of Wyeth's paintings called 'Stop', featuring a motorcyclist at a traffic light. The name of the piece is in a darker grey than the background under the image, along with a brief welcome message. The simplicity of this construction means that it's not necessary to have the primary navigation directly underneath the name of the site. In this case, the primary navigation is at the bottom of the page, arranged horizontally within a narrow green bar that is the same green as the large "ANDREW WYETH" at the top of the page. This green, which is sort of a deep sage, is pretty and stands out from the grey and black of the page's background, but the problem I have with it is that it really does not bear any similarity to the subtle greens that Wyeth so often uses in his paintings. I have never seen this bright sage green in any of his works. I think that a more subtle, muted green drawn from his paintings would have been just as effective in terms of highlighting the site name and primary navigation.

The primary navigation links are in a large, black sans-serif with underlines. I think that the same serif font of the large "ANDREW WYETH" at the top would have looked better. Plus, the underlines just don't look good. The size of the links is appropriate, though. Very easy to find and distinguish. However, there are no rollover or selected states which makes it hard to know exactly where you are in the site at any given time, especially since the individual pages don't feature a title (for example, clicking on "Permissions" in the primary navigation takes you to a page with instructions for obtaining permissions to create reproductions of Wyeth's work, etc., but the "Permissions" link in the primary navigation is not highlighted in any way, nor is there a title that says "Permissions" on the page).

Users can navigate back to the homepage by clicking "Home" in the primary navigation (which remains consistent on all of the pages except "Images" and "Carolyn Wyeth", which only have a "Home" link, not the rest of the primary navigation). On some pages, clicking the large "ANDREW WYETH" at the top will take you back home, but it's not consistent, which seems to be a programming flaw. In fact, on the "Images" page, the "ANDREW WYETH" is not green, but grey.

The links in the primary navigation are very easy to understand, and they lead to exactly what I expected. The information is well organized, but in some cases, it is rather exhausting to read through. For example, clicking on "Publications" takes you a long list of publications. They are separated into categories: Exhibition Catalogues, Books, Periodicals, and Television & Film. However, I think that the typography and layout of this long list can be altered to make it much easier to read. For example, I would make the titles of the publications in a different color that stands out, like red. The rest of the information can remain black as it is now.

Other inconsistencies in the site include the primary navigation, in which the link for "Carolyn Wyeth" appears and dissapears between pages. (The link leads to a page about Andrew's sister, and a request for information and images of her work for a book that is being compiled.) On the homepage and the "Images" page, the body text is dark gray, whereas it's black on all the other pages. I think that the site would seem much more sophisticated if these inconsistencies were resolved. In summary, however, this site is clear and relatively easy to navigate. If I could improve it, I would choose colors that occur in Andrews paintings. I would also, for the sake of convenience, move the primary navigation to the top of the page, under the title, so that, in the case of small browser windows, it would be immediately visible.

www.andrewwyeth.com

Case Study: Anthropologie

My recent and frantic job search led me to the official site of the clothing/lifestyle store Anthropologie. I walk by their store near Rittenhouse Square very often, and the store windows always intrigue me with their crafty ensembles and bright colors. I regret to say that my starving-artist budget prevents me from doing any shopping there, but I have wandered through the store nonetheless. Everything about Anthropologie seems like it was done with the guidance of artists, from the catalogue down to the arrangement of the clothing racks.

What I really love about Anthropologie's website is the fact that it is incrediby simple in its design - there's relatively little content on any given page - and yet it still manages to be anything but sterile. I studied the site for some time to figure out why, and I came to the conclusion that the delicate combination of script and serif fonts (Filosofia, perhaps?), simple photography and line-drawings, and the black-text-on-white theme allow the site to maintain an artistic, rustic, and cosy feeling without having to overload the pages. In a word, I find it stunning.

The homepage features the name ANTHROPOLOGIE in delicate grey all-caps at the top left, and this remains constant on every page on the site. Behind the name, the white background is accented subtly with a delicate lacy pattern, mostly grey with small flashes of red. The content area of the homepage highlights particular products with shortcuts that take the user to the page where they can purchase them. The highlighted products appear to be seasonal (right now I see Christmas decorations). The shortcut links are in bright red with little arrow icons which makes them very easy to point out. The photographs of the products are also very simple, since the items are shown against the white background of the page, rather than being worn by models, etc.

The elements of the primary navigation are a testament to the broad range of products that Anthropologie offers (clothes, shoes & bags, loungewear, jewelry, accessories, and home decor). The primary navigation categories are very clear. They are not very large, but being on a white background makes them easy to distinguish. They are also very well spaced. The text is olive-green in color, and rolling over them changes them to a complementary deep red and also reveals a drop down menu that lists the different sub-categories of each type of product (for example, rolling over "Jewelry" reveals a drop down menu with "gift ideas", "necklaces", "earrings", "bracelets", "rings" and "jewelry boxes"). Not only does this give a clear idea of what the user can expect to see when they click on each primary navigation link, it can also allow them to access the products they are looking for faster, by clicking on one of the sub-categories in the drop down menu.

There are two primary navigation links that stand out. Right now, there is a link called "HOLIDAY" that is in all-caps and a bright green. Appropriate, I'd think, especially since Anthropologie's products are often given as gifts. The sub-categories of "HOLIDAY" are clear, except for "Sugar and Spice", which, I discovered, leads to the company's collection of scented items like soaps and candles. The other primary navigation link that stands out is "For Your Home" which is surrounded by brackets. Clicking on it takes you to the section of the site that is devoted exclusively to home items. In this section, there is a primary navigation link in brackets called "For Your Self" which takes you back to the homepage. The distinction between the home decor and clothing sections makes it easier to navigate through the different types of products Anthropologie sells.

Each page on the site has a similar template: the primary navigation stays the same and on the left side is the secondary navigation (which is the same set of sub-categories that appear in the drop down menu when you roll over the primary navigation links). Clicking on the a primary navigation link (Example: Loungewear) defaults to a page with a photograph of some examples of the products in that category (Example: a model wearing a bathrobe). The photos are very simple with neutral backgrounds. Clicking on one of the secondary navigation links takes you to the products themselves, which are each framed with a simple gray line. Simple, yet clear. The user has the option to have 8, 16 or 32 items displayed per page. The pagination is also very clear, and is located both above and below the products. For many of the secondary navigation links, clicking on them reveals more sub-categories as tertiary navigation, which further sorts the many products featured on the site.

At the bottom of each page, there is an opportunity for users to sign up to receive emails from Anthropologie, as well as links that are associated with the company but not necessarily with products for sale (store locations, privacy and security, etc).

In summary, I am really impressed with this site. The simple yet non-sterile aesthetic is something I am always aiming to achieve in my graphic and website design, so it's really great to see a successful example. I gave a lot of thought to how I would improve this site if I could, and to be honest, I still can't think of anything.

www.anthropologie.com

Case Study: Naked Chocolate

A few months ago, a sip of an absolutely delicious cup of dark drinking chocolate made me an immediate fan of Naked Chocolate Cafe. Being the nerd that I am, I found Naked Chocolate's logo design to be just as delicious as the treats they serve. It's simple, clean, sophisticated, and yet it preserves an element of cuteness, almost cheekiness, that is essential to its identity as a lighthearted establishment. Their packaging is just as lovely. It makes everything you buy feel like it's a very special gift. (Now I sound like a slogan machine.) Needless to say, I just had to see their website.

The site defaults to a splash page that features a close-up photo of one of Naked Chocolate's translucent shopping bags with their logo and address printed on it in a deep, yummy brown. The splash page loads in stages (maybe it's just my browser), but the bag is the first thing that appears. I thought that this was the entire splash page for a moment, and I loved seeing just the white bag on the white background. Seconds later, however, two photo boxes appeared next to the bag, each featuring a slideshow of images of Naked Chocolate's gourmet goodies. I can understand the logic behind this, but to be honest, these pictures detract significantly from the splash page. The images switch too quickly and too abruptly. I don't enjoy them. If they spent more time on each image, and had them fade in and out rather than flip from one to the next, I think it would be much more appropriate.

At the bottom of the splash page, there's a link for "HOME". Alas, it's in the default link blue, underlined and everything.

The homepage is very simply laid out, but it's interesting how, despite a simple layout, a page can still be hard to read through. I like the fact that the Naked Chocolate logo is small and neatly placed in the upper left corner. The primary navigation is next to the logo. The deep red text clashes with the warm pinks and browns of the logo, but the visited state is a green that contrasts nicely with the logo. The font is a simple sans-serif (looks like Arial) but the words are underlined, which I find pretty unnecessary and unprofessional-looking. The rollover states are bright orange-red and underline-free, and it's amazing what a difference the elimination of the underline makes.

The secondary navigation is on the left side of the page, under the logo. It is also dark red and in a sans-serif typeface, but it is distinguishable as secondary because it is much smaller than the primary navigation. The links in the secondary navigation, however, are not as clear. "Products" is the first link, followed by "Chocolates", "Beverages", "Cup Cakes" and "Desserts". I'm thinking, "Aren't these products?" I click on "Products" and find that it takes me to an introduction page about Naked Chocolate's products. The other secondary navigation links take me to pages about those specific products. I would improve this by having "Products" as the only secondary nav link, or putting it just in the primary navigation, and then when users click on "Products", THEN they see links for the specific products. What's weird is that the "Products" link in the primary navigation takes me to the same page that the "Products" link in the secondary nav does. It doesn't seem to make much sense.

The rest of the navigation is pretty straightforward and well-organized. Each page has the same layout (logo in upper left, white background with black sans-serif body text, primary and secondary navigation). The homepage offers the user the chance to subscribe to a mailing list, download menus, and make a "virtual visit" to the cafe. (Clicking this link opens a whole new page with videos about the cafe.) The one thing I don't like is that, after I leave the homepage, the only way I can seem to find to get back is by clicking the logo, which then takes me back to the splash page. I have to click the "Home" link from there. Very clunky!

The site has lots of pictures of the Naked Chocolate store, and I think the pictures add a lot of warmth to the site, especially since it has just a white background and not very much body text. The primary nav links do exactly what I thought they would do: "News" takes you to a page full of links to articles, "Store" gives you hours and the address, "Contact" gives you the address again, along with a phone number and email address, and "About" gives you a history of the establishment.

I like that I can download menus from the homepage, but I would appreciate it if I could just read the menus on the site without having to download them.

The site features lots of pictures of Naked Chocolate's products, but I think it could be spruced up a bit if some of these images were used in the background at a low opacity. It would look less like someone just "stuck" the pictures on the pages.

Now I'm craving chocolate. Oh boy.

www.nakedchocolatecafe.net

Case Study: Laura Ferreira Studios

When I was planning my final project, which is a portfolio site for myself, I looked at the portfolio sites of other artists for inspiration. I paid particular attention to people I know personally. 

I went to high school with Laura Ferreira. She is now a self-employed photographer and she's doing remarkably well. Her work is primarily portraiture that is heavily photoshopped, and I'm a big fan. Her portfolio site stood out for me with its distinctive aesthetic and layout, and I was interested in it particularly because she had designed it herself.

There is no splash page. The default page is the homepage, but this isn't really clear since the content of this page is "Recent News" and there is no selected state in the primary navigation. The first time I visited this page, I thought it had defaulted to a news page, so I clicked on the "HOME" button and nothing happened. 

The primary navigation is clear: HOME, ABOUT, PORTFOLIO, LINKS, GUESTBOOK, CONTACT. I like the design of the navigation bar, too. The font is an eccentric sans-serif (the name escapes me, but it reminds me of the 'Lion King' font...) but the fact that it is white on a black background makes it very legible. The rollover state turns the words from white to deep green, which I find much more streamlined than having the background of the buttons change color. 

Each page has the same template. At the top is a very large animated photo (gif?) of Laura herself, with extreme gothic makeup, with angel wings that move up and down constantly. Based on the style of her photography (gothic, dark, sensual, mysterious), I think the image is fitting. The only problem is its size. It's HUGE. My browser is open to its full size, and this top bar image takes up a third of the page. I think it could be much smaller. Even half its size. 

On every page, the content is located beneath the animated image and the primary navigation bar. On the homepage, there is a lot of news content, so rather than having an extremely long page, there is a scroll bar within the content area which allows users to view the content and still have the primary navigation bar visible and accessible. The news content is full of large, colorful pictures which draws my attention much more than it would if it were text alone. 

Her organization of the photos in her portfolio is clean: You open the portfolio page, and it defaults to the first image in her portfolio. Under this image, small versions of the other images are arranged horizontally with a scroll bar. You click on the small image to see a large version. The quality of all of the images is superb, but the issue I have with this organizational method is the fact that there is no further organization or explanation of the pictures. No dates, no captions. Almost all of the photos are portraits, with some fashion photography here and there. I feel like it would be more efficient to either organize the photos into categories or chronological order. The only reason that I know that the photos are organized from newest to oldest is because I am friends with Laura on Facebook, so I've seen her photo albums in order there. 

Everything else on this site is very straightforward in my opinion. I particularly like the "Links" page. The links are in categories: "Other Sites I'm On", "Banners for My Site", and "<3", which I understood as being a heart emoticon, categorizing sites that she likes.

The "Guestbook" page is also very clear. At the top of the content area, you have the "Sign Guestbook" section where you fill in the boxes with your information and comments. Immediately below, you can scroll through other comments people have made, in order from newest to oldest. No thinking required: Send comment, read other comments. 

The "Contact" page is the shortest of the lot. Laura basically gives just her email address. I find this sufficient, because I prefer to contact people via email rather than filling out a form on their site, but I can understand that, for some people, this might add an extra step that they'd prefer not to have to take (open their email, copy her address, etc...)

All in all, I think this is a pretty interesting portfolio site that is strongly linked to the aesthetics of Laura's work. A couple of tweaks, as I mentioned above, will make it even more clear and effective. Overall, I think it is a testimony to how talented and professional she is.

lauraferreira.com

Case Study: Real Simple Magazine Official Site

I really love Real Simple magazine, not only for its content (which lives up to the magazine's title), but for its design as well. It manages to be clean and yet anything but sterile. The colors are bright and expertly coordinated. Recently, they have used clever photographs of paper models of objects like a vase of flowers, etc., to designate the different sections of the magazine. I was curious to see whether the magazine's official site echoes these aesthetics.

What surprised me when I reached the homepage was the lack of color. Apart from the blue and orange 'REAL SIMPLE' heading, pretty much everything is displayed in shades of white and grey. What's disappointing is that the ads are the most vibrant thing on the page. That, and the fact that they are given a surprisingly large amount of space, washes out the actual content of the homepage. Even the huge 'REAL SIMPLE' at the top of the page is dwarfed by the enormous banner ad above it. 

The primary navigation would be virtually undetectable if it were placed in any other location except at the top of the page. The text is small, grey-on-grey, with a pastel yellow overstate that is, like everything else, drowned by the ads. One redeeming aspect is that the categories are very clear: 'Food & Recipes', 'Beauty & Style' and so on. The 'Television' category stands out in a muted shade of red, but, even as a regular reader of the magazine, I have no idea why. I click on it and it opens a page devoted to the new Real Simple TV show on TLC. The Television page is just as drab as the homepage. 

In fact, all of the pages are just as drab as the homepage, and, with the exception of the Television page, they are all organized in the same grid. And it's the same aesthetic situation on every page as well-several sections of content with a hierarchy that is not very well defined, and at the same time drowned out by annoying ads. It takes a lot more reading than I would like to do to sort through the content on each page. When opened, the individual article pages are simply laid out, but I feel like the ads and navigation take up much too much space on the page. It feels like it takes me a few seconds to determine where the article actually is.

Like the magazine, the photographs that accompany the site's content look very professional and beautiful, but they are so small that I feel like so many of their good qualities are lost. 

If I had the opportunity to redo this site, I'd probably keep the content layout pretty similar to the way it currently is, but I'd give each page a total color makeover, choosing a different (but coordinating) color palette for each section. I'd also remove several of the ads and make the remaining ones much smaller. I'd make the primary navigation slightly larger and up the contrast so it's much easier to spot on opening the homepage. 

After all, shouldn't the official site for 'Real Simple' be...simple?

www.realsimple.com