So you already picked web design and development as something you want to do in the future, or maybe you just want to pick a hobby to pass your time away.  Either way, there’s always a few tools or resources that everyone needs to complete the job.  And in most cases it would be the same tools or just different versions of the tools that do the same thing.  When starting web design, the process ultimately comes down to 5 basic steps.

1.  Designing the Template
2.  Slicing the Template
3.  Coding the Template
4.  Filling the Content
5.  Final Clean-up

I will eventually go over those steps in future case studies and tutorials.

For now, we should concentrate on the tools that help us with those steps, and without further ado, here is the list of web design tools you should have in your arsenal.  If you have any other recommendations, feel free to comment below and share them.

Designing the Template

For designing a template, you need a graphics editing program. A program that can make gradients, boxes, shapes, etc… Here are the list of tools that I recommend.

1. Adobe Photoshop

Probably the most popular image editing program would be Adobe’s Photoshop line. The current version is Photoshop CS4, and may I add that it is quite expensive. However, the saying goes, you get what you paid for, and certainly after dishing out the money for a license gives you one of the world’s greatest editing program (sounds very exaggerated, but really, it’s that good). Photoshop is great not only for web design but for other fields and careers such as the art industry, photography, graphic design, print design, and pretty much anything that deals with pictures.

2. GIMP

So what if you don’t have Photoshop or the budget to afford it? GIMP is probably your next best bet. It has layers like photoshop, and a few other features. When I first tried GIMP when I was looking for other options since I couldn’t get my hands on Adobe Photoshop, I first thought the interface was really confusing (compared to Photoshop). However, lo and behold, someone has made a plug-in for GIMP that makes GIMP’s interface just like Photoshop which is very useful for those that may have to downgrade from Photoshop.

3. Need more options?

I recently stumbled over a post that I thought may be more helpful for others, and of course, I’m not into the whole copy and pasting other people’s hard written blog posts, so here are 19 more free image editors that you may like. Visit the site and see if there’s anything in there that may help you. There’s also more programs in that list that go beyond the tools needed for web design.

Also a reminder, you can slice your template with your graphic editor as well. No need to get a separate program for that.

Coding the Template

After you have your template designed whether it be a simple portfolio site or a complicated e-commerce site, it’s now time to code it. If you just want the most basic thing on the earth to code, then your computer already has it. Notepad. Since coding is just a language, all you need is a text editing program and you’re good to go. I would refrain from using editors that automatically format like Microsoft Word since they tend to add a lot of weird formatting that may conflict with your coding. Notepad, Wordpad, things like that is all you need. However, what if you would like some help with your programming or perhaps a more visual look to your code?

1. Notepad++

Notepad++ is a great editor for coding. It supports multiple languages and highlights certain syntax code words so it is easier to spot a mistake if you make one. It also has tabbing so you can open multiple files, and one of the good features I like about it is when you open it, it opens the last couple of files that you worked with on your last session. Very handy when you accidentally close it, or figuring out the next day on what you have to work on next. There is A LOT of features on Notepad++ that I don’t even use, but perhaps you will find a use for them sometime, or simply forget about them like me.

2. Scite

Scite is another text editor that I use a lot. I interchange with either programs. Honestly, there’s no difference except Scite doesn’t automatically open files in new tabs and it doesn’t save your last known session. However, it’s a lightweight program, that’s really nice to have.

3. Panic Coda

Since I’m also a Mac user, I can’t forget to give this program some credit. Panic Coda is probably one of the greatest code editors for the Mac right now. It is costly, starting at $99 but the price is worth it in my personal opinion. Although there’s a lot of alternatives, this is probably the most user friendly. You can connect to your files with your FTP information, upload, save files instantly, edit your files there, and even preview them. Very handy.

4. Mozilla Web Development Plug-ins and Add-Ons

Another method of editing code and seeing how it works would be using Mozilla Firefox’s plug-ins and add-ons. I’ve already listed some really good plugins for web developers in a previous post. Using those in combination with text editors to save to your ftp will result in faster coding. It may be quite obvious, but I’ll make sure I show you guys my process in editing code in a video cast later.

Other Useful Tools to have

There’s a lot of extra tools you might need to finish your development or make your design much more efficient. One important tool would be an FTP client. There are tons of FTP clients, and I’ve tried many of them and pretty much they all do what is needed for the most part. Some may have extra features or fancy interface, but all you need is a client that connects to your server or the client’s server, and you can upload and download from it. My favorite FTP programs would have to be either FireFTP which is an add-on for Firefox to use an FTP right in the browser or FileZilla which is a standalone client and supports multiple connections.

