1. To get started, could you tell us a bit about yourself and what you do for a living?

Sure, I’m Chris Spooner, I work as a self employed designer and run my design blogs, Blog.SpoonGraphics and Line25.

2. How did your two blogs come to be, and why did you create them?

Blog.SpoonGraphics was created over two years ago originally as a little experiment with the Wordpress application. I had seen design blogs springing up and decided to give it a go myself. Soon after publishing a couple of tutorials and freebies, the site started to grow in popularity. Many articles and posts later the site is continuing to grow and has reached a fantastic level of popularity in the web community!

Line25 was setup more recently, given the enjoyment I have developing Blog.SpoonGraphics, I decided to branch out and do it all again. I wanted to focus more on web design topics, but with Blog.SpoonGraphics developing a name for Illustrator tutorials, I didn’t want to suddenly switch subjects. Setting up a second blog seemed like the perfect way forward, and Line25 is also seeing some unbelievable growth in the four months it has been active.

3. Where do you find inspiration for your blog posts, and how do you keep coming up with fresh ideas?

Ideas for blog posts tend to appear from general Internet browsing and picking out interesting images from magazines. If there’s a feature that catches my attention, creating a blog post on the topic is a great way to research into the topic further, which also helps polish my own skills.

4. How have your blogs come to have such a strong following? What advice would you give to bloggers just starting out?

Keep up the hard work. Even with Line25 having the advantage of receiving an already establishing group of subscribers from Blog.SpoonGraphics, it’s difficult in the early days to keep a consistent level of traffic. Keep the faith and pump out articles that you think would be interesting to fellow designers, sooner or later one will be picked up and receive a decent influx of visitors.

5. Where do you find inspiration for your designs?

Browsing design galleries and the work of inspiring designers is always a great help, although I also seem to pick out interesting images from magazines and general things I come across on a daily basis.

6. What first got you interested in design, and how did you go about getting into this industry?

I’ve always been fairly creative minded, and went down the creative route throughout schooling and college. After university I landed my first job as a Graphic/Web Designer at a local small studio. A good website has always been a useful resource for landing jobs and opportunities, so that’s one recommendation I’d give to others.

7. How (and when) did you transfer into the freelance designer lifestyle? How did you turn your work into a personal business and gain your first clients?

I worked on a couple of personal and client related projects in my spare time outside of work to begin with to gain a feel for managing projects completely by myself. After a while my blog revenue increased to cover my basic monthly expenses, which was a great help in making the transition to working for myself. The exposure it has developed online now brings in clients from around the world, along with some really interesting work!

8. Could you describe a typical workday in your life as a freelance designer and blogger?

A typical workday starts by catching up on Twitter and browsing through a couple of links I come across. I’ll then check over emails for the day and respond to clients or messages from my blogs. I usually aim to work on a project or blog post in the morning, and one in the afternoon, so depending on what I have in store at that moment I’ll either work on some kind of web design, a little coding, a logo design, or think of a topic to create an article about. Midday I’ll head off for some lunch, then check over my RSS feeds for some cool topics from the blogosphere. My interesting findings are then posted to Twitter to share with others.

9. Has owning Blog.SpoonGraphics and Line25 helped you find clients, or helped your freelance design career in any other way?

For sure, my blog over at Blog.SpoonGraphics has been a fantastic source of clients, mostly through the exposure it has given online. So much in fact, that I hardly need my portfolio website anymore.

10. What is your general design process now that you have the freedom of freelancing?

My design process tends to vary slightly depending on the nature of the project, but generally an estimate will be created based on an indication of time needed for the work. This is then invoiced as a 50% deposit and the project started with research and sketching. Designs are created and supplied to the client, followed by an invoice of the remaining balance. Between these steps I try to keep the relationship personal and informal, in my eyes there’s nothing worse than all that boring business jargon and malarkey!

11. Finally, what are some of our future goals for your blogs, your freelancing business, and for yourself?

I’m looking forward to developing both blogs further into the future with new posts and useful content; Line25 is heading towards the 10k subscriber milestone so I’m looking forward to that achievement. Outside of blogging I’m looking to continue on with a selection of interesting design projects and generally keep on top of any upcoming changes in the industry!

If you haven’t seen the first two posts for this series, be sure to check them out below:

• PHP for Beginners: Part I
• PHP for Beginners: Part II

This exercise assumes that you either have PHP installed on your computer already or that you have access to a server with PHP support.

Some might call it an absence, I prefer to call it a long nap. Yes, I’m back, bringing with me part three of my PHP tutorial line! Follow the program throughout the summer as I provide you at least weekly updates on this versatile language of Web 2.0.

Lets get down and dirty. This lesson will cover the following:

• More operators
  • Concatenation operator
  • Combined assignment operators
  • Comparison operators
• Incrementing and Decrementing
  • Operator precedence
• Constants
• Quiz

More Operators

Arithmetic Operators were discussed in part two of this series, but I’m sorry to say that was just the surface. Operators are necessary to manipulate information and data values to create a result desirable to the author. Thus, the more operators, the more possibilities of the script, and thus the more objectives achieved with the code! These operators are fairly common among any programming language that you find, but their unique use in PHP is what helps make it such a strong language.

Concatenation operator

We’ll start out simple. The concatenation operator is a single period (.) that essentially binds together two operands (remember, these are expressions or strings, basically values of data or information). This may not seem important now, but this operator is important in combining the results of an expression with some kind of string. Here’s an example:

$centimeters=245;
print “The width is “.($centimeters/100).” meters”;

Here I used a variable then printed it within a string operand. This script will return the output “The width is 2.45 meters”.

Combined assignment operators

Compacting code is important in a website because it means that you have fewer things to sift through when troubleshooting. Shorter code also means a smaller file size, and if you intend to enter into a serious programming profession then that is a huge plus.

