Love at first click.

I browsed through A TON of websites. But seriously. I found blacknegative.com on page 87 of www.bestdesigns.com. See for yourself: www.thebestdesigns.com/page/87

It was love at first click.

Black Negative uses its website to show off their work of branding and marketing. They SHOW you what they do at the same time they are TELLING you what they do. I’ll explain more of this a little later.

This page was unique. And I don’t mean regular unique. I mean it’s a uniquely unique page. You start out here:

 Image

And then you are instructed to click and drag to find out more about what blacknegative.com is. The navigation is so simple, but it stands out so much from your typical up and down scrolling navigation. Another thing that is great about this navigation and layout, is that the viewer is getting a different experience with every click and drag…there is literally no room for boredom or loss of interest. You want to keep looking because you have absolutely no idea what could be next. No worries if you get lost though. If you want to go back to another page, just click the “menu” item at the bottom, and you can scroll through to find your desired page (see picture below)

 Image

All that being said, there really isn’t that much cohesiveness to the whole layout. Since every page is different, the viewer is always looking at different fonts, alignments, and so on. What I think is so great about Black Negative is that each slide utilizes different methods of design to draw in the viewer. For example, on the slide that I have pictured below, you aren’t just getting photographs; there is video and music as well. Everything about the page helps you to jump into that individual atmosphere. You get totally sucked in…until you go to the next slide and then you are somewhere else entirely.

Image

I suppose that there is a certain amount of similarity between the slides. The colors are all soft, there is a lot of transparency and layovers. Nothing screams out at you, everything is more like a lullaby. I know this all sounds pretty cheesy, but once you check out the site, you’ll probably understand what I mean. 

SG

Advertisements

Web analysis- TN Tourism

 

d.I started off by looking at “great website designs” and after scrolling through, one in particular caught my eye.  It is a website for the state of Tennessee, and it is advocating tourism in the fall season. The first image you see upon entering the website is of wax candles that are in fall colors.  It is a close up shot, and it draws you in because it has a nice composition.  Over that is a circle with the word “fall” in large font, and Tennessee 2013.  Above this is a semi-translucent black bar with tabs to navigate various sections of the site. The layout, however, is very vertical on the homepage. As you scroll down, the layer with the candles slowly lifts up to reveal the next photograph which is of food you can get when visiting Tennessee in the fall. On the bottom of this image is an area to click to go to that section of the website if that is what you are interested in.  It continues in this manner for the next three images which represent music, shopping and fall foliage.  All of the images are compelling and have fantastic composition.  The font is also fun and changes with each photo.

music dd

I think this site works for me because it is very visual and the navigation is pretty cool as you scroll down.  Initially the pretty colors in the candles caught my eye and as I scrolled down, each of the following images were just as good.  The font was also something I particularly enjoyed.  I especially liked the one for the “fall foliage” section which appeared to be hammered from metal.  The whole website has a really cool vibe to it.

Obviously the purpose of this site is to get people to travel to Tennessee in the fall months.  I think it does a good job of persuading people because the website is so cool, and this might make people think that TN must be pretty cool too.  Each page is also informative, so people who are interested in travelling will have all of the necessary information to do so.

When trying to figure out the design for my site, I think I’ll keep in mind that compelling photos and images really help to build a foundation for a good site.  Font also plays a role in drawing the viewer in.   Obviously, the cool navigation is great, but I’m not sure how attainable that is as a “beginner”, but it’s definitely something to keep in mind..

http://fall.tnvacation.com/

 

JK

Michaelis Boyd

Utilizing the advice of some of my class mates, I also found that Site Inspire was a good starting point to find some creative inspiration for my own website and thought I would share my findings with all of you.

The site of Michaelis Boyd, an architect and restorative general contractor/designer, caught my attention because of how graphic yet simple the homepage appeared.  It is simply a semi-transparent overlay of his initials with an image from his portfolio displayed in the background.  Upon linking directly to the site, I found that there were some interesting features to this opening image as well.  First, it changes with each visit so as to display numerous pieces of his work instead of just one.  Below is an example of one that I landed on.

