Making a Beautiful Navigation Bar

Personalize Your Navigation Bar

We all know there’s nothing worse, and nothing more 90s than a simple, vertical, bullet-point navigation bar. In fact, people will probably leave your website immediately if they see this on your home page, especially if the links in that bulleted list are bright blue and turn red when clicked. *Mental cringe*. Today, it’s very simple to create a crisp, beautiful navigation bar that reflects your website’s content as well as your wonderful, competent, web-designing self.

The nav bar is of ultimate important (oh yes, we’re speaking in html slang now because we’re all experts right?—or at least we can pretend). It is the first thing visitors to your website see and it should appears on every page of your site. You want to be cognizant and conscious of your choices: choosing appropriate fonts, colors, and styles that are not only reflective of your personality but are also easy to see and use. I think, with nav bars and with all web design really, the key is to be subtle and simple. I designed my home page on my website with a simple navigation menu that utilized simple colors and animation. How did I do it you may ask? I’m not really quite sure, because it took me forever. This html stuff is tough, hence the lateness of this post. But I think we’re all starting to get it down.

I started with writing my html code, which I kept it pretty simple. I wanted to keep my home page as mostly minimalist to feature the home page banner I made in photoshop complete with Amelia Judith Ohm logo. I also like to keep everything in sections or containers or something to keep everything organized and keep the option open of adding a background color or alignment command to those separate sections. The nav bar html is something we went over in class so I won’t explain it too much. I’ll just say to make sure your links are linked to the write pages within your website. There’s nothing more frustrating for a user than to click on “Photo” and you end up on a personal blog. Here is my HTML:

Image

On to the CSS code. First, I wanted to make sure my nav bar was in the center of my screen with centered text in a horizontal line. To do this I first specified {text-align: center;} under ul to center my text. I then centered the entire container holding my nav bar by specifying {left:auto; width:100%;} this trick ensures that your entire nav bar will be centered on the screen. Next I specified {display:inline-block;} under li to get my navigation buttons in a horizontal line as opposed to a vertical list.

Next came the fun part. To get the nav bar to be interactive I utilized the pseudo classes of a (a:link hover active visited) to personalize how my links interact with visitors to my site. The first thing I did was have my links slightly scale up when hovered over and clicked. I kept this scale up very subtle so it didn’t look tacky. To do this I first specified that the links should start out at their normal size, and when interacted with the interaction should “ease-in” and take half a second to complete. Here’s the code:

a {

-webkit-transform: scale(1);

-webkit-transition-timing-function:ease-in;

-webkit-transition-duration: .5s;    }

I then made a pseudo class of a for when it is hovered over and active. Here is the code:

a:hover, a:active {

background-color:#9A9293;

-webkit-transform:scale(1.01,1.01);

-webkit-transition-timing-function:ease-out;

-webkit-transition-duration: .25s;
}

This code specifies that when hovered over or active the links should over the links should take on a new color (I chose a light gray) and should scale up by .01. When they are no longer being hovered over the links should “ease-out” back to their original appearance and this transformation should take one quarter of a second.

Here’s how my entire CSS for the nav bar ended up looking:

Image

I enjoyed working with this code because it was easy to write and tweak, making it a great skill for us beginning coders to have. I hope one or two of the tools I used can help make your nav bars beautiful and modern. Here are some shots of the code in action. I made the banner in photoshop as I mentioned. It seems to be struggling to work online–I’m still working out some bugs–but hopefully  my live website will look just like this representation very soon.

Image

Image

Image

Happy coding

ao

Advertisements

homepage animations

Blog #9

For my website, I wanted a really cool homepage with some menu animations.  I made some circles in photoshop that were going to be my buttons.  After getting them into Dreamweaver, I felt they needed something extra.  I first added a hover effect that makes the circle fade as you hover over it.  Then I added an animation that is also on the rollover. I will show how to make all of these happen.

This is what I started with:   

Capture3

and this is what I wanted it to look like on hover:

Capture1

  1. To get the fade out hover effect:

