All Posts
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:
~Home~ ~Our Services (or Our Products)~ ~About Us~ ~Contact Us~
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:
What’s your menu
design du jour?
All Posts, Graphic Design, Web Design
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!
Download the collection »
All Posts, Branding, Graphic Design, Web Design
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?
All Posts, Web Design
“Hey remember me? We haven’t talked in months. Domain Tools says I haven’t been updated in 7 months. People are visiting me and apparently my content isn’t as relevant as it was when I was first built.” Well I could go on about what most websites scream when visiting them. From the ones with missing or incomplete addresses, web forms that error when you hit the submit button, to the prices that are out of date or don’t match what was quoted on the phone or in the store, misspellings and grammatical errors. If I’m hitting a soft spot, don’t feel too bad, it’s quite common.
One of the main things I stress to our clients at Design Theory, is that your website should never lay stagnant. We should be updating it regularly with fresh content. If you have a promotion going on, it should be on your website in a predominant way to attract your visitor’s attention. If you lowered or raised the prices for your products, that information needs to updated immediately or else you could cause some trouble. You have a professional website, don’t make it look cheap with misspellings and small errors. You could be losing valuable business. Web forms are the silent killers too because unless you go in and check regularly, you may not know that it isn’t working properly.
So in the spirit of love, we compiled a list of resources for you to use with your website for FREE!
Vector Icons: Icons can dramatically improve some graphic elements on your website. Especially when you don’t have the budget for a graphic designer to create a bunch of small graphics for you.
Facebook and Twitter Plug-ins: If your website isn’t “social” it needs to be ASAP.
Analytics: If you don’t know how many people are visiting your website, which pages are most popular for their content, your bounce rate, and referral links, I’m here to tell you to put some love into your site tonight and check out Google Analytics.
Call to Action: Normally you’d find a good call to action on a strategically typed and keyword-filled landing page, but you can also have these on your website’s home page. However you use them, use them. Encourage your visitors to give you their contact information in exchange for something of use to them.
Have any other Website Valentine’s Date night items you can “talk” about with your website? Share them in the comments field below.
Graphic Design
Graphic design is a field in constant change, both creatively and technically. It can be easy to get caught up in learning new technical skills, but it is just as important to focus improving and pushing the limits of our creativity.
As Designers we need to make a point to continue educating ourselves as much as possible and become more active in the field of design. Here are a few tips, exercises and practices that have help me continue learning, strengthen my creativity and become an all around better designer.
- Collect, collect, collect – Collect designs that inspires you. File them away and wait…they will turn into a great source of inspiration when needed. (if you cant’ take it home, use your phone and take tons of pictures)
- Read Graphic Design blogs – Take advantage of the web and search for Designer’s Blogs, they can be an easy source of information and update for every designer.
- Start a Design Blog – It makes you more aware of the Design Community and more accountable of your own work.
- Fake projects, why not? – If you find yourself with some downtime (hope is not much), create some fake projects. Develop a brand, create a logo, stationary and design marketing material for this brand. This will let your creativity run without limitations, It’s easy to get caught in a routine when clients dictate and your work is no longer “yours”.
- Do it again – What goes through your mind when you see your first designs? Exactly, that’s what I figured. Once in a while redo your old designs, analyze what you did wrong and experiment with your new knowledge.
Being a Graphic Designer is a work in process, if you are committed to your career and to develop your designing style you will be successful. It takes time, patience and lots of mistakes in order to improve your designing techniques.
What is your key to stimulate your creativity and improve your designs? Share in the comments below.