Image

Also, once on the landing page, scrolling down eliminates this landing image and reveals the true homepage of the site.  I enjoyed this fun welcome and also the way that the page was formatted.  It begins with a simple navigation pane across the top with section headers of work, about, journal, contact, and a search box.  In the upper left, the most frequently viewed part of a webpage, remained his name.

Image

Hovering over each of the navigation options reveals further sections that fall under each category to help a visitor arrive at the precise information they are looking for.  Alternatively, it is also possible to navigate to these additional parts of the website by hovering over any of the images listed in a block-style gallery on the remainder of the page.  Each image changes upon each visit as well to highlight one of the firm’s past projects.  While hovering over the image, a transparent green box appears and reveals the title of the project and a few words describing what category it is classified under or what the project focused on.

Image

In addition to the photographs, the homepage also displayed grey boxes with a green focus word and a short quote about one of the key focuses of the company as they embark on their projects.

I felt this was an excellent method for bringing to life the mission of the company and providing evidence for their work to the audience, potential customers, in a professional, yet appealing manner.  I felt like the site, with its changing homepage was designed just for me and tailored to allow me to chose my preferred method of navigation.  I could either enjoy scrolling through the projects, or search specifically for one that I wanted to see.  The combination of features and navigation capabilities left me feeling capable and well informed without frustration.

The colors of the site, a deep green and light grey were pleasant and complimented the purpose of the firm well.  Those are two colors I would associate with construction and restoration and they are also very pleasing to look at repeatedly, keeping that professional yet simple flow.  The design of the blocked images was also very appealing and continued that professional feel.

These simple, yet professional features are all elements of design I would like to incorporate into my own site.  I feel the layout of projects on the homepage as images that can be hovered over or clicked on for additional details is a very appealing way to display a graphic portfolio without overwhelming the audience.  While I feel the revealing of a new page after beginning on a landing page might be more advanced coding than I will learn in a few short weeks, it is something I would be interested to try and incorporate as I gain experience.

Checkout the site for yourself and learn more: http://michaelisboyd.com/

-SC

simple and pretty

I want my website to be professional but still creative. As graduation looms I want a website that will impress future employers. Looking for jobs in the writing and communication fields allows for a lot of room with creativity. I really like the simple websites. I want to utilize lots of white with pops of color in order to draw a viewer’s attention.

My inspiration for my website is from the website/blog called the LoDown. It is run by Lo Bosworth, my favorite Laguna Beach girl. Yup.

 

blogexampleLO

I actually started watching her YouTube channel and am even more inspired by her open sequence of footage. I love the way the sun shines through the top of the video. I would like to add a video entry to the website to really show creativity and skill (a skill I would have to teach myself of course…)

blogexampleLO2

I am also interested in using circles and squares as links to other pages. I am pretty sure that most of that would be created in Photoshop and then hyperlinked in Dreamweaver. I want this photoshoped shapes to be the navigation and links throughout the whole site.

blogexampleblogexample3blogexample4blogexample2

 

I found these four websites on siteinspire.com. I really liked these four sites for their basis layouts and minimal amount of colors. These sites are very clean are a result of the simple design and basic colors. Even with a simple design I find it to be very accessible, useable, and professional – all three aspects I wish to create with my website.

 

-RLB

Nudge – Website Analysis

After perusing the internet for a new website to analyze, I came across Nudge  – a design studio based in Charleston, SC. I was attracted to the design of this website mainly because of its simple design. Before I go into a more detailed analysis, here are some screen shots of the website.

Screen Shot 2013-10-06 at 8.27.14 PM

Screen Shot 2013-10-06 at 8.27.47 PM

Screen Shot 2013-10-06 at 8.28.10 PM

Screen Shot 2013-10-06 at 8.28.19 PM

