Brightening Up My Website–Selecting Colors!

Again, I’m learning the hard way that things are so much more complicated than they look. There are so many color choices to make! The great thing is that many sites today offer suggestion or, at the very least, some color inspiration for aspiring designers like me.

At first, I thought I’d like a very clean website–perhaps a white background with some black or gray text. But after reading some articles on how to make websites greener–through black backgrounds or incorporating more darks than lights–I’ve decided to give it a go.

Even though I know I want to incorporate some non-white or non-light colors, I still have to decide on what I’m envisioning for my website. Thankfully, I’ve discovered Adobe’s Kuler website. Kuler lets people check out color palettes created by others or allows users to come up with their own. Since I’m creating this website for my University of Florida master’s class and because of my Gator pride, I’ve decided to incorporate Gator colors.

Gator colors are perfect as they happen to be in line with the split complementary color scheme from what I can tell. Apparently I’m not the only one who thinks these colors are great for a website! I’ve found several Kuler users who have created gator color palettes. From gator chroma colors to vintage ones, I’ve found some real gems. Here are my top choices for inspiration. They are all equally great so I haven’t yet decided which one I’m leaning towards. Further, I’m not quite sure how to apply the color to the website but at least I have some direction now!

Advertisements

Navigating through the Confusing World of Typography!

Who knew typography could be so complex? I just went through Smashing Magazine’s “50 Useful Design Tools for Beautiful Web Typography” article; they should really rename that article to “Super Confusing Design Tools for Beautiful Web Typography”. It’s not their fault though. It’s mine. To be honest, all I know about typography or font is what’s provided in my Word document. I don’t even know much about that. I just select something that looks pretty and my document’s text changes automatically. Easy peasy. Apparently it’s a bit more complicated to apply typography to a website. In Smashing Magazine there was mention of CSS, sIFR, HTML, JavaScript, hyphenation, and so on. I guess I have a lot to learn then.

So while I don’t know how to implement the typography onto my soon-to-be-launched website, I do know what types of typography may work with the design I’m envisioning. I came across a great website that can inspire me to think big. Speaking of big, this link lists 75 portfolio and profile websites with great typography, and I noticed that nearly every single one features big, bold, dominating text. Also, most of these have some kind of quirky, out-there tagline. Are these prerequisites for having a great website?

From the list I reviewed, I really like the fonts featured on these portfolio websites:

I think that I will go with all lower case font throughout the header or perhaps try all caps. Maybe some variation of an Arial Bold would work but again, I’m not sure. I think it may be too early to determine the final typography. Once I’ve chosen the colors and the design is laid out, I can then decide what typography will match the message I’m aiming to convey through the website.

The First Draft Sketch of My Site’s Wireframe!

So two weeks ago I didn’t know what a wireframe was and today I not only understand what it is, but I have just completed my first draft sketch of my own site’s wireframe! I’m extremely excited to jot some ideas on paper and I look forward to see how it evolves from here.

I decided to keep my site content-light, simple, and clear. Further, I want to convey that I’m both a writer and a designer. I wasn’t quite sure how to feature this on the home page but I think a nice slogan, plus a photo of myself that is slightly interactive will do the trick. Specifically, if you hover your mouse on the right side of my face, which is the design side, you’ll see a digitized, artistically manipulated photo of myself. If you hover your mouse on the left side of my face, you’ll see me un-digitized and more serious, reflecting the journalist, writer, reporter, and corporate communications specialist in me.

Since I’m featuring myself as a writer and also someone who is creative, I think it’s important that I list my most recent blog entries. I was not sure where to place this box so I’ve put it right below my image. Additionally, I’ve placed a “contact me” form right next to it. I’m not convinced that this is user friendly or whether it can fit above the fold, but seeing that this is a first draft sketch, there is room for some adjustments.

I’m excited to see where it goes from here. Now I need to make this sketch come to life digitally and recreate it in Photoshop. How? I have no clue seeing as I’ve just learned how to crop and select items and nothing more. A few challenges lie ahead but I’m eager to get started and see my creation evolve into a full-fledge website!