Here’s a link as well to even more web design tools you may or may not use, but personally here is my final list of web tools that are good for starters.

Since I use both Mac and PC, I’ll put what I use for both.

PC

1. Notepad++ (Text Editor)
2. Filezilla (FTP)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

MAC

1. Panic Coda (Text Editor/FTP in one)
2. Filezilla (I use it sometimes for faster uploading)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

Alright, so that’s definitely more than 10 and of course there may be better programs out there.  I wouldn’t waste my time with getting the advanced programs.  Wait until you’re comfortable with coding since the more you know, the more you’ll be able to use the extra features.  So don’t waste your time trying to research it all out. I’ve already done it for you. Come back for more case studies and resources for beginning web designers.

P.S I’d like to thank those that contributed to my comment and contribute for Haiti entry. A total of $5, but I’ll throw in another $5 to make it an even $10. I’ll do the transaction tonight and will post an update to that post later tonight. Thank you for your cooperation, and stay tuned for more ways to participate and even win some prizes.

Are you a designer or know one that likes to do work, yet at the same time you don’t want to show it? How about those people that just say their works sucks, or not good enough?

*raises hand* Yeah, I’m guilty of it as well. After recent conversations with my employer at job at Into the Darkroom, and long time talks with Vina, it has to come to me a few reasons why I don’t like to show my work.

1. “Hmm…I don’t think my work is good”

Most designers, just don’t have the confidence to show their works.  As for me, I would have the fear of showing it.  Why?  Simply put, you’re afraid.  Whether it’s what they will say, or whether what critiques you will get.  Sometimes you’ll get critiqued most on a part of the piece that you think looks perfect.  This is probably one of the main reasons that deters artists and designers alike to hide their stuff.

2. ”People like my last piece, but this new one doesn’t live up to that”

Another reason for designers that don’t show off their works is being pressured from the audience, or being pressured from their own works that they have done in the past. Yes, that’s right. The work that a designer may have done could have an effect on the work the designer will do in the future. If you’re like me, there will be a time in your design life where you will create a graphic design and everyone around you will applaud, give great comments, and basically they will take that as your “image”.

What I mean by that is, when people see something, they usually expect that the next product or design, will be of equal or beyond what they saw. Therefore, if there expectations aren’t met, then they will be disappointed. This puts pressure on us designers, because, truth be told, we can’t always make a really good piece every single time whether it be from lack of inspiration, client restrictions, or a restricted theme.

3. “Geez…look at these other people, I want to do something like that”

Let’s get it out of the way. No matter who you are (pertaining to the design and art industry) there will always be a better designer and artist than you. Whether they are better as a whole or better in a certain theme. There will always be that one person you will admire. For me, I’ve always admired the works of Pete Harrison, Nik Ainley, and even the lovely Vina Nguyen with her arts and designs. These are people that I will always admire, and in some cases wished I can imitate their work.

However, you can’t let that admiration get to you. Everyone has an individual style that’s unique to themselves. You put your own personality into your work, and your own time and dedication, which is something that no one can mimic. Works can look the same, but the process to making them may be different. Don’t be afraid to go outside the box with your designs. Don’t get stuck in the hole that you’re no good. Be inspired from them, and work on your own things.

4. “I’ve worked 20 hours so far, and it looks stupid. I’m going to delete it.”?

Many times, designers and artists will create a new piece, and within a couple minutes, hours, or even days working on it, they decide it looks really dull or one of the reasons said above gets across their mind. Let’s see how I can put it nicely. Just finish it. Whether it’s ugly to you, or whether you think it’s bad to other people…you shouldn’t care about it. Some people will like it, some people won’t. Just finish it, because the more you prolong it, the more likely you’ll never get it done.

Conclusion

So what have we learned today? As what my employer said, just get it done and show it. Peel off the band-aid, and see what the world thinks of it. The more you show, the more confident you’ll be, and the better you’ll be when you get some tips and advice. You’re not killing anyone if you’re showing it (I hope not, but don’t quote me on that) and you’re not doing much harm (unless you’re wasting a lot of paper doing your work, try to be green).

So if you’re a designer or artist that doesn’t like your own work or show it off, don’t worry, a lot of people are the same. Learn to deal with it, and just show your stuff off. You won’t get any better or you won’t get exposed if you just hide it.

