Where a front end web developers quest begins

Author: brookedavidson

Blue Canvas: This is more of a fine arts community but is another destination for inspiration. This is a great place to get feedback about your fine art. This is not a place to put your graphic design, it is a fine art community.

I love this particular TED talk because it is there to inspire all you creative people. If you were thinking about going into a creative profession and you decided to do something practical to pay the bills think again. Also if you think education is the barrier between you and your creative career think again.

Firstly, if you are creative you have something unique that not everyone has. Some people are just creative, some are mathematical some are geniuses. This is just how things are. Well if you are creative and you enjoy being so, then you might want to pursue a creative career.

Now I’m not saying that everyone makes it, just because you have a million dollar idea it doesn’t make you a millionaire. However, there are so many opportunities out there in creative professions now that you might as well dive in. Many do not require a degree. I do not have a computer science degree and I am a creative front-end web developer, web designer, ux and ui designer, call it what you like I get paid to make pretties on the internet.

Essentially all those artificial boundaries you thought were there are in fact not. You could go to school and get a degree but it will no more help you to land the job then changing your hair style. Your work is what is going to show an employer you are of value. If I say I can design a wedding invitation no one asks me, well can I see your degree. No. They say oh really, can I see one you’ve done.

If you are going to make money in this business you are going to need to master some of the adobe creative suite. Each software kind of fills a niche so find which one is best for you.

The way the adobe software works now that there is the creative cloud – You do not pay for a physical copy of the software, you pay for a month to month license. This can be expensive. If you work freelance, try to add this to your business costs and include it in your rates to make sure you come out on top. You don’t really just pay for one, you pay for access to all of them. Like it or not this is how it works. An individual license is upwards of $50 a month or more so keep that in mind. If you have several designers or you work for a non profit you may be able to get a group license. If you have a university email address creative cloud is cheaper. Also your employer will likely pay for this software so be sure to get a position where you can get this covered.

Illustrator

This is primarily for print and logo design. It is a vector based software. Sometimes the controls can be tricky especially if you are coming from photoshop. Don’t hesitate to check out lynda.com to get better at this.

Photoshop

Photoshop is the foundation of photo editing and also web based graphic design. You will need to have an advanced knowledge of this software to create interesting user experiences. There are many patterns, gradients, brushes and ui libraries that you can download, but you will still need to learn how to master the advanced techniques for yourself.

In Design

This is a print graphic design software. It is ideal for doing page layouts for multi page documents

Dreamweaver

This is a WYSIWYG software which means What You See Is What You Get. It allows you to design web pages, but is not as easy to use as adobe muse for example. It also has code editing capabilities. Many people look down on dreamweaver because it is not a hardcore coding software but it is my preferred text editor to this day. Dreamweaver has menus where you can select all of the css elements, which is incredibly useful because you can learn what is out there and how to use it. It can help you learn coding syntax.

Fireworks

This is another graphic design software that is both vector and pixel based. It is not as popular for employers but I started on this software and it has a lot of advantages working with vectors and slicing out web pages.

Flash

A web animation software, Flash actually has its own programming language called action script that you can learn if you want to be an expert. Flash can give you the freedom to do some amazing animation and interactive websites, but keep in mind that apple mobile does not support flash. Because of this so much of the internet is moving away from flash. There is still a niche for it, but it is often replaced with HTML 5 animation of some sort.

Creative Cloud TV or Adobe TV is an excellent video resource to deepen your knowledge of the Adobe Software. Often creative professionals present the information and it’s inspiring just to see them work.

If you are going to work in Graphic Design or Web Design you are going to need a good computer. Now it is in no way a requirement to get a Mac computer and I’m not here to start the debate. It has been my experience, over 10 years making money in this business, that a mac computer is ideal for working with the adobe software. The font rendering is more crisp and real to what you will be seeing in print for example, also the font management software built into the operating system has its advantage. Just as Microsoft Word might hiccup when you are using it on a mac, I find that the Adobe Creative suite can be sluggish on a PC. Figure out what is best for your needs. I recommend a mac.

Now that said I’m also a very cheap person so I always buy refurbished. Go to the apple store and look in the footer of the page for the refurbished mac computers they will be cheaper. Even the bottom of the line is fast enough as long as you are not doing any video rendering. If you are doing animation or video rendering get a beefier computer.

A mac mini or macbook air will be sufficient. I have a 27 inch imac. I find this setup to be ideal. Find your work set up.

Deviant Art is an artist community for many types of art. It is a large and very open community of artists and has a lot of inspirational work. It also has a lot of amateur work so you may need to dig if you are looking for something cutting edge. Deviant art is also an excellent resource for fonts, patterns, brushes, psd templates and much more.

Print design comes with its own rules and principles. Print typography is very different from web typography but you may see some cross over. Graphic Design of the print variety has a slightly different aesthetic but requires the same design eye, and ability to organize information.

Software you will need to know for print: Illustrator, In Design, Photoshop are a great start.

Web Design

Web Design is a different beast. There are many web designers who do not know how to code, but they do understand the underlying fundamentals of user behavior and expected behavior. So for example having the login information at the upper right hand of the page is not required, but you would expect it to be there. If you surf the web a lot and look at many examples of sites you will get the gist of what a user is going to expect. Now take that and add a sprinkle of creativity and you’ve got web design.

Software you will need to know for web design is: Photoshop, Illustrator – maybe Dreamweaver and Adobe Muse. You may also want to learn some wire framing and prototyping software.

Tuts Plus is an amazing tutorial resource, this is really how you are going to get the cutting edge skills that are a bit above. If you google resources on how to do a specific new cool thing, you are going to be unique to an employer. These tutorials give you the skills to have a deeper understanding of the software you are using.

The Code Academy is a free resource with walk through tutorials and a sandbox environment to test your newly learned coding skills. Totally free and pretty good quality to get started learning about HTML and more. This is a great beginners resource, but will not be as expansive as some of the paid learning resources.

Essentially a coding language can be written a little however, there is some structure but also a lot of freedom. Organizing your code into naming conventions and pieces that you can re-use just makes your job easier. A framework is a collection of code put together by a team or individual developer including really common tools you will need and packaged in an easy to use way. Essentially you will get a default image slider built in, however if you don’t like the defaults you can modify them or use your own custom solution.

Frameworks are really great for rapid prototyping and rapid development. Depending on where you work later, you may be required to do production work which is build a landing page and sales experience as fast as you can. In that case you do not want to re-invent the wheel. This is when you turn to a framework to have some defaults built in that make your job faster. Frameworks are not necessarily the best of the best solution – they are great for large projects, templates and fast turnaround. If you are doing smaller scale custom projects a framework may be too bulky – too many unnecessary files you will never use.

Framework examples:

Twitter Bootstrap -Twitter released their framework that they built for free

The very best place to go to learn the framework will always be the actual source, the website where they host the download. They usually have some getting started resources and downloading the framework, digging into the documentation and attempting to use it for a project will really give you the best grasp. However a second best and pretty easy bet will be the learning resources I have mentioned before including team treehouse and lynda.com.