The name “combined assignment operators” is pretty much the exact description of this entire section. Basically, we combine the functions of two operators into one in an effort to simplify the code. Below is an example:

$x=4;
$x=$x+4; //$x now equals 8
$x+=4; //$x now equals 12 by the combined operator

Here is a table detailing just a few of the basic combined operators:

Combined Assignment Operators

Comparison operators

Pretty simple so far right? Well here’s where one of the biggest parts of PHP comes into play: comparison operators. Comparison operators perform tests on their operands, returning the boolean result true or false. This is again important for relating various pieces of information to one another from the user input.

We’ll just be getting familiar with them for right now; we’ve already covered a lot this lesson and this is a very important topic to fully comprehend. For right now, it is important to understand that these values are equivalent to true or false; they do not actually return the boolean value. For example:

$x=4;
$x<9; // equivalent to the value true
$x>23; // equivalent to the value false

Below is a table of comparison operators. We will learn more about these in complex coding sequences next lesson.

Comparison Operators

Incrementing and Decrementing

Incrementing and decrementing, which is increasing or decreasing by one, respectively, is a handy little ability when it comes to integrating loops into your code. For example, say that you want the script to execute a certain operation eight times; you can’t simply say “do this eight times.” Instead, you must say “start at one, then at the conclusion of each execution, add one to this number. When the number reaches eight, stop executing the function.” This method is seen in almost every programming language so mastery of this is crucial in order to learn other languages with ease.

This tutorial guide has already showed you two ways to increment and decrement a variable: the arithmetic operator and the combined operator. Below are examples of this:

$x=$x+1; // incremented by 1
$x-=1; // decremented by 1

Because changing a variable by the value of one is so important, however, the whole operation has received its own operator! Below are the respective operators for incrementation:

$x++; // $x is incremented
$x--; // $x is decremented

Putting them together into a little test code, we receive the following:

$x=3;
$x++<4; // true

But hold on, if we refer to our comparison operators, we’ll see that the < sign means only less than. How can this function return true then? It’s true because the variable x is evaluated in the function BEFORE being incremented. THIS IS VERY IMPORTANT! In order to increment the variable before evaluation, you must do the following:

++$x; // incremented
--$x; // decremented

Now to replace it in the above code:

$x=3;
++$x<4; // false

Operator precedence

The above argument brings us into operator precedence, or what most people will be familiar with, what I like to call “order of operations.” Certain operators have precedence over one another in this wonderful language PHP. Below is an example:

4+5*2 // returns 14, multiple first
(4+5)*2 // returns 18, parentheses first

This is a pretty straightforward concept that you just need to familiarize yourself with. Beyond that, this table is just for basic reference:

Order of Precedence for Selected Operators

I know that we have not yet touched numbers 9, 10, or 11, but hold on to your knickers because they’ll be there next lesson!

Quiz

School is fun, especially in the summer! That’s why I’ve included this quiz. That, and to help you retain your knowledge of what we’ve just learned. Don’t peak back!

#1: Which of the following will increase $x by 2?

1. ++$x++
2. $x + (3/2)
3. 4*2/6 + $x

#2: 4*9+9+(4/1) will return the following:

1. 49
2. 76
3. 39

#3: 4.0===4 will return the value TRUE.

1. True
2. False
3. Not enough information

#4: The expression $x*=2 is equal to:

1. $x=$x*$x
2. $x=$x^2
3. $x=$x*2

#5: Without looking, which operator is executed first from this list?

1. + -
2. &&
3. ||

Answer key: A,A,B,C,A

Conclusion

That’s all folks! We’ve taken some great steps today, and hopefully we will take many more in my next tutorial, PHP for Beginners: Part IV.

Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Most webmasters place a high amount of value on the design of their website. Many webmasters have even spent significant amounts of money to insure that their website design was exactly the way they wanted it. It is commonly argued that well-designed websites are one of the keys to insuring recurring traffic. If people enjoy the look of a website, they will continue to return. Yet, this is not always the case. Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Chris Guitars

Chris Guitar’s is by far the ugliest website on this list. The official website/e-store for Chris Guitars in Albany, NY is e-commerce in its most elementary form. Chris Guitar’s is coded from top to bottom in HTML, complete with a “cheezy” graphic (albeit one that honors US troops and is therefore commendable). The website’s clashing color scheme of yellow text on a solid purple background is enough to make any shopper’s eyes bug out within the first minute of reading. Each product listing exists as a paragraph of product description and review along with a link to a picture of the item being sold.

Don’t the the ancient design and super-simplicity fool you though. This guy does business. Chris Guitars has established itself as a sort of mecca for musicians and music equipment collectors. The simplicity of the website couple with the honest descriptions, pictures, and “best price on the web” make Chris Guitars exempt from any rule of good website design.

MMOFB Blog

The first three lines of this website tell all – “Don’t let the stunning graphics and good looks of this blog fool ya“. An obscure blogger writing under the anonymous pseudonym “Grizzly” has set out to prove that badly designed websites run by anonymous people can rake in cash. To see some of Grizzly’s handywork simple query “make money online” into Google and you will see Grizzly’s blogspot hosted website appear within the 1st three spots of the SERPs (depending on the data center you access). Rather than relying on flashy custom Wordpress designs, personal branding, and name recognition Grizzly has simply focused on good SEO.

Grizzly essentially contends that good design is needless, and that webmasters should focus on producing a quality service focused on growing organically. Do you think he is dead wrong? Check the numbers: 4000+ subscribers (more than 3000 more than comparable websites with flashy designs), and daily earnings ranging from $150 to $300 (compared to maybe that much in a month from comparable “well designed” websites). While many may cringe at the design of Grizzly’s blog, Grizzly himself would probably tell you that all well designed sights should be as ugly. The design of the MMOFB blog is the result of careful ad testing and analytics. The design hinges upon where the ads are most productive. With his cult following and earnings of $1,000+ per month from a free hosted blog – I am tempted to go and dishevel things a bit more on my own websites.

