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, Web Design, Web Development
When I first got started in web design, I think I only had my hands on a few pieces of software. A few resources for fonts and no books rhyme or reason. For me it was a nail in the coffin from years of doing mobile computer repair and door to door sales. With more and more prospective asking me if I knew how to design and build websites, I finally decided to try my hand. Along the way I’ve learned quite a few tips and tricks. I’d like to share with you some of the most recent apps and devices in heavy use from the tool belts of our designers at our firm Design Theory.
Starting with Design, I highly recommend some books to get your creative juices flowing as well as some inspiration to show you that sky may not even be the true limit. If you’re more of a designer than a developer, you may find it easy to imagine a UI that zooms in performance and throws fireworks whenever a user finds exactly what they were looking for, and page transitions rained gold coins that provoked people to give you their contact information willingly without thought. Then you wake up and see a blank white screen with a blinking cursor. Yea, been there.
Tools:
- The Web Designer’s Idea Book [Amazon]
- Dreamweaver
- Photoshop
- Fireworks
- TextWrangler
- Notepad++
- FileZilla FTP
- Firebug (Browser Extension)
- Adobe Kuler
- Lipsum.com
- Dropbox
Your gadgets are important too. Don’t waste time or money on the cheap stuff if you can avoid it. They’ll only bring you to limits a lot faster than you’re learning new techniques and operating at faster speeds. Save yourself the “computer wait” frustrations and go out for bold early if you can.
Devices & Gear:
- Macbook Pro
- iPad (1st Gen, 2nd Gen, or the New iPad) Either will do depending on your level of production
- iPhone, HTC (for email, document, and other management on the go)
- A comfortable desk and chair. (Because you’ll be here for hours and hours)
- Double Backup Hard Drives (Yes a backup and a backup for the backup)
- A long desk for plenty of space
- A widescreen monitor. You can do a 19″ but I’d suggest as big as you can afford
Video Conferencing: This is steadily growing as a necessity for us. Our clients and partners are all over the country and across the pond in Europe. So keeping in touch isn’t limited to phone calls and face to face meetings. In fact, a lot of collaboration gets done virtually in video calls. Some of which we record and share on YouTube.
APPS:
- Skype
- ECamm Call Recorder
- Google+ for Hangouts
- YouTube
This should get you going for now. If you don’t have many of these items don’t fret, just keep working hard and save to get there. I’m sure there are other apps out there I may not know so if you have any you’re using these days, feel free to share in the comments below.
All Posts
Is it really necessary for a small company to have website?
Can I really make SEO work for me?
Can blogging really benefit my company?
Is this all just a waste of time and is any of this profitable?
In a very Dr. Phil-ish candidness, you bet your butt they do! And here’s why:
1. I’ve said this to potential clients, current clients, on previous blogs and to my friends…YOU NEED A WEBSITE! Whether you live in a big city or small town, the truth is that most of the world doesn’t know you exist. Unless your business has a product or service that is exclusive to your geographical region, you need to expand not only your mind but also your client list and profit margin. How else can a small company in Nebraska acquire a client in Maine?
2. If you have sneakers, you need laces. Since you need a website, you need SEO. It’s the only way to get higher rankings in the major search engines for your company with limitless advertising. Yes, it can be a little time-consuming at first if doing so yourself (or you can just hire someone to do it…see www.jpdesigntheory.com) but it is worth the time and your dimes.
3. Do you see the visual example of a necessary principle? The more you or someone else writes about your company and services/products 
exposure expansion & growth.
4. It’s evident from all the market growth and promotion of social media, it is not only big now but it’s here to stay.Customers are savvy enough now to use it to their advantage and that directly benefits your company if you get on board. Especially since customers are utilizing all the tools the worldwide web offers to discuss product/service experiences and research them prior to purchase.
In the end, I hope these answers to common questions help you to understand the importance and necessity of websites, SEO and blogging. Can’t wait to see YOU on the www!
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?
