Week’s Goals

• Get Hosting Site Designed
• Work on portfolio design
• Do taxes

Or, you could make a list each day. Lately, I’ve been doing this, and it helps a lot with staying organized, and it helps your time management skills as well. It provides a sense of direction (what you have to get done that day) and accomplishment (when you can finally scratch that client from your list). Post it notes are, I think, the easiest ways to make a list. It’s extremely quick to jot down 5-10 goals for the day, and you can throw them away (or keep them, if you haven’t met all your goals) at the end of the day.
I’ll have some more design tutorials/articles soon, I promise, as well as the new blog design. Can’t wait to show you guys!

Thanks for staying with me,

Josh

Sure, there are similarities. They are both tabbed menu, and they both have rollover effects. That’s about it. The first has nice gradients, nice custom icons, and the font is an image. The second is very simple, but very clean at the same time. There’s a very slight gradient, and regular text is used. Their style (tabbed menu) is the same, but they are very different designs. Take a look at the site, and you’ll see that they have nothing in common. These two sites (and their designers) may have seen the others work, but definitely did not emulate it at all. Their designs are unique.

http://www.thegoodness.com.au/

http://www.ndesign-studio.com/

Now, however, take a look at these two designs.

In case you haven’t already noticed, these two designs are very, very similar. Too similar I think. Here is what’s the same about both.

• Both have their Logo top left
• Product display box with screenshot
• Both have product/service name at top
• Followed by a short description
• Followed by a “Create Your…” button
• Both are gradients, dark at top to light at bottom.
• Both have almost the same angled screenshot.
• Both menu’s are very similar
• Darker hue (in comparison to the gradient immediately above it) with white font.
• Menu strip height is virtually the same
• Both have product screenshots below the menu
• Both are on left side
• Followed by descriptions/more info on the right

Decide for yourself, is the second design simply inspired from the first (or visa versa), or does one copy almost blatantly the layout and style of the other. I think one of the designs emulates and copies the other. It’s obvious why copying another’s work is wrong, so I won’t go into that, but be careful when you design, not to get over inspired. Flipping through CSS galleries is a great way to get inspiration, but don’t turn to emulating another design just to make yourself look good.

Tutorial A Day: Thanks for agreeing to the interview Matt. I’m an avid reader of your blog, and I’ve definitely gained a lot of knowledge from following it. To start off, please take us through your average day?

Matt: Well my average day begins with class. Since I’m still a full time student at the University of South Carolina I spend much of my mornings and into the afternoon on campus. I normally find time in between classes to check my email a little bit and do some reading here and there, but most of my early day is spent in class or doing school-related work. When I get home from school anywhere from 4 to 7 PM I have dinner and sit down to work on my blog. I usually write 3-4 posts at about this time for the end of that day and a couple for early the next day. Then I catch up on my emails and get into my design/development work. I work for about 4-5 hours then go to sleep so I can wake up the next morning to do it all over again!

TAD: Did you have a plan for your blog to achieve the success and traffic it did in such
a short time frame?

Matt: Honestly I just played it by ear. After reading John Chow’s blog for about a year and seeing what he did in just the few short months he decided to tackle blogging for money I saw the potential in Digg. In January and February I actively tried to get Dugg at least once per week, and I did. That brought huge traffic numbers but more importantly skyrocketed my number of backlinks and gave me a huge amount of traffic spread very wide. Now I get traffic from places I’ve never even heard of from people mentioning a post of mine here or there. As far as post planning I didn’t (and still don’t) spend too much time planning what to write ahead of time. I pretty much just post whatever is on my mind at the time. Usually it’s in relation to something I’ve read recently or just experienced myself that makes me stop and think about it.

TAD: What steps do you take to ensure readers are loyal and keep reading your blog?

Matt: Really the main thing I’ve done to encourage repeat readers is to just make sure I post everyday with quality content. I put a lot of work into every wave of updates I do, and I think my readers see that. I’ve also had a competition where I gave away a free copy of World of Warcraft which went fantastic, and I hope to have more.

TAD: How have you chosen to monetized the blog, without “selling out” so to speak?

Matt: I’m really open minded when it comes to monetizing my site. The cardinal rule I follow is just to make sure I don’t push any product or service that I wouldn’t use myself. That being said, I do a lot of direct ad sales, text links, Adsense, affiliate marketing, paid reviews (disclosed and objective), and Adbrite.