Plenty of Fish

The story of Markus Frind and his online dating website PlentyOfFish.com have garnered quite a bit of media attention from high profile publications such as Inc. magazine and many others. Frind is the first to admit that a boring and poor design is what makes the free dating site such a huge success. Frind’s strategy in creating PlentyOfFish was to build it and code it as minimally as possible so that it would consume the least amount of (server) resources as possible. The most glaring piece of poor design is the lack of proportional resolution on the thumbnail version of the photos. Based on interview with Frind, the disproportional thumbnails encourage more clicks, pageviews, and time spent on the site which ultimately results in more advertising exposure. The purposeful design flaws on PlentyOfFish.com have resulted in an estimated $10M in revenue for 2008.

Wikipedia

Consider Wikipedia the epitome of the age old internet adage “Content is King”. By focusing their community on creating excellent fact supported content Wikipedia has essentially negated the need for well designed pages. While Wikipedia does offer certain modules and graphs to express data in a more organized fashion, the tables do little to balance the overall asymmetrical contents often left poorly spaced and formatted by pictures and other related resources.

Despite the relatively poor design and lack of eye appeal Wikipedia has established itself as the go-to resource for any online query, often showing up first in search engine results. The overwhelming existence of quality content and information often makes up for the lack of aestheticism, and lends itself well to the idea that academia should never be appealing to the eyes.

Google

Wait…why is the big “G” on the list? Excellent question. Google’s design may not be intrinsically ugly, but it certainly is primitive. Google, the number one most visited website in the world, also understands that success does not rest in good web design. For Google, success rests within a superior search product and other solutions. When compared to other design-centric search engines such as Bing and the content ridden search services of Yahoo! and AOL, Google begins to look a bit boring. Google’s logo set (save for the commemorative ones) remains rather unspectacular as well. However, what Google may lack in flashy logos and content management, they certainly make up for with their superior services and offerings.

Questions and Conclusions

Five websites, five unspectacular designs. Does good design matter? Or is bad/boring/minimalist often used by designers intentionally to place a higher emphasis on the product and service. Should an excellent product or service be supported with flashy or cutting edge design? As a result of seeing these five websites, should a higher amount of energy be focused on website functionality and quality service development than on design?

One thing is for certain. Excellent products and quality design are not mutually exclusive. Excellent products can have excellent design, yet perhaps design should be one of those things that is gradually improved as time permits rather than thrust to the forefront of a project. If your website offers a quality product or a knockout service you should have no issues gaining users. The homework has already been done for you. Users care about functionality more than they do about design.

About the Author:

Ethan is a well-trained internaut who runs techsplosive.com, a website about Internet Startups and
Social Media.  If you like what Ethan has to say here, feel free to subscribe to the Techsplosive.com
RSS feed.

If you’d like to do a guest post on Webitect, feel free to contact us.

I hope it doesn’t come as a big surprise that Mozilla Firefox is easily the most desirable browser for web designers and developers, but if it does, you’re in for a quite a treat!

So why does Firefox have a firm grip on all of the internet geeks out there? The answer is quite simple – add-ons. Downloadable add-ons can make your design and/or developing experience much more efficient and fun, and while there are thousands of add-ons available for nearly any situation, there are some that are truly geared towards web designers and developers.

Below, we’ll go over 10 of the hottest add-ons for web designers and developers.

1. Web Developer 1.1.6

Without a doubt, Web Developer should be on every Firefox “top add-ons” list. I’m sure most developers reading this will nod their head in agreement when I say, “What did we do before this came out?”

The Web Developer add-on adds a nice menu and toolbar to Firefox that is full of wonderful web developing tools to make your life easier. Web Developer allows you to do anything from disabling certain features on a page (like JavaScript, page colors, etc…) to editing the CSS of any webpage in real time. Features like that allow you to save all sorts of time, and in the design/development world, time is most definitely money. Web Developer is an absolute must-have.

Download Web Developer

2. Firebug

Another heavy hitter in the developer’s arsenal, Firebug is another one of those add-ons that you simply can’t live without. Firebug allows you to do things like “find HTML elements buried deep in the page”, and pretty much hands over a golden plate of information at your fingertips.

With Firebug, you can edit and debug HTML, JavaScript, and CSS in real time and figure out why you’re getting that pesky error message. You can also monitor network activity (to figure out why your page is taking so long to load), visualize CSS metrics (so that you can find out why CSS boxes aren’t lining up like they should be), and so much more. There are also a ton of different extensions for Firebug that are constantly being developed.

The best way to find out what Firebug can do for you is to check out their site.

Download Firebug

3. ColorZilla 2.0.2

This is such a handy little add-on that so many different types of users could find useful. How many times have you been on a particular site and wondered exactly what color they used for a certain text or element on their page? Probably hundreds of times, right?

Now, with the click of a button you can easily grab the RGB, hex, and even get information about DOM elements on the fly. ColorZilla also gives you the ability to zoom the page and measure the distance between any two points on the page you’re viewing. That’s just awesome.

Download ColorZilla

4. ScreenGrab 0.96.1

Think about how many times in your web development life that you’ve hit the “print screen” button. Exactly. Instead of doing things the old school way, someone was smart enough to launch a free way to quickly and easily grab a screenshot of an entire page, a specific section of a page, the entire window you’re looking at, and a few other options.

ScreenGrab will remind you of SnagIt, only you don’t have to shell out any cash for it and it works just as well. I don’t think anyone would argue that this is another standard add-on that should be in every developer and designer’s browser.

Download ScreenGrab

5. LinkChecker 0.6.3

