Blog Post 4: Stoney Clover CSS Examples

When trying to think of a good website to talk about, websites of startup companies first came to mind. These days when someone builds a company from the bottom-up, a big part of its branding is the company’s website.

If a company wants to survive and thrive, it most likely needs an easy accessible website that reflects its brand and personality that make people want to look more into the brand.

I know when I am shopping for new products, etc., if I see a really well produced website, I am intrigued and want to look into the product more. This is why I chose stoneycloverlane.com because it’s a bracelet business that was created by two teenage sisters that also has a great website.

Right away when you see the website, it screams the brand’s personality. I like their use of colors and illustrated elements throughout the site, definitely elements I can envision using in a site of my own.

Screen Shot 2015-03-05 at 12.13.42 AM

The thing that I loved the most about the site was how the navigation section is at the top of the site and not horizontally across the entire width of the page.

When you hover above the navigation buttons, an illustrated highlighter mark appears, which is a pretty cool hover technique to use instead of just using a different color for the hover.

Before hovering:

Screen Shot 2015-03-05 at 12.01.10 AM

After hovering:

Screen Shot 2015-03-05 at 12.01.06 AM

When inspecting the CSS for the entire website, I found that the website uses fancyBox, which is “a tool that that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages,” according to the fancyBox website. When inspecting the navigation element, the CSS is styled so that the hover becomes a GIF.

When looking for different websites, I also realized that a lot of businesses use large rectangular and square photos for further navigation on their sites. Here are a few examples:

 AirBnb:

Screen Shot 2015-03-04 at 11.47.37 PM

Sonix phone cases:

Screen Shot 2015-03-04 at 11.47.19 PM

 

Bauble Bar:

Screen Shot 2015-03-04 at 11.48.24 PM

When scrolling down on these sites, there is a navigation bar at the top and square and rectangle clickable elements follow. It is definitely an interesting trend in website design that both retailers and journalism publications are using. I would also like to use this element on a site.

When inspecting the element for the placement of the different navigation squares when you scroll down, it seems they were able to center and position them based on how they manipulated the margins and padding, which can easily be duplicated for another website.

Advertisements

2 thoughts on “Blog Post 4: Stoney Clover CSS Examples

  1. I think it’s cool that the brand is trying to personalize its experience by adding a unique hover feature like the one you pointed out, but it also seems a little unnecessarily complex to swap a word for an image in the CSS. I’d like to imagine that there’s an easier way to gain the attention of a site visitor than that. There was also a slightly annoying delay between the word and its highlit counterpart when my mouse hovered over the navigation button, which I imagine is the result of an unconventional hover state.

    Regarding the block arrangement, I think it might be one of the best illustrations of the inherent beauty of the grid system on the web: effective at conveying meaning, eye-catching and organized.

    Like

  2. I really like the idea of using an image as a way to navigate a website. I think the technique works especially well for a product website, and you provide several great examples. I would be very interested to consider how this technique could be used on a news site. I hadn’t considered many navigation options other than a standard header at the top of the page. This post definitely provides some much-needed design inspiration!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s