Getting creative on websites can sometimes feel constrained due to traditional layouts and verbiage, and most certainly when it comes to navigation bar and menus. Many of us think that we need to have the standard, cookie-cutter menu navigation bars that have become the “norm” for almost all websites. You know the type:
Most are similar in wording and format. I’m not saying that there is anything WRONG with this per se but if you can, know that outside of conventional thinking and web design, you can get creative without compromising easy navigation of your site.
Websites are certainly your worldwide face but even the prettiest of girls can use a little makeup. Sometimes that’s demure or other times an unexpected shocking red lipstick drives home a certain affect. So can your website. Don’t be afraid to try and incorporate some artistic menu design ideas. I had a ball researching some pretty interesting and witty design elements for menu navigations.
I thought this was a great use of the industry-driven design even with the typical wording. Another idea would have been to use the bricks themselves as the navigation bar.
You don’t see many vertical layouts for navigation bars so this really stood out to me. I bet it does the same for the current and prospective clients too!
Most of us would enjoy seeing a fun and innovative menu layout. This one made me comment out loud when I saw it “oh, that’s different”!
Don’t be afraid to use representative artwork and images either with or in-lieu of typical or generic menu names. It gives a personalized look to customary naming conventions.
When to keep it standard vs. using Atypical menu choices
I would say this is probably governed by the industry you’re in. If you are let’s say a law firm, then maybe you wouldn’t use the layout above but creative wording can be your breakout of the blue suit moment. Don’t be afraid to use your thesaurus here as long as you don’t compromise the ease of use and appropriate industry jargon. Example: I’m a recent law school graduate looking to work at “JP Law Firm” and upon reviewing their website, I see a menu item titled “The Brief” (which is a legal term for a written document presented in court arguing why the party to the case should prevail). It would not be a tough leap to guess they were using that instead of “About Us”. It’s a witty play on words which can be a little amusing and personally, I’d be impressed by the break away. Not everything needs to be starched and buttoned up. So with this said:
TGIF! Time for some free stuff! Check out this collection of free web buttons, provided by Sketchdock.com. You can download the collection in .PSD format for easy editing in Adobe Photoshop. Enjoy!
Have you ever wondered how some websites are able to integrate images so seamlessly with the background of the page that they just blend in?
Most of those websites accomplish this by removing the original background of the image and either making it transparent (see-through) or changing it to another color or another background all-together. It’s all matched to the theme of the website.
For example, notice the pastor and elder of the First Church of the Living God website (created by Design Theory) in the image below. They blend right in with the clouds in the background.
Today, I will be showing you how to remove the background of an image easily and quickly with Adobe Photoshop.
* Before you start, make sure you have opened an image in Photoshop (File > Open) *
Step 1: Select the Magic Wand Tool
Select the Magic Wand tool, located in the left menu bar.
Step 2: Configure the Magic Wand Tool
Once you have selected the Magic Wand tool, you will need to configure it using the options located near the top menu bar. For basic background removal, tolerance is the only option you need to concern yourself with in the Magic Wand configuration options. Tolerance determines how closely to match colors, and a higher tolerance means a larger selection. For this example, I used a value of 70 for tolerance because if you use anything lower you will get an ugly jagged-edged blue border around the image.
Step 3: Select the Background with the Magic Wand Tool
Now that you have selected the Magic Wand tool and configured its tolerance level, you will need to select the background in the image. Click anywhere in the background of the image and the Magic Wand will automatically detect the colors of the image, and, if there aren’t too many different colors in the image, it will detect the background. Now you see why they call it the “Magic” Wand! In this case, the background is almost a solid blue so the Magic Wand has no trouble detecting the background, and it only takes one click. If the background is not solid, or is busier than the background in this particular example, you will have to hold the shift key while you click on each color that is part of the background (Hold shift + left click). This is a basic tutorial, however, so I won’t be diving into how to do that now.
Step 4: Delete the Background
Now that you have selected the Magic Wand tool, set its tolerance level and selected the background, you simply hit the delete key and voila, no background! You are now free to use this image with just about any background you can think of.
Here is an example of what I did with my tiger:
As you can see, I replaced the background with a solid black color and added some text of a company I made up. This is an example of how you could implement this tiger picture as a logo/header element on your website. There are a lot of other ways to use this skill to make your websites look very professional and seamless.
If you have this skill and use it for your own professional application, please share your experience. If not, was this tutorial helpful to you?
Do you have difficulty getting visitors to come to your website?
The first thought that may go through your mind is that you’re not marketing enough, but you may be overlooking a common problem. Most people who do a search on Google.com don’t spend very much time deciding whether the website they clicked on is where they want to be. Typically, the decision to stay or go will happen within 7 seconds, which is commonly known as the 7 second rule. To ensure visitors are staying on your website after those first 7 seconds your website needs to have:
1. Easily accessible information
2. A user-friendy layout (clear and concise navigation)
3. An attractive design
Here are some examples of websites that DO NOT provide users with these three important design concepts:
This website has so many design no-nos, I don’t even know where to begin! First off, all of the extra graphics, such as the butterflies, really distract you from what the website is really about. Secondly, the design does not look professional at all, giving it the impression that it was made by a 10 year old. You definitely don’t want that if you’re going to run a professional business. Also, the page loads very slowly because of the plethora of images and moving graphics that are completely unnecessary.
ChesterTourist.com
This website suffers from what I call “information overload.” The user doesn’t know where to click. There are just way too many links that are placed everywhere and not organized. This website would be a lot easier to navigate if the designer had grouped the links into categories and displayed them in one menu (e.g., a drop down menu).
Those were examples of BAD website design. Here are some examples of GOOD website design:
This website is one of our own (created by the Design Theory team) and highlights some very good aspects of design. Unlike ChesterTourist.com, the navigation is very clear and concise. If you hover over the links on the navigation bar near the top you will see how much easier the website is to navigate with the links grouped into categories and displayed in a drop-down menu, which is what ChesterTourist.com should have done with their links. As you can see, the website is clearly about a church and the information (our services, media, events, etc.) is easily accessible and presented in an attractive, easy-to-read format.
This is another website that we (the Design Theory team) have designed. Again, the navigation is very clear and concise, and easy-to-read. If you want to find out more about what services Preston Dental Care offers, the link for “Services” is right in front of you in large letters.
A very simple, easy-to-read layout is very important for getting more users to come to your website. I think the worst thing you can do is confuse the user. Your business may have the best product or service in the world, but if you don’t present it in a way that is easily accessible on your website, you will have a lot of trouble getting new customers.
Check out our design portfolio if you want to see more examples of GOOD designs 🙂
What about you? Have you seen any websites recently that you loved, or maybe some you wish you hadn’t seen?
So you made the jump from a safe, warm, and cozy job to the freedom of freelancing. You’ve dreamt about it for so long, wondering how the sun feels during the day while you were locked away behind a fluorescent lit cubicle isles and rows from the nearest window. Well you’ve arrived; so now what? How are you going to pay your bills, grow your skills, and market your skills on a shoe-string budget? Keep reading…
One of the more important characteristics of a successful is maintaining a steady flow of work. That work may come from agencies, current, or new clients. To me, each creative will find their own way to attain their own work but below are a few tips to try:
Online Agencies: These are good because most of the risk is on them so long as you hold up your end of the bargain. If you’re great at creating logos, but really don’t like to get into haggling and negotiating prices, these places are for you. You can create a profile, list your skills, and post your rate per hour or project. Then wait for the emails to come in. You’ll want to do some market research though so that you’re not too high or too low that you price yourself out of work or respect.
Network Locally: This one may be a step out of your comfort zone. Yes we have social media now a days and we can hide behind our keyboards, smart phones, and laptops but live networking still is held in high regard. Find out when and where other business professionals are hanging out after hours; then be there with them. Bring your business cards, but don’t pass them out like free tickets. Instead try making conversation first. Ask individuals what they do and repeat it back to them along with points of view while including their name here and there to show that you are paying attention to them. Before you know it, they’ll ask you for your card and then you can tell them about how awesome you are at design and how much fun you have helping people grow their business and brand.
Sponsor a Community Event: Pro-bono may be a great way to start out especially if you’re skittish about how people may appreciate your work. It’s also great experience in dealing with customers. You’ll run into all kinds, and before long you’ll have favorites and you’ll have some you wish you never met. As a self-starter, your reputation is everything so doing a free design or website for a local church could win you a lot of “oooohhhs” and “ahhhhs” from the members who all work in the community. A few thank yous and nice words from some non-profit organizations that rub shoulders with city officials could propel you to great levels. So even though the money may not have been there, you’ll still have new material for your portfolio, highly visible clientele, and letters of recognition you can tout around like trophies.
Embrace Social Media: This one comes with a grain of salt. There are many outlets out there to use. Find two or three that you can really wrap your mind around and feel comfortable using – and use them! Post daily, post often, but keep in mind you’re looking to engage first. The selling of your skills will be evident enough in your bio. Use it to showcase new designs you created. Get people to rate or comment on your work or even offer opinions and feedback. Learn how to strike up good conversations that may provide some great insight to someone’s problem or project and that could land you a job right then and there or not long down the road since you sound like you know what you’re talking about.
Your Portfolio: Well after showing off and practicing your elevator speech, you must have a place for all these people to view your work and vet your skills. Even if you don’t want to set up a full-out 50 page website that has all types of forms, sub pages, and FAQ’s with endless breadcrumbs, you should still have an online presence. I’ve seen some really nice designer websites that were nothing more than full-width graphics stacked, scrolling, or animated with just a contact page with a phone number and 3 line form. Be versatile though with your displays so that businesses of most industries can envision you doing their work and not think you’re just a niche designer. Unless however you want to be tied to a specific industry. Nothing wrong with that. Let me also mention blogging. A great way to provide great tips on your trade that not only shows insight, but proves you are the authority on that subject matter.
Well for those of you who’ve been doing this for some time, why not offer some tips to others in the comments below.
Getting creative on websites can sometimes feel constrained due to traditional layouts and verbiage, and most certainly when it comes to navigation bar and menus. Many of us think that we need to have the standard, cookie-cutter menu navigation bars that have become the “norm” for almost all websites. You know the type:
Most of us would enjoy seeing a fun and innovative menu layout. This one made me comment out loud when I saw it “oh, that’s different”!