Even the best of the best screw up the occasional link on a page. That’s why a genius by the name of Kevin Freitas built the simple, yet very useful LinkChecker add-on for Firefox. It will check if a link is valid or not, and this is easily one of those “use every day” type of add-ons that will be another valuable tool in your collection.

Below is the plugin in action, on Webitect.

Download LinkChecker

6. Window Resizer 1.0

Testing your new site or project in several different screen sizes is crucial to your process. This simple add-on allows you to do just that. Window Resizer supports 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200 resolutions. Talk about convenient!

Download Window Resizer

7. IE View 1.4.3

Another essential step in the design/developer process is viewing the site in different browsers. The first and most important additional browser to check your work in is Internet Explorer.

IE View was created to quickly check to see how your project appears in IE, giving you a fast way to spot any problems. Again, another very simple add-on here that can help boost your efficiency.

Download IE View

(Note: Similar to IE View is Safari View. This is another one worth downloading.)

8. Dummy Lipsum 2.3.0

For the thousands of times you’ve copied and pasted “Lorem Ipsum” dummy text for all of your past projects, you’ll have wished you found Dummy Lipsum a lot sooner! This awesome add-on is a no-brainer for any designer or developer.

With a few clicks, you can easily generate a page full of space filler text, and you even have the option of including punctuation, showing or not showing html tags, and whether you want to start it with the infamous “Lorem ipsum dolor sit amet…” You can also have it generate the text in the form of a paragraph, words, bytes, or even a list!

Download Dummy Lipsum

9. HTML Validator 0.8.5.6

Instead of using a separate tool or website to validate HTML on a page, you can download this nifty little add-on which adds HTML validation inside of Firefox.

HTML Validator shows you the number of errors of a HTML page seen in an icon on the status bar when you’re browsing, which makes the process of spotting errors extremely fast and easy. While some other add-ons include this already, this is a nice hands free way to spot errors on the fly.

Download HTML Validator

10. MeasureIt 0.3.8

I’m sure there have been countless times where you quickly needed the measurements of how large an image was, or how many thumbnails you could fit into one box, etc…

With MeasureIt, you can quickly and easily draw out a ruler to get the measurement (in pixels, width and height) of anything on a webpage. MeasureIt is another awesome tool for any designer to add to their Firefox browser, as it will surely speed up the process.

Download MeasureIt

Wrapping Up

10 super efficient Firefox add-ons that should allow you to shave some time off of your many projects. I know there is a mess of additional helpful add-ons for designers and developers, but the 10 above are the ones that seem to be the staples among the thousands of others available.

Here are five more add-ons worth mentioning (just in case you can’t get enough):

1. FireFTP – Instead of opening an external FTP for site updates, this is easier.
2. Font Finder – Quickly show all the properties of selected text on a page.
3. Colorblind Simulator – Experimental add-on that simulates what a page looks like to colorblind people. Since 10% of the population is colorblind, this is smart!
4. SEOQuake – SEO is fundamental, so why not have a little help?
5. Greasemonkey – Extremely popular add-on that allows you to run custom JavaScript against any webpage.

Interview with Sam & Zach Dunn

To begin, can you both tell us a little about yourselves and about your role with Build Internet?

Sam: We’re both going into our Junior year at University of Hartford, and be turning 20 next month.

In terms of the blog, I typically cover Photoshop and jQuery, although I have dabbled in other categories such as PHP and discussion pieces. Additionally I’ve been responsible for the design of Build Internet, now on it’s second revision.

Behind the scenes I have a fair share of involvement in our other projects such as the our upcoming One Mighty Roar company site, which has limited the amount of posts I’ve been able to make thus far, that’s changing soon.

Zach: Seeing as how we’re twins, I don’t have all that much more to add onto what Sam has already said about our background. However, as far as the blog goes I work a lot more on the regular posting schedule with a focus on usability, motivation pieces, and Wordpress.

I handle the majority of the community components of blogging. This means that I go out and promote the latest posts, keep the social media up to par, and just flat out mingle in the web niche when possible.

How did Build Internet begin? What inspired you both to create it, and what has motivated you to keep it going?

Zach: We’ve worked on web design for years now. It wasn’t until the past year or so that I began to actively read blogs in the web design and development niche.

A big motivator has been the successes of other bloggers in the niche. Take Jacob Cass for example! To me, Jacob represents a great example of how a student can get a solid head start into a career while still attending a University. It’s absolutely amazing to see the amount of diverse client work Jacob has brought in as a result of his blog. David Leggett is another great example of a young guy managing high quality blogs that actually impact thousands of people.

Sam: We were both avid readers of several web niche blogs and wanted to dive into it ourselves. I would say the community has been one of the most pleasant surprises of all, immersing ourselves in it through our blog has caused us to make some great connections.

What do you two write about on Build Internet? Who should read your blog?

Zach: We (try to) write about useful things. Our articles are meant to spark discussion or food for thought on the topics important to the web niche. We post under the mentality that sometimes people just need to have their attention brought to the simple overlooked possibilities out on the web.

Everyone has seen the “30 Amazing Wordpress Theme Widgets” style posts out there, but not everyone realizes how easy it is to do it themselves. We like getting people to do things rather than just show them good looking things without explanation week after week. We try to empower people by giving them bite-sized bits of good internet and give a direction for real applications.

Sam: First off, everyone should read our blog. Now if I can be more specific and slightly less bold – anyone in the web or graphic design niche would probably benefit from clicking around. We also try to discuss trending topics or business practices via articles. Odds are if someone is visiting this blog, they’d enjoy Build Internet too. See how I wove in that shameless promotion so seamlessly?

What is it like to be so successful in the online world at such a young age? How do you balance college, the aspects of offline life, and your growing blog?

Zach: I don’t want to give anyone the wrong impression about our success. Even though we’ve experienced phenomenal growth in the past six months, I wouldn’t define us as a clear cut success just yet. We’ve still got plenty of growing to do, and a lot of that comes with balancing time.