Deconstructing my favorite food store’s website–Trader Joe’s!

Besides my family, friends, constant electricity and water, and fast and cheap Internet, I truly miss Trader Joe’s when living abroad! From “Two Buck Chuck” wine to precooked, frozen edamame for $1.69, nothing beats Trader Joe’s in my opinion. It’s not just the high quality-to-price ratio that TJ offers, but it’s the friendly staff and health conscious, unique items supplied by the store.

For those of you who don’t have the privilege of living near a Trader Joe’s and have not heard of it, TJ is a privately held chain of specialty grocery stores headquartered California. Today, the chain has more than 350 stores nationwide with about half of them in southern California (I’m a California native so TJ is like my Publix).

So let’s check out whether Trader Joes’ online presence is as cool as its in-store experience. Here goes my Trader Joe’s website deconstruction.

1) I’m seeing the “Trader Joe’s” logo or at least its text logo three times in the header portion or top of the page. I think it’s a bit excessive. I only need to see it once to know that I’m on the right webpage.

2) I immediately notice that there is no general search bar. Instead there is a search bar to locate a branch via postal code. Since Trader Joe’s offers hundreds of products I believe it’d be worthwhile to put a product search bar so customers can easily search for the item they are looking for and find the nutrition information and perhaps some recipes.

3) There is no social media links anywhere on the homepage. No Twitter, Facebook, or blog links. I think in today’s world and because Trader Joe’s tends to attract educated, new age customers, it would benefit the company immensely to have this social media tools activated. If Trader Joe’s wanted to feature a new product, it would be a perfect place to create some buzz.

4) The “Bookmark and Share” button in the right-hand corner is not big enough. Moreover, I think it doesn’t serve its purpose. Once the mouse hovers on it you have options to Tweet about the page or share it on Facebook. It is taking up such a small corner of space that I think people would miss it. Further, I’d prefer not having to hover over it and would like to see the actual Twitter, Facebook, etc. icons displayed on the page.

5) I like that everything is above the fold. The main page is not content heavy and doesn’t require any scrolling down.

6) Several years after launching their website, and more than half a decade since they launched their first store, Trader Joe’s still does not provide online orders. Customers can only buy items in-person.  To be aligned with today’s changing times I believe that TJ should take advantage of their web space and offer online orders.  They offer tea, coffee, vitamins, pet food, cereal, dried fruit, nuts, and other dry products that pose no limited expiry date or shipping issues so I really don’t understand why TJ does not provide online retail services.

7) I’m familiar with TJ’s weekly flier and newsletter and I like that they are sticking to one rustic theme, which is also similar to the interior design of their stores and the t-shirts staff members wear. However, I think the images in the header and down below clutter the page. Also, I’m a huge fan of simple, clean websites so I’d like to see it with a white background.

8) I notice that there is a lot of space on the right and left side panels; basically unused space. I think they could use it a variety of ways such as listing their latest news, press releases, or maybe market their items with some powerful in-house ads.

9) There is no advertising on the page. As I mentioned in point #8, the space could be used for advertising. Trader Joe’s tends to re-label items with their own brand but in some cases they bring in items that are non-TJ, such as Cliff Bars and Fage Yogurt. Perhaps, those brands could use that space to market their items. Or TJ could list their specials of the week in that space.

10) I’m confused by their “On the Counter” section. Even as a loyal TJ customer, I have no idea what these counter products are all about. It should be better explained.

11) I notice that users do not log in and can only browse the site. I think having a more interactive site might be beneficial. For example, users could save recipes in their own account folder or share recipes with others. Or perhaps chat with other TJ lovers. The options are endless if TJ offered its customers with membership to their site and allowed for some interaction.