In your CSS sheet write IMG.fadeout {

Then you put the starting opacity, the amount of time for transitions (in seconds). You have to write this multiple ways so all browsers can read it.  You end up with this:

IMG.fadeOut {

opacity: 1;

transition: opacity .25s ease-in-out;

-moz-transition: opacity .25s ease-in-out;

-webkit-transition: opacity .25s ease-in-out;

}

Then you have to write it in for the hover part.  This is where you get to specify the amount of opacity you want it to have when you hover.  I went with 55% opacity.

IMG.fadeOut:hover {

opacity: .55;

}

You don’t actually end up doing anything with this tag.  When you’re in your HTML page, you insert your image that you want to fade out and add the tag “class= fadeout” .

*another helpful hint: you can add multiple class tags to something by just separating them with a space.  For example, I used the fadeout tag along with my animation tag and it ended up looking like this: “class= fadeout  animation”

  1. To get the animation effect.  This one was a bit more complicated.  I wanted the circles to not only fadeout, but to grow when I hovered.  I looked up the CSS for this and constructed it to fit what I wanted .

.animationcircle:hover {

-webkit-animation: cssAnimation 0.9685s 1 ease;

-moz-animation: cssAnimation 0.9685s 1 ease;

-o-animation: cssAnimation 0.9685s 1 ease;

}

The first line is what I named the CSS tag. “animationcircle”.  This is what you put in your class tag in your HTML sheet.  The next line is the amount of time it takes to see the effect happen (basically the instant you rollover it).

Then you add all of this:

@-webkit-keyframes cssAnimation {

from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

to { -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }

}

@-moz-keyframes cssAnimation {

from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

to { -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }

}

@-o-keyframes cssAnimation {

from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

to { -o-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }

}

I wanted no rotation, and no skewing or translation.  All values for these are zero.   The from category is your starting point, so my scale starts out at 100% or 1 in this case.  Next you add the “to” line.  This is what you want to happen when you roll over. I wanted my circles to double in size, so I made the scale value 2.  These values are very easy to change around, and if you want to change your rotation when you hover or your skew, that is also easy to do.

here’s my website to see the full effect: jenniferknight.x10.mx   (You might have to zoom in your web browser because it seems to load differently on all of them)

That is how I got my homepage menu working!

JK

Transparent Colors in Dreamweaver

I wanted my website for this class to reflect my personality in its aesthetic design. I’m a fairly linear thinker; I like for things to be very organized and streamlined, divided up neatly into boxes and lists. For my website, I got the idea to use containers in CSS to make each heading and paragraph inside its own personal space, and color coded the containers on each page according to their respective colors on the navigation (Home) page. The About page is pink, the Photo page is purple, and so on.

I did this by making containers in CSS of the appropriate dimensions and specifying the font and size and everything. I chose the colors for each container using the color select option (for background-color) in Dreamweaver:

Image

I did pink for the first heading on the home page and all the headings and text on my About page. I chose the color I wanted using the first and second sliders (color and lightness):

Image

But the third slider, I discovered, controls transparency. I adjusted it and made the pink boxes more transparent. Then I clicked on the RGBa option in the bottom of the color choosing box:

Image

This shows the amount of Red (255), Green (76), and Blue (0) coloring in my chosen shade. The last number is the opacity (.70 or about 70% opacity). Then I copied and pasted the color code into the CSS objects/containers for all of my headings and everything that corresponded to the About page (which I wanted to be pink). Then I did the same thing for all my other pages, choosing different colors for each page but 70% opacity for each.

The result looks really cool. It gives a little bit of depth and dimension to the page while still keeping the elegant, streamlined design I wanted. It was really easy and it kept my page simple while not being too plain.

J.E.B.

Blur Hover Effect

As you may have noticed in my Photo Essay, I chose to place each image in a separate page, as many of you did, and navigate through each page to view the essay.  For my navigation, however, I simply used the photo as the means for advancing to the next page.  This both simplified and created a challenge for me:  on one hand, it kept the stream-lined, simple design I was going for, on the other, it leaves my audience with little understanding of how to advance to the next page.

With that challenge in mind, I set out to find a hover effect that suited my need.  I came across a fantastic website that has all sorts of simple tutorials for both CSS and HTML, as well as other languages, that provides a demo, gives you the CSS and HTML code to copy, and walks-you through the design purpose and techniques for implementing it yourself.  If you’re looking for some help learning something fun, check it out:  http://designshack.net

For me, I found the Blur Effect would work perfectly.  Here is how to implement it:

The blur effect is a fairly simple line of code that when used, creates a blurry view of the image it is applied to when a mouse rolls over it.  So the end result will look something like this:

Image

To begin, insert a section of code into your CSS titled “.blur img”.  The tutorial advised adding several lines of transition code to tell each browser what to do with this effect since it is a newer effect for CSS5.  Then followed the direction to use this effect only when hovered, as noted in the “.blur img: hover” code.

Image

Then, go to the HTML sheet with an image you would like to apply the blur effect to and add the class distinction into the code.  The tutorial suggests keeping this section of code within a <div>, if you haven’t done so already.

Image

And there you have it!  You now get a blury image when hovered to signal your audience that this action will take them forward (in my case).

Image

-SC

 

Let’s Go Rally!

After combing the web for some intriguing websites, I found that A LOT of them were boring with interesting content. More exploration landed me in the midst of a nifty website that fascinates me: http://rallyinteractive.com/

Screenshot 2013-10-07 at 10.35.00 PM

This website, called Let’s Go Rally, has a user interface that blows my mind. The main focus of this site was its fluid shape movements; it uses mainly triangles to display its content (which I’m still not sure is exactly).

Screenshot 2013-10-07 at 10.35.55 PM

When scrolling over these triangles, they move and display text saying “explore tid bits..”

Screenshot 2013-10-07 at 10.36.08 PM

..and upon clicking, shape-shifts into a circle displaying how many views, likes, and feedback this particular post has received. It also includes a link that leads to said post.

Screenshot 2013-10-07 at 10.35.42 PM

The navigation of this site could not be any more user friendly. I always know where I am because there are only four different pages, that are clearly labeled and highlighted when inside: the home page, about page, a page showing clients, and a contact page.

So you click up at the top of the browser to switch pages:

at the tippy top,                    Screenshot 2013-10-07 at 10.40.25 PM

or on one of these arrowsScreenshot 2013-10-07 at 10.40.33 PM

Screenshot 2013-10-07 at 10.44.58 PM

The top clearly has “About” highlighted.

Screenshot 2013-10-07 at 10.44.14 PM

I really like this minimalistic approach at navigation, as well as the simplistic colors of black and white, aside from the color in the triangles. This smooth sliding design creates a site that gives the viewer something interesting to see (their product) and information they are lusting for (the side pages) all navigational in a pretty appealing way. Moving pictures and links are ALWAYS something that makes me look at all of the links. I also really enjoy the way that the designers places their product at the bottom of every page, always available to the consumer.

Screenshot 2013-10-07 at 10.53.16 PM

Screenshot 2013-10-07 at 10.52.57 PM

Screenshot 2013-10-07 at 10.52.45 PM

This site, through its particular typography and text, is trying to relate to its customers, consumers, and viewers on a personal level. In the “About Us” section, they talk about being three normal guys just trying to signal boost their clients. In their client section, their header looks like this:

Screenshot 2013-10-07 at 10.56.23 PM

I would really love to capture this elegant fluidity that Let’s Go Rally exhibits. I don’t want my viewers to get lost or overwhelmed; therefore, I need to have something stimulating like the moving pictures, that remain ambiguous until clicked. I also really like the huge black font on a white background. It’s clear, crisp and sleek. Although animation like on this site would be extremely desirable, even just being creative with the changing pictures as links would be a great addition to a simple web design. Not that my site is going to be simple (no promises).

-Cody

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

Movement Without Movement

http://www.kevinlucius.com/#_

Image

 

So I found this site by Google-ing “personal web design inspiration” and it turned out to be really similar to what I want my site to be. I know literally nothing about this guy except for the fact that he’s apparently tall and has a cool website. At first, the color scheme and typography caught my eye. I really like the neutral tones he uses, starting with the wood paneling at the top. It’s different and natural and easy to look at. If you look a little more closely at the lower background, it’s a roughed up checkered pattern, which I really like. Again, it’s easy to look at. You could ignore it or stare at it and it doesn’t take away from the overall effect of the website, which I would say is to make the viewer comfortable.

You can’t tell from the picture, but if you follow the link at the top, you’ll be able to see that whenever you click on a picture or a link, it doesn’t completely switch pages, just simply opens up on the same page. I can’t remember exactly what this is called, but Professor Campbell mentioned it on Thursday and it’s exactly what I want to do. Not only aesthetically, but also rhetorically, because I really feel that this device forces the viewer to stay on the same page, flowing from one idea to the next. You move through the website without actually moving (that’s the best way I can think of to describe this technique, sorry). There’s also movement when you click on the different tabs right under the wooden design.

He also has his social media links at the very top, sort of separate from the rest of the site. I’m not entirely sure why this is so separate. Maybe a common reason for finding someone’s website is to follow them on Twitter on contact them or something. That’s not my own personal reason to seeking out people’s websites, I just like to see how they want to present themselves to the world. I’m usually either completely disappointed or completely inspired by design choices.

 

SJM