During the college year our availability changes by the week. Since there are two of us running the blog together, it made it much easier to stick to the every 2-3 day posting schedule which has worked so well for us so far. Our biggest motto is to “Stay social”, and I think we’ve done a good job at that so far.

Sam: I get a kick out of this question because while I am appreciative of where we are right now, we still have a long way to go when compared to fellow niche blogs like Tutorial9 and Smashing Magazine.

My friends IRL (that stands for In Real Life, it’s an acronym that saves me bundles of time), laugh occasionally because of the pretty open love affair I have with the internet. While I have been known to do some marathon hours, most particularly in the development of my Supersized jQuery plugin, I keep social too. The whole education thing just limits how frequently we can post new articles.

I wouldn’t normally ask about income in an interview like this, but because you both are as young as me and most of my readers, it’s inspiring to know about income potential at such an age. How much do you make off of Build Internet, and does it function like a business in some sense?

Build Internet is directly tied to One Mighty Roar, which is our web design and development business. The income from the blog has been a moderate success and it’s brought in enough to fund things like our new office and other various costs related to running the blog and business.

I’d rather not get into exact specific numbers, but our chief income comes from BuySellAds (which is an easy number to calculate…hint hint). Adsense brings in a couple dollars a day, and we’ve got a few leads for clients from it too. All in all, we’ve managed to fund some cool things but it’s nothing to get excited about yet.

We’re hoping in the next year to reach an income level from the blog where we can fund paid guest posts in the style of larger blog networks like Envato. We’ve had a few guest posts already for exposure alone, but it should really be a compensated in the future.

Sam: As an added bonus, Build Internet functions as a miniature PR agency for us. We’ve gotten contacted from all sorts wonderful individuals.

Your blog is about web design, development, and business. When and how did you become interested in these fields? Tell us a bit about the history of both of you on the Internet.

Zach: Looking back it’s been funny to see where we came from. Our first website (since taken down) was built at the beginning of high school using copy and paste Dreamweaver snippets. We registered with a .tk address and was filled stuff that only had value to the people who made it.

In high school we started with the computer science route, but it was too much math and not enough creativity. We jumped over to the web design side of the hall and founded Cazzu Media at the end of our Junior year in high school.

We’ve grown a lot through client work and side projects since then. One of the biggest changes made is the company name. A number of factors led to the change in branding. The least of which is the unsavory meaning of the word Cazzu to southern Italy (We’re sorry). We’re currently finalizing the name change to One Mighty Roar, and we’ll be moving forward with some exciting client jobs.

Sam: I got a kick out of the whole art and creativity thing throughout elementary school, did the computer science track in high school, and somewhere in between decided I hated cubicles. When I put all of those things together I decided that web design was the perfect three way polygamist marriage between art, coding and creativity.

Is there any advice or tips you can give to someone just starting out a blog, or with online entrepreneurship?

Zach: Overall, the best advice is the most obvious. Be useful, even if you think it may be obvious. Don’t think that you can produce content without any clear cut direction. Try to fit in and complement your niche rather than top all the existing players. The blogosphere is not a cutthroat competitive area, and there’s always room for more quality blogs.

I find my best content comes from things where I’m learning in the process too. That’s why I suspect our jQuery tutorials are among the most popular. I teach myself for the tutorial, and then teach others based on my attempts.

Last piece of advice is to have idols. Not a stalker sense, but just have accomplished people in the niche who you look up to. It helps to have someone to aspire to when you’re putting together a plan of action. For us and blogging, it was people like David Leggett, Jacob Cass, and other 20-ish year olds with quality content.

Sam: Be the most candid, genuine, real human being possible. When starting a blog you are trying to reach out to a community of real people, so there’s no reason you shouldn’t be one too. Be conversational and get involved in the community to build an audience.

What are your future plans for Build Internet, other projects, and for yourselves?

Zach: We’re going to hopefully continue to build up the readership on Build Internet. Sam and I are both currently working on a number of guest posts for other big name web niche blogs.

Sam: We are aiming to expand the reach of the blog by driving up RSS and Twitter subscribers and increasing the frequency of posts. Additionally we have One Mighty Roar, our company site, which will serve to be a hub for our client work and our blog network. We are currently in the process of getting some quality blogs together under the One Mighty Roar network, we already have The Nonsense Society (an art blog), but there will be some hip new additions in coming months. We’re royally stoked.

Officeal

Also be sure to keep a lookout for Zach and Sam’s new blog, Officeal — planned to open in early July. It’s going to be a blog about awesome offices — pretty interesting stuff — so keep checking on BuildInternet.com for when that launches!

A Scrap Of Notebook Paper

This is a common trick on realistic space web designs featuring offices or work spaces. The tutorial itself is incredibly detailed, but also leaves room for your own creativity.

Created over as PSHero, this tutorial is perfect for beginners to really learn something useful in Photoshop, by creating something as specific as this paper, but also picking up vital Photoshop techniques along the way.

In the tutorial, the “Hero” goes over how to properly prepare an image like this for the web, so it can look high-quality and as real as it gets. Image preparation is something that ever designer needs to know, and this tutorial example is a great overview.

Go make your own scrap of notebook paper now.

Political Campaign Button

Who needs a printing company for promotion when you just have Photoshop? This stylish button is another of PSHero’s great tutorials. Easy for beginners, but advanced and unique enough for any Photoshop user level.

While this button represents a political button for a typical campaign in America, the process is transferable for any colors and shapes — and can be created with any style of flag, symbol, or image.

This tutorial was made with a single set of layer styles, making it a simple and quick process–a great addition to any page or web design.

Go create a political campaign button now.

Old World Wax Seal

This tutorial is great for designs with an old, and even grungy feel. Even though it’s grungy, it also has a classic look.