At the very top of the website home page, you can find the links ‘Work’, ‘Studio’, ‘What We Do’, and ‘Journal.’ Underneath these links is a small yet bold blurb of information about Nudge, which gives the viewer a general understanding or introduction of the company. Below the text are a group of images (current or past clients) and the viewer can hover over each of the images to get more information about that particular project (see the second image above or visit the website).

The color scheme is a white background with black text and gray accents (some of the boxes). The typography is composed of three different typefaces – ‘nudge’ (looks like handwriting), sections of the website (‘work’, ‘what we do’, etc.), and the body copy (the text that makes up the paragraphs). Overall, the typography is very easy to read throughout the website and the variations of typography make the website very organized.

The feel of the website is professional and simple,  which resonates with the audience – potential new clients that are looking to hire Nudge for a new project. Its ease of navigation attracts new clients and showcases current and past projects. Using photos and different typefaces throughout the website creates a consistency and creativity embedded in the Nudge brand.

One of the biggest takeaways from this website is the simplicity of design and emphasis on visuals. Its organization and grouping of images on the home page attracts viewers and entices them to continue exploring the website for more information. For some reason, I had the idea that I couldn’t have a white background for my website; however, I think Nudge really demonstrates how to design a successful website with a white background with black text and using images to add color to the site.

“The greatest ideas are the simplest.” – William Golding, Lord of the Flies

– LH

Collegeanswerz Analysis

There’s this really cool website called http://www.collegeanswerz.com/ that’s really amazing and really well designed.  I think I’ll write my blog post on it ;).

Lets start with the home page.

home

First off, it does a solid job of conveying what the site does, why it’s different, and how it works.  The picture of Pitt’s page is useful in showing what it’s about quickly and effectively, and the phrases capture the essence of the site.  The colors are also alright, but still plain.  Aesthetically, it’s ok, but could definitely have some nicer pictures and stuff.

 

 

Now let’s consider the University of Pittsburgh’s page as an example of a college page.  To start with, I really like how all the information is laid out.

pitt

  • You immediately get a quick sense for what the school looks like via the picture carousel.  This is both aesthetically pleasing, and allows you to have an image in your mind of what you’re reading about as you read through Pitt’s page for more information.
  • You also have quick and easy access to the most common information about the school right next to the pictures.  This is useful if you want to access the information, and is also useful to help give you an idea of what the school is like for you to visualize as you read more about it.
  • The navigation bar is fine.  Simple, straightforward, does it’s job, doesn’t do anything stupid.  Same with the links to the questions.
  • The current question that has the light gray background is great! It draws your eye there.  Speaking of ‘drawing your eye’, the page as a whole does a good job of directing your eye by visually showing you what’s important.  The large heading and the pictures immediately draw your eye there, which allows you to get a brief overview of the school.  But that section with it’s white background isn’t too eye-catching where it keeps you inching there after you got your immediate overview.  That would be detrimental, because once you get your overview, it’s important to draw the eye to the actual content: the answers to the questions.

Let’s move on to the information section of Pitt’s page.

info

The idea behind this design is based off of the idea that this information is better presented adjacent in space rather than stacked in time.  See this amazing blog post: http://37signals.com/svn/posts/1128-learning-from-bad-ui.  Basically, information that is adjacent in space is information that is all next to each other, sort of clumped together.  Information that is stacked in time is presented in a series of web pages, with each web page being spacious.  Stacked in time is more aesthetically pleasing to the eye.  Adjacent in space allows the user to access the information more quickly.  It’s a trade-off, and in this case, I think it’s nice for the user to have all that information that he might want in front of him.  Other websites have it stacked heavily in time, meaning there’s tons of pages to navigate in order for you to find the information you’re looking for.  It could be difficult to find the right page.  And you have to wait for these pages to load :(.  See http://colleges.usnews.rankingsandreviews.com/best-colleges/university-of-pittsburgh-3379.  I think it’s better to just “put it all in front of the user” (in this situation).