12) The “Home” and “Products and Guides” header tabs don’t have drop down menus. I find that strange when the other ones do. Plus, I think as a user, I’d rather go directly to the page I’m looking for rather than click on the main tab and then search through that page to get to where I want to browse. Perhaps this is a marketing tool so that users must see the main Home page and main Products and Guides page?!

So that’s my deconstruction of the Trader Joe’s website. Yes, I have a lot of constructive criticism for their web team, but it’s only so they can have a website that is just as strong as their overall brand.  And still, 5000+ miles away from any branch, TJ is one of my favorite grocery stores by far!

 

Amazon.com’s Evolution via the Super-cool (and slow) Wayback Machine

I had no idea that the Wayback Machine existed. For those of you who have also been in the dark, the Wayback Machine saves working versions of millions of sites and pages. For an aspiring web designer like myself, it is a useful tool that let’s people view a site’s progression from its early days to its present state by showing snapshots of the site at certain points in history.

I decided to take a closer look at Amazon.com, one of the world’s most well-known online retailers. Today the company sells everything from bars of soap to TV screens, in addition to books–which it initially began selling. Given its success in the online retail world, Amazon.com seemed like a worthwhile company to analyze.

Although Amazon.com’s first online book order took place in July 1995, the Wayback Machine’s initial Internet archive crawl of Amazon.com dates back to the late 1990s.  In October 1999, Amazon’s website looked like this.

As you can see, the website is pretty basic with a lot of white space, plus some text and links to different web pages that takes users to directly where they want to go. I notice that there is very little advertising banners and no clear Amazon.com logo. A year later, in February of 2000 the company’s website changed slightly. The logo is more visible and the left-hand side panel is organized into concise tabs with much less text, and the panel on the right-hand side features new releases and articles. Yes, articles! Today, Amazon is a place to buy items, not to read literary prose so this really shows how much the company has evolved.

In mid-2003, Amazon’s website looked like this. It surprising to see that the website hasn’t changed a whole lot since the late 1990s. It still features too much white space, and is text-heavy, but now it is slightly more organized and advertises more books. The sub-tabs on the header has changed a bit, reflecting a more retail-heavy approach as opposed to it’s 2000 layout where it was advertising “free E-cards”.

By 2006, Amazon’s website looked like this. The major change that I see is free space being utilized, an increase in visuals, and an improvement in their marketing. Moreover, there is less clutter of tabs and sub-tabs in the header. However, there is an addition to the header–an interesting looking banner advertising a Stephen King item.

Today, Amazon’s website is not too far off its origins in terms of color and framework. With a left-hand side panel that indicate its main retail departments to its orange, blue, and white color scheme, the Amazon.com is a good example of a website that was carefully grew while keeping its users in mind. Today’s website is more visually appealing than the former version. Moreover, the search bar is in a more convenient space and is much wider. The disadvantages of today’s website is the in-your-face Kindle marketing. It has been there for months now and is not very dynamic. I feel that it should change everyday or at least rotate between various homepage visuals to entice users.

In all, Amazon.com’s website is resourceful and powerful. Given their impressive success over the last 17 years, it is clear they are doing something right!

Good Design-Google

When thinking of good design the first object that comes to mind is an intangible one: Google. Google embodies it’s arguably good design in that it is simple, straight-forward, and easy to use. Like the company’s main search page, Google’s services and offerings are created with consideration of its users and ensuring that everything is clear and simple. From previewing documents to creating alerts, Google makes people’s lives easier which is aligned with their concise and simple web design.

I don’t possess the right skills to create good web design like Google’s team has but I do hope to get there eventually. As a copywriter working in corporate communications for a large company, I produce content such as press releases, news items, newsletters, annual reports, and everything in between. I hope that in addition to those tasks, I will be able to design and improve the company’s websites and ultimately become a stronger communicator.

I don’t frequent news sites focusing on web design and I should probably look into it, but for news alone, I often visit the following sites: New York Times, Wall Street Journal, Smartbrief.com’s UN Wire, strategy+business, the Economist, and several others when I have the time.  I am inspired by all of the sites!