This tutorial uses few layers and the pen tool. The pen tool in Photoshop is often the toughest tool to use for Photoshop beginners, and this simple wax seal is a great way to get step-by-step practice.

This tutorial is also easily customizable, and you can find your own image to embed in the center, along with your own color scheme. For the rest of the background, PSHero offers great graphic design tutorials for creating paper textures.

Go create a realistic old world wax seal now.

Custom Hang Tag

This type of image is becoming very popular in web design, and PSHero shows you exactly how to do it. Hang it in the corner of a web design to place a logo, or declare a special or update.

The great thing about this tutorial is some of the techniques used in it. This is a tutorial that shows how PSHero takes a basic template from a real life object. This technique can be used in other aspects for any designer who would like to create their own custom Photoshop pieces.

The tutorial is customizable with your own logo or text, so whether it be just for practice, or to actually use the tag in a design, it’s a great tutorial to reference.

Go create a custom hang tag now.

Craft a Vintage Fifties Letter

Vintage and grungy are two popular design trends right now, so this type of tutorial is quite popular. Create a vintage 50’s letter, with custom text for your own design.

This tutorial covers many of Photoshop’s need-to-know features: brushes, shape tools, layer styles, blend modes, along with some intermediate techniques. It is easy to follow, yet provides advanced technique for those wishing to take their Photoshop skills to the next level.

The texture in this tutorial is beyond amazing for a computer document; just take a close-up view at the final result on the tutorial page. Because it produces such high-quality, the outcome of this tutorial could be used for many different things, not just in web design.

Go craft a vintage fifties letter now.

Create a Realistic Blueprint Image From a 3D Object

Photoshop’s 3D feature is often overlooked in the world of graphic design, but this tutorial shows a perfect example of how to use it to create a stunning blueprint image.

This tutorial also goes over how to place the created blueprint image in a real setting (this example being the table and surrounding area), and adapting the blueprint image to the environment.

This tutorial is easy for beginners to follow, yet it uses a lot of the tools I had to use in my advanced Photoshop class. Getting through this tutorial and learning the techniques will increase almost anyone’s Photoshop skills.

Go create a realistic blueprint image from a 3D object now.

Creating a CD PLayer

I figure there’s enough Photoshop tutorials for creating iPods and other modern day mp3 players, but why not relive the 90’s?

This Photoshop tutorial is image heavy and very easy to follow. With a CD player being a common object laying around, this would be a great classic addition for a realistic space web design of a bedroom or office space.

For Photoshop beginners, this tutorial is great for practice with gradients and other techniques of adding depth to an image.

Go create a realistic CD player now.

How to Make Real Compact Disc

To go along with our realistic CD player, we need a realistic CD. As you can see, this tutorial uses similar lighting effects as the vinyl record below.

This tutorial is easy to follow and will go over a bit of transparency/blending modes, filters, lighting effects, and the transformation tool. Great technique for advanced users to learn, and great for beginners needing an step-by-step introduction to some of these Photoshop features.

This would be a really cool and realistic addition to a web design with a realistic space.

Go create a realistic compact disc now.

Creating a Vinyl Record In Photoshop

Let’s go back in time a bit more and create a vinyl record in Photoshop.

The great thing about this tutorial is that it uses a few filters, so anyone unfamiliar with them can get some practice. Even for those who aren’t new to Photoshop, a new use of some of the filters is a greatly appreciated technique.

Included in the tutorial is also some other great techniques for texture and lighting. They are specific to the tutorial, but knowledge of them can be easily transferred to other realistic objects created in Photoshop.

This tutorial is a great option for vintage or retro web designs.

Go create a vinyl record now.

Create a Realistic Outer Space Scene

This one’s pretty cool: a realistic outer space seen in Photoshop. This tutorial does not use any image references — just Photoshop filters, lighting effects, and blending modes.

Because it only uses Photoshop, it is great for the ultimate customization from the designer. With this tutorial, a designer can create a scene specific to their own design needs.

This tutorial is great for any Photoshop user that would like a better understanding, or learn new techniques, for filters and blend modes.

Go create a realistic outer space scene now.

Twitter has quickly become a force to be reckoned with – just ask any major cable news agency. Fancy, Armani suit-wearing news executives around the world are still trying to figure out why all they see are cute little blue birds flying around everywhere they look, along with the occasional whale that fails. Twitter has truly become a mainstream, real-time information dissemination platform that is rapidly becoming the unofficial official news source of the entire planet.

With that being the case, and especially with the latest breaking news action in the Middle East (for which Twitter seems to be their last remaining resource to communicate), I thought it would be nice to go over a top 10 list of useful Twitter applications, tools and resources that will help you to better organize your Twittering experience. You may as well get familiar with them now, because many top social media experts claim that Twitter has long passed the “fad” mark in the social media timeline. If it’s here to stay, then it’s time to learn about all the cool stuff you can do with it.

Let’s do this.

1. Twitter.com

This one may sound obvious, but guess what the number one Twitter tool is? That’s right, Twitter itself! You see, not all that long ago, Twitter lacked some key features that tweeters needed at their disposal – such as the ability to “RT” (retweet) with the click of a button, a list of trending topics in the sidebar, and other little odds and ends that make tweeting so fun and easy. While in reality you don’t technically need all of the other fancy tools I’ll be talking about below, they will help boost your Twitter experience to the next level. Just keep in mind that if you’re in a rush, and want to tweet something quickly, it’s easy to just log on to Twitter.com with your username and get it done.

2. TweetDeck.com

