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, 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, Web Development
I think its safe to say that each designer has their own way of doing things. When it comes to how to start a new web design project, there are quite a few ways to get started. I’m not going to say that any one way is right or wrong, but each direction does have its own benefits and trials. For example some starting points may take way more time then they need to and delay the actual development process. While others are have too much of a shotgun approach and may leave you doing more cleanup in the long run then necessary had there been more planning at the beginning.
Let me start off with the way we at Design Theory get started with a new web project. Again, no way is right or wrong, this is just a transparent look into our world.
1. Wire frame: Once your contract is signed and a deposit is paid, our graphic design team starts designing a mock home page. Depending on what the client’s needs and requests are, most layouts are pretty standard. We start off with a wire frame of boxes and rectangles as placeholders for content and images. Logo here, banner there, ads here, text and content here, images there. Once this is created for both the home page and at least one sub page, it will be passed on to the client for approval and signing. We don’t move forward unless we get a signed copy back.
2. Designing the Mock-Up: This part is a little fun because you’ll start to bring in some colors and realistic elements using Fireworks or Photoshop. Any design app that allows you to use layers. Then head over to Lipsum to grab some text filler for page body areas. Use the company logo and position it where you think it will best fit. Try some page backgrounds or menu colors and boarders to see how much more live the design looks. You may also want to design a few other sub page variations as well as the contact us page here too. Again, you’ll send this phase to the client for approval and signing.
3. Slicing: Some call this PSD to HTML, but the concept basically is cutting up all those layers and graphical elements from your design into individual graphic files. For example, the logo will now be saved as its own file with a transparent background, and so will the banner, and the menu boxes minus the text. Slice the navigation bar into buttons or formulate a working htm file for dropdown and linking functionality. You’re pretty much breaking down every part of your design to prep the development team to build the site.
4. Development: This is the fun part. Depending on whether or not your a coder I should say. At this stage you’ve got all the right elements sized or scaled to what they’re supposed to be. The functionality of menus and widgets have been explained and demonstrated so you can do everything you need to in a timely manor without any more interaction from the client. During the build process, you’ll also be checking for browser compatibility, what is actually see above the fold, font sizing, CSS, and overall flow of the each page.
5. Double-Checking: Hopefully at this point there are a fresh set of eyes overlooking the project. Check for broken or incorrect links, image alt tags, site map, spelling, grammar, lines and balance and attention to detail. Within our design firm we’re happy to have a content writer who’s not afraid to pick and tear apart our sites during development for inconsistencies and errors where we may have ignored or missed along the way. (Thanks Yvonne!) After this step is when you’ll want to present a semi-polished preview to your client. Having your ducks in a row will save your client from noticing small errors and focusing on the big picture. In my experience this stage is rather crucial because if you can’t get them to focus on the overall design and functionality, they’ll run you crazy on the minor imperfections that you can probably fix just as fast as they find them while on the phone.
That’s a brief run-down of what we do at our design firm. I hope this is helpful to you. If you have another way on how you start your design projects, please share in the comments below!