Any opinions, questions, or rants? Please leave your comment below.

-Dan

P.S. In terms of introduction, I’m Dan, and everything described above was pretty much how I felt about my own work. And that’s why I created this blog. I wanted to show my experiences, feelings, and journey of my designer life and help other designers and even developers who are having similar problems. Please follow me and subscribe to this blog. Free resources, tutorials, tips, and case studies will be made for all my viewers and audience. I hope you will learn a lot, and feel free to comment on my articles for your opinions and your tips.

I’d like to give a great thanks to Vina at vtension for helping me a lot in terms of my graphics, and how to see different aspects of my life. Take a visit to Vina’s blog and check out her stories and resources as well.

What’s the difference?

You can never tell, but often enough, if you’re paying for a $50 logo, you might be getting something that doesn’t fit well to yourself.

Branding isn’t just a a service to make a logo.  It’s a process that both the designer and client should go through together to find out what’s the best way to represent the client’s philosophy, morals, services, and profession.  Once both has explored the textures, color palettes, the font style, and overall feel, then that’s when the branding has just begun.  The client should test out that branding, or even designers themselves should explore the use of their logos in business cards, brochures, watermarks, etc..

Once the client feels everything is in place, then you have fully branded them.  If you can strip something off the brand without it making a big difference, then you probably haven’t branded them correctly.  Imagine companies like Coca Cola or T-mobile.  Imagine them with different colors or different fonts.  Sure they might be the same product, but for the most part, you’d probably think it’s a bootlegged version of the real deal.

So how do you make a logo for yourself?  Surely you can’t just make something you think is “cool” and “awesome” for yourself.  You need something presentable, something you can show to others, something that represents you and you can’t live without it.  So here are a few tips and steps you might want to consider for yourself when you brand or rebrand yourself or another client.

Tips on branding yourself

1.  Who are you?

The first thing you want to determine is who you are.  What’s your name, your company, or alias that you are branding.  Sometimes you don’t have to think out of the box for a name.  Use your own!  If you have a common name, then you might want to find a creative way to integrate it into something.  Countless times at work, I see many people who’s businesses or companies is simply their name with photography attached to the end.  Not only it helps spreading your name, but also pretty much gives you a guaranteed first spot on the search engines.  As for me, I chose to do “Creative-Le” or “Creative-Le Designs“.  It’s simple, a lot of people will think it’s “Creative-ly” so it also acts as a pun.  Know who you are or who you are branding.

2.  Play with typography.

A lot of people think that most brands are just symbols, or some fancy mascot, but why not just simply type your name out?  It’s easy to do, simple to integrate, people will read understand it, and you’re half way done with your brand.  Try your name in different fonts whether it be thin like Helvetica, or thick like Impact. Mess around with the kerning and spacing but never skew or stretch  your font.  By doing so, you destroy the art associated with the font.

3.  Mess around with colors

Utilize different colors.  Determine whether you like warm colors or cool colors.  A color palette is important to a brand since it can define how your site/business cards/products, and other branded items.  Don’t be too overwhelmed with color.  A good test of your logo that you want to try out is to make it monotone and see how it looks in black and white.  If it looks great still, then continue on.  If not, then you might want to test out different versions of your logo.

4.  Don’t settle for one.

Even if you think you absolutely love that logo/brand, remember to put it through the tests.  Try different sizes, positions, colors in order to find that best version.  Once you got it, you can consider the job well done.  Vtension aka Vina Nguyen has recently rebranded herself with a new logo.  Notice how he manipulates the little elements in her logo and it creates a whole new feel.  She finally decided on one and will be using it on her future blog that will be coded soon together along with mine.

And for anyone that’s curious, here’s my final brand for myself.  Simple, yet a little twist.

Branding takes time.  It probably took me 2 days or so to figure mine out and it took Vina about a day or two as well.  Take it slow when doing something like this (unless you’re pressed for time from a client)  However, in the end, you should remember that making logos isn’t just a 2 hour job thing.  The more time you take into research and experimenting and the more a client knows about the process behind branding; the more value your designs will be along with your logo having more meaning to it.

As always, this is all from experience and from working with companies that deal with this as well.  All designers and people have their own opinions.  What validates mine?  My experience and that’s what most of my posts will be about.

Thanks for viewing my post and follow me on twitter for more updates or subscribe to my RSS feed to keep in touch.

Our next post will show you my design that I have finally settled for my blog and site.