Talk about super organization, Tweetdeck is easily one of the most popular Twitter management clients out there. Eventually, as your Twittering becomes more crazy, fast and confusing, (which tends to happen when you’re dealing with hundreds or thousands of followers) so you’re going to need to bring in the big gun. Tweetdeck definitely qualifies as a big gun. After installing Tweetdeck (an Adobe Air app), immediately you’ll see dozens of features and opportunities to manage your Twitter stream. Separate friends from colleagues and family, key in on certain keywords that were mentioned in your stream, sort your replies, narrow down specific topics being mentioned – I mean the list literally goes on and on. Oh, and did I mention you can simultaneously post to your Facebook account as well? Sweet.

As with any great application, there is an evil dark side – and in this instance, it’s another case of a great app being a complete resource hog. Recent Tweetdeck updates have addressed this issue, but it’s still not quite as efficient as it could be. Most will agree that it’s worth the trade-off.

Download Tweetdeck here.

3. Twhirl

Another Adobe Air based application, Twhirl is another highly popular Twitter management platform that certainly gives the above a run for its money. Perhaps one of the coolest things about Twhirl, besides the easy to use interface, is the ability to post to other sites like Jaiku, Facebook, LinkedIn, MySpace, and more. Packing a URL shortener and TwitPic powered image uploader; Twhirl brings the heat when it comes to managing every aspect of your social networking experience. Oh, and for the spelling challenged, it has built in spell checking. Sometimes it’s the little things in life…

Start playing with Twhirl here.

4. TwitPic

What would Twitter be without the ability to quickly post up pics of that wicked huge quadruple bacon cheeseburger you just ordered? Seriously though, pictures make Twitter what it is. Whether a tornado just blew through your town, or you just spotted Justin Timberlake naked on the beach, passing this info around is crucial to your social standing. TwitPic easily reigns as the top Twitter image uploader, and many applications and tools integrate TwitPic for ease of use.

When using TwitPic, you can post pictures to your Twitter stream via your computer or smartphone, which is definitely a must. When a picture is uploaded, it will show the number of views it gets, which is quite satisfying for those of us with massive egos to maintain. Best of all, it requires no extra signups or registrations – if you have a Twitter account, you automatically have a TwitPic account.

Check TwitPic out here.

5. Tweet-Later

The ultimate tool for those that like to work ahead is available in a free and paid version. The free version includes the ability to schedule tweets to go out at specific times, send automatic direct messages to new followers (which can be annoying to some folks), URL shortener, automatically unfollow those who unfollow you, and all sorts of cool little time savers that most would appreciate.

The paid version, of course, includes all of the free version stuff, plus the ability to weed out spam (which is huge), manage multiple Twitter accounts, run your own Twitter bots, and a nice selection of other enhancements to fully and completely automate your Twitter experience. The paid version of TweetLater costs around $30 USD per month, but there is a free trial that will allow you to test every function before buying into it. For most average tweeters, the free version should suffice.

Sign up for Tweet-Later here.

6. Group Tweet

So whether you’re tweeting for your company, or your boy scout group leaders, Group Tweet is a sweet little deal that will allow you to send group tweet to specific groups you set up in its interface. Perhaps you want to send one message to your web development team, and another message to your designers – well, this is the tool that you absolutely must have.

Using Group Tweet is as simple as setting up an account, registering your group on GroupTweet.com, and having all group members follow the special account you created, and viola! You can tactically send out messages and keep the lines of communication flowing. Best of all, it’s free.

Try Group Tweet here.

7. Twitter Counter

For those of us that need data (and ego inflation), there is a super cool online tool available called Twitter Counter. This awesome Twitter stats tracking tool will tell you everything from the amount of followers you’re predicted to have in 30 days to your average follower growth per day.

Best of all – they have graphs, charts, downloadable badges to show off your count on a blog or website, and just all kinds of fun and potentially valuable data that you might need personally or even in a company environment.

Personally, I love the “Twitter Rank”, which shows where you rank among your people, or even where you rank on a global scale. Twitter Counter is free to use, and if you love analytics, this is about as specific as it can get for Twitter.

Play with Twitter Counter here.

8. Twello

With a cool name like “Twello”, it’s hard to ignore this super directory of interesting twits. Let’s say you’re interested in following people that are into cooking, or energy, or real estate. Whatever it is you fancy, the first place you should visit is Twello.

Twello is a massive directory of twits that are broken down into all sorts of categories, and chances are good that if you’re looking for a specific group of people, you’ll find what you’re looking for. Twello also allows you to link to your personal website along with pretty much any other social networking site you have a profile on.

At the time of this writing, Twello (a service of WebProNews.com) sports nearly 5 million user profiles.

Start your Twello profile here.

9. Monitter

Let’s pretend the world is experiencing several breaking news events that you’d like to keep track of simultaneously. As you probably already know, Twitter is the best way to get real time news from ground zero. But unless you’re wanting to open several instances of Twitter search on your computer to follow each keyword or tag relevant to each unique situation, there is a better way.

Monitter allows you to monitor several different keywords in one handy interface, with real time updates. Today was the first time I’ve ever used Monitter (due to all of the goings on in the world right now), and I must say that I’m highly impressed! The information flowed very smoothly and there were no hiccups that I noticed.

Monitter is free to use, and it looks very sharp and crisp. It also allows you to specify the monitoring of tweets within a certain radius of a city or town, which can come in very handy for local events.

Try Monitter here.

10. Twitterholic

Last but definitely not least, is Twitterholic. This clever site allows you view the top 100 tweeters of all time (which Ashton Kutcher is leading the pack with over two million, with Ellen DeGeneres close behind) and best of all, it allows you to enter your Twitter username and it will pull stats within your city or location to show where you rank.

Not that this information is important, but let’s be honest, it’s fun.

Have fun with Twitterholic here.

Hopefully you’ve learned a little more about the top 10 Twitter tools that are available for you to use. Sure, there are literally dozens more, but the one above seem to get the most attention, and I’m sure a few were left off the list that should have been there (depending on whom you talk with). At any rate, the tools and services above should give any Tweeter, rookie or veteran, a lot of extra help in managing and having fun with their Twitter stream(s).