TAD: Where do you think the blogosphere is heading, in terms of the latest trend of reviews and sponsored blog posts?

Matt: I think paid blog posts are really going to separate out the people who blog for their subject and the ones who blog for money. You’ve always been able to make money off of your blog but paid posts make it so much easier. I’ve seen a ton of “made for ReviewMe” blogs popping up where their only goal is to game a high PR/Alexa rank so they can get as many reviews as possible. It works. But I don’t think those will ever take the place of or take away the authority of high profile, content-filled, quality blogs.

1. Standardize Your Filing System

File every project the same way. The best way to do this (I think) is to create a work folder at the root of you hard drive, then in that create 12 folders for ever month. Whenever you get a job, create a folder with that job’s title in the corresponding month. This way you end up with a nice, organized folder full of all the work you’ve done for that year. You can quickly look back to your previous projects if a client wants a change, or you need to grab something for reference. Here’s another tip: when naming your folders after the month, add XX at the beginning of the folder name so they appear in chronological order; i.e. 01 January.

2. Keep A Global Resource Folder

I find myself reusing a lot of my work, be it icons, buttons, layer styles, etc. It’s extremely frustrating to try and remember what project I created that one button for, and then have to go try and find it. To solve this problem, I created a global resource folder.

This folder contains all the icons I have ever made, button designs, layer styles, everything I think I can reuse, I stick in this folder. It’s full of .psd’s. This will help you if you’re ever in a fix, and quickly need that Web 2.0 style badge, or icon set you designed last year.

3. Employ The Use Of Font Management Programs

If you’re the average designer, you have way too many fonts. It can be extremely slow and frustrating to look through them all in Photoshop, so having a font program dedicated to organizing your fonts is a great idea. You can use these programs to search by font type (Serif, Sans Serif, etc.), name, and a bevy of other criteria. Here are several.

• http://www.neuber.com/typograph/
  
• http://www.proximasoftware.com/fontexpert/
• Suitcase For Windows (Personal Favorite)

4. Healthy Habits

There is no better service you can do yourself than to stay in shape, and live healthy. Eating right is only a small part of this, healthy is a lifestyle. Get ample sleep, and while you are working, take frequent breaks, even if it’s just to walk around. Drink lots of water (8 glasses) a day, and eating healthy snacks (fresh fruit, vegetables, etc.) is a good way to keep you energized throughout the day.

These are just 4 ways that you can use to create a better design workflow. There are many more, and I’d love to hear what you do, so let me know in the comments of any tips or recommendations you have for creating a better design workflow.

Step 1

Fire up Photoshop, and create a new document 800px x 300px. With a white background. Now, create a new layer, and grab the Rectangular Marquee Tool (M). At the top of the document, create a rectangle15px or so high, starting from the top edge. Fill that rectangle (Right Click > Fill) with #262626.

Create a new layer, and with the marquee tool, make a rectangle maybe 3px high immediately after the first rectangle. Fill it with #525252. It should now look a bit something like this:

Make a new layer, and again with the rectangular marquee tool, create a rectangle immediately below the last, about 80px-100px high. Fill this with #3d3d3d. Add a layer style to this layer. Choose Gradient Overlay, and set the foreground color to black, and then choose foreground to transparent (so black fading out). Set the opacity to 20%.

Now, one more rectangle for Step 1. Create one last rectangle, about 10px-15px high, below the first three, and fill it with #8eb26a. It should now look like this:

Step 2

Now that we have our background set up, it’s time to add the tabs for the menu. Click on the layer right below the top one, and grab the Rounded Rectangle Tool. The reason you clicked on the second to first layer is because we want the tabs to show up under the bottom, green bar. Set the radius of the rounded rectangle to 5px, and then create a menu tab. Fill the path with the green color from step 2 (#8eb26a) It should be proportioned like this:

Now, simply duplicate this layer, and fill it with color #acc0a5. Now move it over to the right, until there is exactly 1 pixel between the tabs. Use the right and left arrow keys to nudge it if you have to. Keep duplicating and moving tabs until you have enough. Here is mine:

Step 3

Now all you have to do is add text. I’m using Myriad Apple, and I just center the text between each tab, and I added a header “logo” (ok, so it’s just text ).

Now all you have to do is code it. Here’s a great tutorial on coding a tabbed CSS menu:

http://www.sitepoint.com/article/accessible-menu-tabs

Hope you enjoyed this tutorial, and found it useful. If you have any questions or need any help, just ask!

]]>