If you have suggestions for tools that should be included, by all means leave them in the comments below.

Interview with Steven Snell

1. First of all, could you tell us a bit about yourself and what you do for a living?

I’m 30 years old and my wife and I live in suburban Philadelphia (in New Jersey). It’s kind of hard to say exactly what I do for a living. I’m a web design, blogger and freelance writer, but I kind of bounce around in terms of the balance between the three. Sometimes I feel like spending more time working on sites for clients, and other times I may put that on hold and dedicate more time to freelance writing. Fortunately, my work allows me some freedom to pick and choose at times.

2. How did these two design blogs start, and what motivated you to create them?

The blog at Vandelay Design started about two years ago. At that time I knew absolutely nothing about blogging. My goal was to put some articles on the site in hopes that the content would help to draw search engine visitors and ultimately lead to some clients. Before too long the blog started drawing way more traffic than I ever expected and I started noticing that many of my readers were other designers rather than people who would be looking to hire a designer. At that point my focus with the blog shifted and I’ve never really used it to directly promote myself or my services, which was my original intent.

DesignM.ag started in July of 2008 because there were some things that I wanted to do with the site that I didn’t feel were completely appropriate at Vandelay Design. Even though I don’t use the blog at Vandelay Design to promote my services, it still is a portfolio site and that comes with some limitations. I wanted to start a more community-oriented site that could include things like a design job board, a gallery, and a news section, in addition to a blog. To me it made more sense to start a new site since there was really a new purpose.

3. Were your blogs always community based? (If they weren’t, how did you begin to create community around them?) How has a sense of community enhanced your websites?

The community at Vandelay Design is actually what got the blog really moving in the right direction. At first I was just using the blog as a way to publish articles, like I said earlier, I really didn’t understand the community aspect of blogging or social media. I started getting some traffic, somewhat unexpectedly, and people started commenting and linking and that is really how I began to learn about blogging. In some ways I feel like the community around the blog was stronger when there were less readers because I would be familiar with most of the commenters and I had more time to visit their sites and interact there as well.

At both Vandelay Design and DesignM.ag the design blogging community is largely responsible for any success that I’ve had. I’ve been fortunate enough to get a lot of great links and meet many awesome people that have allowed the audience at both sites to grow. Without that I don’t think I would still be blogging.

4. I’ve seen you around the blogging community over at Smashing Magazine, FreelanceSwitch, PSDTuts+, and many others. What is the freelance blogging lifestyle like?

Freelance blogging has been great for me. I actually never set out to be a freelance blogger but I was offered a position with Daily Blog Tips after I submitted a guest post and I almost said I wasn’t interested. I decided to give it a chance and I really liked it. It’s a great way to get exposure and links to your own blog, but the best part is that you get to meet some very influential people. It’s been really cool to work with people like Vitaly Friedman from Smashing Magazine and you can learn a lot about what it takes to run a successful blog just from being involved on a small scale. The downside of freelance blogging is that it does take a lot of time if you’re writing detailed posts, and that is time that you lose for working on your own sites. The last few months I’ve really cut back on my freelance writing because I have been focusing on some of my own projects.

5. Where do you find motivation and inspiration for everything you do, from web design to writing?

A lot of my motivation comes from the desire to run a successful business. I worked for several years in typical corporate America jobs and it really made me hate that lifestyle of working for a company that cared nothing about me or my future. So even though those people don’t care and would never really know whether my business is successful or not, I still have the attitude that I’m going to succeed in my own way to show that I don’t need a job from them.

In terms of design inspiration, I get a lot of it from design galleries and blogs. I try to also mix in inspiration from offline sources, but since I spend the majority of my time online I often find myself going there first.

6. To what would you tribute your overall success? Is there anything specifically that helped you become as well-known in the web design community as you are?

Well, I still have a long way to go before I would consider myself to be successful, but whatever success I have been able to have along the way I would attribute to consistent effort and a great network of friends and colleagues. I look back at the first few months of blogging and almost none of my blogging friends from that time are still actively blogging. Most got discouraged and gave up, or realized it just wasn’t that important to them. Blogging for an income takes consistent work, even when things don’t seem encouraging. Once I got my first small taste of blogging success (I literally went from about 10 visitors in one day to a few thousand the next because of an appearance on the Delicious front page) I became determined to grow my blog and that has kept me motivated ever since. I’ve been lucky enough to get some really great readers that have supported my blogs, and getting links and mentions from others in the community has been huge.

7. What advice would you give to anyone just starting out in the field of web design, or freelance blogging?

For web designers my advice is to find what you truly enjoy and follow after that. Some people love freelancing and others prefer working as an employee. And some people want to start a small studio of their own. Even though you may be a designer, those situations are all very different. My advice is to evaluate the differences and see what fits best with your lifestyle and your goals. And also, always be working on your own skills and abilities. I know I have a long way to go as a designer, but at least I can feel good about the fact that I’m moving forward.

For those who are interested in freelance blogging, my advice is to be assertive. If you don’t have much of a profile yet, the freelancing jobs are not likely to find you. Be willing to take the initiative and contact some blog owners about the possibility of writing for them. Taking action always beats not taking action. Also, I would advise freelance bloggers to work on building their own blog(s) at the same time. Constantly writing posts for other blogs can be very draining, and as soon as you stop, the money stops coming as well. By having you own blog that makes some money you will be better off.

New Gallery Sites

Steven has also just started up 5 new gallery sites, so be sure to check them out below. All are a great source for inspiration!

Cart Frenzy

A showcase of excellent e-commerce web design.

Type Inspire

A Showcase of excellent typography design.

Minimal Exhibit

A showcase of minimalism in web design.

Folio Focus

A showcase of outstanding portfolio websites.

Blog Design Heroes

A showcase of excellent blog designs.