Young Web Designer: 2012

Thursday, April 26, 2012

Why Choose Wordpress?

Wordpress has become one of the most widely used web softwares today. Why you ask? There are many reasons and before I bore you with pointless information here are a few.

Simplicity

Installing Wordpress onto a web host is as easy as their website says. You find a web host, download and Install Wordpress and Read the Documentation to learn all you need to know. Virtually all web hosts provide a quick install button for Wordpress because of it’s vast popularity.

Beauty

Wordpress isn’t like most blogs that have simple customization options. You can design your website any way you want and then implement Wordpress right into it. It’s not just some free gimmick of a service, it’s a full blown development tool capable of creating nearly anything.

Ease of Use

Once you’ve designed the site, Wordpress’ easy to use tools make it easy for nearly anyone to edit it. This makes it a great tool for designing for clients. Instead of having them go into the HTML files and edit it, you simply have to open up the editing tools and change the parts they want; no learning web languages at all!

The Community

One of the greatest things that everyone gossips about in regards to Wordpress is how wonderfully helpful its community is. With so many members you can find answers to nearly any question you have.

ITS FREE!

Wordpress is open-source software. That means that Wordpress is free and continues to grow because it is constantly updated by developers all around the world. Many plugins and themes are free as well!

These are just a few simple reasons to choose Wordpress. If you have a host, you can easily install Wordpress and try it out since it’s free. It would be dumb not to. So what are you waiting for?!

Wednesday, April 25, 2012

How To Add Social Network Feeds to Your Web Site

I’m sure it’s not news to any of you that social networking has become one of the most popular trends in business over the last few years. Facebook and Twitter are at the head of this movement. Businesses use these to keep their fans updated with the latest news and products from their company.

Anyways, these two sites have developed tools for web designers that make it easy for a web site’s visitors to view the Facebook and Twitter updates. These are extremely easy to use and implement. Here is where you can find them and how to customize them.

Facebook Social Plugin

developers.facebook.com/docs/plugins/

When you open the Social Plugin page of the Facebook Developer Tools, you will see many different options for plugins you can add to your site. They are extremely easy to install as well. There are not only useful for your own personal portfolio sites but look great when showing clients how you can get them in touch with their fans.

Here are a few of my favorite plugins that you and your client will find most useful. Be sure to check out the others I didn’t list here as well.

Like Button: A simple buttons gives users the ability to like your page and displays how many other people like it.
Like Box: This great plugin now only gives the viewers an easy way for them to “Like” your site’s Facebook page, but also shows a few of your latest posts and other people who like your page.
Comments: Adding a comment box easily gives Facebook users a way to talk about a specific page or article on your website.
Facepile: A lot of sites use this simple plugin because it shows off the different photos of people who have liked your website. It’s a simple but attractive way to show off your fan-base.

Once you enter your desired settings into the customization options, click “Get Code.” It will show you two separate boxes. The first few lines of code will be places just after your opening <body> tag and the second box of code will go where you want the plugin to be shown on the site. You can just as easily make a new style-id for the div classes provided to customize them even more.

Twitter Feed Widget

www.twitter.com/about/resources/widgets

Another easy to customize tool lets you show off your latest tweets and give viewers an easy way to check out your Twitter page and follow you. Colors and options are easy to customize to fit the color scheme of your site and there isn’t an over abundance of options so you won’t be scared to experiment.

Simply customize your settings then check out how it looks using the “Test Settings” button. When you’re ready to implement it onto your site click “Finish & Grab Code.” All you need to do from here is copy the box of code and paste it where you want it on your website.

Tuesday, April 24, 2012

The Design Process - Finishing Touches

There are a few final steps after the web site goes live that will finalize the design process. Ensure the client is pleased with everything that is done and is ready to finish up the project. At this point, incase something happens, provide the source files for the website. This could be given to them via email, CD or whatever means they find safest. I generally send them via email to save on their hard drive and give them a hard cody via CD just incase something happens to the files on their computer.

Also, be sure to go over some sort of maintenance plan with the client. They will more than likely need some sort of updating to the website and this could be a great way to keep them around as a client. Whether they just need updates every few months or bi-weekly, set up a plan that will keep them happy and coming back for your services.

Now, if the client is ready to complete the transaction, get them to sign off on the check and finally close out the project.

Be sure that the client is happy so that you can maintain a strong client relationship with them. You never know if they’ll need a redesign in the near future.

Now you’re done! Find a new project and get to work. Good luck.

Saturday, April 21, 2012

The Design Process - Deliver

So you’ve completed the site’s development and added the content to each page. Now it’s time to make sure everything is working as intended. Obviously, you want to test the site yourself. Anything from basic links, to any scripts implemented in the design are all vital pieces of the design you need to test before making it active. Have the client or a friend test them as well. It never hurts to have more people tests things because they may find something that the other people did not.

After testing the many parts of the site, it is important to test if all the code on the web site will validate. This ensures that the site complies with web standards. It is very easy to validate a website as well. Simply upload your code to W3C Validator and it will tell you if anything does not comply.

Once you’ve ensured everything works and the code is validated its time to get your client’s approval and make the site live. Uploading the files via an FTP (File Transfer Protocol) is the standard for most web hosting sites. Once all files are uploaded, check if the site is active and take a quick look over each page to ensure the files uploaded properly.

Now the site has officially launched. Congratulations!

Friday, April 20, 2012

An Intro to Client Relations

So you just got your first client. This is a big deal isn’t it? I know when I got my first client I was extremely excited. One day I was working my day job and struck up a conversation with a well-dressed businessman. Next thing I knew I was emailing him about this new website design I’d be tackling for him. I was exhilarated, slightly confused but most of all nervous. What do I do?

Communication!

The biggest thing about client relations is to communicate. Whether you are unsure of some little detail, need some content from their end for the pages, or want to keep them updated on your design progress, the key is to keep them filled in at all costs! It never hurts to ask a question or shoot someone an email, but falling out of touch for even a week can really hurt your client’s opinion of you. Trust me!

On my first real job, I got so caught up in my other classes that at one point I didn’t email my client for over 2 weeks. It didn’t seem like a long time but when I got an email saying simply “Is everything alright?” I knew I had messed up. Don’t get that email. Send constant updates.

If there is anything I learned it is simply communicate everything even if you are unsure!Everything else will come with time and talking to your client.

Wednesday, April 18, 2012

The Design Process - Development

So your client has approved the designs and now you’re onto developing the site! Some designers prefer to send off their work to outside web developers, but it is more and more common nowadays for designers to also develop their own work. Front-end development involves the simple web languages like HTML and CSS, which will enable you to get your site up and running.

Slicing

First off, you have to get your images ready to be implemented into the HTML. In Photoshop, this involves using the slicing tool. This is a nifty little feature that allows you to not only chop each part of the layout into separate images, but also gives you the ability to export the slices into a tabled HTML layout!

If you have never used the slice tool before, HERE is an informative video on slicing webpages courtesy of 1stoptutorials

Coding

After getting the design slices, open the file in Dreamweaver. It should already be looking pretty familiar. As your skills improve you will be making big changes that will increase the functionality of the website. Some of your first sites may not look at all different from the .psd document of your site. Once your HTML and CSS skills improve, you will be transforming your site into one that can adjust sizes, add text wherever you want without hurting the layout, and implementing special scripts that only improve upon your intial .psd designs.

After coding the initial design, if you have made multiple pages you will code each of those. If you made wireframes originally

From there, start adding the content! Images, articles and text will be all over the pages. This is usually provided by the client but if it’s not you have the option to put filler text into areas until they are able to change it to their liking.

These are just the basics of coding. If HTML were the Earth than the Web would be the rest of the universe. There are countless other languages that you can learn that improve functionality and add special features. I won’t get into that now but in the future I will have a basic write-up on languages and then more in-depth articles.

The Design Process - Designing

There is no right or wrong way to go about designing a website. Each person has a different way of doing so through skills they have developed over many projects. My process is drastically different from what is was even one year ago because I have learned many techniques that have helped me become more efficient and obtain better results. This articles will speak of the 3 essential steps in efficiently designing a site.

Concepts

The conceptual stage can mean many different things depending on what way of designing you are more comfortable with. When I first started designing I went straight into Photoshop and got to work. It felt right but I found myself constantly scrapping design after design and wasting a ton of time. There are two main methods I would recommend before jumping into Photoshop.

Sketching: grab a pencil, open up your sketch pad, and get to work! Quickly sketching your ideas for a site will give you a general idea of whether or not it will work. From this point it is easy to load up Photoshop and implement the ideas you like best. You can sketch a few quick ideas for various parts of a site in mere minutes. Take a look at some sketches I did below. They aren’t pretty but they allowed me to see what they site would look like without spending 20 minutes designing a banner only to find it isn’t as effective for the site as I first thought.
Wire-framing: as seen below, wire-framing shows you exactly what needs to go on the different pages you will be designing. You get the layout of the site out of the way first and from there are able to design each piece. This ensures you won’t miss anything vital to the site and will avoid trying to squeeze it in there later. It’s one of the best ways to start out and easy to build off!

Design Mock-Ups

When you have your ideas in full swing, it’s time to open up Photoshop and get designing! Take your sketches or wireframe and make them pretty. Be sure to take into consideration the different key points that the client gave you including the colors, logo, style and so on. This is the fun part! If you’re having trouble making it look good, look up some other sites for Web Design Inspiration.

Review and Finalize

After finishing up the design mock-ups, it’s time to review them with the client. Either show them in person, or email over the mock-ups images for the their approval. More often than not they are going to want some changes, hopefully nothing too drastic overall. After a few reviews and changes you should be on your way to the next step, Developing!

The Design Process - Planning

Once you get a website design request, you may be ready to jump right into designing the site. Wait! The firs step before designing a successful website is collecting as much information as you can from your client. You don’ t just start designing and hope it works out. Instead, you find out many things about the client, website, and their goals.

Designer’s have many different ways of going about this first step. I have found the most popular and effective choice to be a “creative brief.” This is a list of questions you send to the client to get a better understanding of what they are looking for in this new site design. There are many factors to consider in this design brief. Some important ones include

The purpose of the site
The target audience
Special features (such as javascript navigation effects and flash areas)
Budget
Target Completion date

Below are two guides I found very helpful in writing a creative brief.

Another important part in planning is to create a “site map.” Not only will this help viewers upon completion of the website, but it will also help in creating design aspects like navigation and then adding the content to the pages. Site mapping doesn’t simply involve listing all the pages the final website will include. It is important to show the hierarchy of pages. To give an example, you may have two pages; the “Home” page and the “About” page which will have the subpages “Our Mission” and “Contact” under it. This sometimes involves a lot of though to complete. Work with the client on this one and give your input to the organization of the pages.

There are various other steps you can take while planning that will make the rest of the process easier, but some people wait to complete them at a later point. I would highly recommend double-checking the host and domain are locked in. This is usually done by the client but make sure so that you don’t have to go back and make simple changes later on.

Make sure you have a solid understanding of what the website is going to entail. Ensuring this will make the rest of the process go as smooth as possible!

Now get ready to start designing!!!

Tuesday, April 10, 2012

The Design Process - Introduction

I’ll make it clear again - I am no master at web design, but I have grown as a designer so much over the past year that I feel sharing what I’ve learned will in turn help others. This is the first entry in a series I plan of doing that will talk about each part of my process of creating a website. It will start out with simple things like filling out a questionnaire and planning a design, and eventually finish off with you sending the final files to your client.

Generally there are 5 or so parts of the design process.

1. Planning

Planning is much more important than most new designers could imagine. At first all I did was ask a few questions about what the client wanted and then I went right to work. Now I do much more than that but in turn it saves me a lot of time.

2. Designing

Designing is when all the real fun begins. Open up Photoshop or whatever program you prefer and start designing the look of the site. Many times you submit multiple design variations to the client and they decide which they feel best suits their interests. From there you will revise various areas of the site they feel need some fine tuning. Once the design is approved it’s time to turn it into a file suitable for the web.

3. Develop

While it could be said that converting an image file into HTML/CSS is part of the design process, I prefer to consider it part of the development process. Once the front-end coding is complete you can begin adding different frameworks such as ASP and PHP or ship it off to a partner to handle that stuff for you.

4. Deliver

Now it’s time to get the design online! It is usually in your best interest to test it out on a temporary web page before moving it to the permanent one. This way, you can test out the pages and make sure everything runs clean for the viewers. You can even ask friends and family to test it out before it goes live.

5. Finishing Touches

Once the site goes live it’s time to wrap things up. A list of all the files should be handed off to the client. Meet with them to ensure everything is running smooth and what they wanted. Then it’s time to collect your check!

Things always tend to get change a little during the process but this is a good start. Be sure to check back for more updates on the Process series! Thanks for reading.

Essential Guides for Web Designers

Taking the jump into freelance design can be a huge step in one’s life. Before I took the leap, I did my research and the wealth of free information on the topic was surprising. From websites, to .pdf booklets, there are so many tools out there that you will find beneficial. Sure you can look on your own, but i have compiled a list of my favorite materials that I found most useful when I began freelancing.

The Web Designer’s Success Guide

http://www.airgid.com/book/

This book written by Kevin Airgrid, is an amazing book about how to start up your own business. It is told through his own personal experiences of taking the jump into freelance design. It covers everything from time management, creating your workspace, interacting with clients, managing finances and more. This was both the easiest and most helpful reading I have come across about web design and freelancing. And best of all, ITS FREE! Download it now!

The Elements of Typographic Style Applied to the Web

http://webtypography.net/

I felt obligated to put this guide into my list because of the huge growth in popularity of typographic websites. In addition, bad typography can make even the most beautiful sites hard on the eyes. I’m sure we’ve all been to a website that we left because the text was hard to read. Don’t make those mistakes! Check out this site and all its free articles on typographic design principles.

The Web Style Guide (3rd Edition)

http://www.webstyleguide.com/wsg3/index.html

This is an essential reference for any designer, not just freelancers. Just by looking at it’s table of contents you will be able to see the many topics that the website covers. Some topics include typography, page design, page structure, usability guidelines and a general guide to the design process. Many articles have pictures, graphs and other helpful graphics that strongly help explain the different concepts throughout. It is a great learning tool and reference to look at while working on a project. Definitely keep this one bookmarked.

Sunday, April 8, 2012

The Benefits of Becoming a Freelance

Becoming a freelance web designer is well, easy. You can do it at any point, but that doesn’t mean it’s an easy job. It’s tough work like any other job, but there are some truly great benefits that I can attest to and many other have made pretty clear.

Being the Boss

Like sleeping in? Wearing t-shirts? Well, as a freelancer you can. More often than not you will be working from your personal office so you get to set the rules for yourself. Sure the client will have deadlines and different stipulations for the job, but you’re pretty much in charge of the rest. This can have it’s downsides if you aren’t willing to motivate yourself, but in the long run this will help you be as relaxed as possible when working.

Selecting Your Clients

As the boss, you get to select your work. After meeting with the client and going over a creative brief, it may occur to you that you do not wish to work with this person. As a freelancer you are able to decline the job whereas when you are working for a design agency you may get some jobs you are not so fond of.

Multi-tasking

Working on one site can get pretty boring. Well luckily you need to make a living so asa freelancer you may be working on multiple projects. Sure this can be stressful, but it will take away the monotony of working on the same project day in and day out for a month or more.

Learning

If you’ve chosen to be a web designer, chances are you’re passionate about it. As you do more and more jobs you will constantly be learning. This could be anything from learning new Photoshop effects, increasing your CSS knowledge, or implementing some Javascript you found on the web. Eventually you may be teaching yourself new languages like .php or learning how to integrate your designs into frameworks like Joomla and WordPress. It’s all up to you!

Finding a Niche

On a personal level, I enjoyed getting a variety of jobs when I started freelancing, simply because it was exciting getting into the industry. Job after job I realized something; while I love designing sites, what if I designed for sites I love? Since then I began looking into industries based on my hobbies. The two main ones have been golf and video games. I am currently working on a website for a local golf course that opened a few years ago but is already in desperate need of a makeover. I also began a personal project based around the Indie video game market that I can hopefully expand into a wider audience of gamers and game designers. It’s really exciting to be working a job I love, on projects for companies that I love! So, find what you like and look for some design jobs in the industry!

Sure, there's probably hundreds of other benefits including financial ones, but these 5 have truly made freelancing for myself a happy experience. So, give it a shot and do a little freelancing on the side. If you think it could work for you then go for it! It's not everyone's cup of tea, but everything's worth a shot!

Saturday, April 7, 2012

How to Get Started with HTML and CSS

There are many ways you can learn how to design websites using HTML and CSS. You could follow only tutorials, buy a book, or even take a class. I’m going to teach you what I found to be both easy and effective.

For those who have no clue what the terms HTML and CSS mean, I will quickly summarize. HTML, or HyperText Markup Language, is the language that websites are designed in. It consists of tags that are written like <this>. Cascading Style Sheets, or CSS, is a way for you define what each of these tags look like. For instance, you can specify the color, face and size of the <font> tag. Those are the very basics, but once you begin learning the language it will all make sense.

So how do I recommend learning?

Visit www.w3schools.com and begin taking the tutorials.

They start with the extreme basics and by the end you will have a solid understanding of HTML. It includes tons of examples and in the end you can test yourself on what you learned. Next, move on to the CSS sections. The same goes for these. Be sure to test yourself though!

Now that you know the basics, PRACTICE! Look at the examples and then try your own spin on them. Try building something that resembles a website. This is the best way to learn and if you enjoy it, it should be fun!

Yea, this is a simple article but I wanted to point out the best place to learn and that PRACTICE is the best way to develop your skills once you learn the basics. So, if you’re just getting started, check out those tutorials, learn and then practice! and you’ll be on you’re way.

Thursday, April 5, 2012

Where to Find a Job

This week, I decided to start off with a quick roundup of my favorite websites for finding full-time, part-time and freelance jobs in the web design field. Of course there are thousands of sites out there with job listings but after looking around for some time, it is clear that a few stand above the rest. I am going to list a few of my favorite that are specifically about the design field, and a few that list thousands of other jobs that you probably heard of from a friends or other source.

Before talking about these sites I want to talk a little about contest sites. Recently, sites like 99designs.com and designcontest.com, have become very popular for both designers looking to make some cash, and businesses looking for the best design for their hard-earned cash. This works out great for the business but, I advise you use caution when competing in these contests. As you can see by viewing the various contests on these sites, there are often 20+ designers battling it out for the top design. If you manage to win the contest you’ll make a good bit of money for the time invested. BUT, as you’ll learn if you choose to compete, the chances of winning are small, even for great designers. Before you know it you could be making 20 different revisions to the design and spending 30+ hours, only to find out that they like someone else’s design slightly better. It’s not that you fear losing the contest, it’s that so much time invested without guarantee is going to take away time you could have invested elsewhere. Of course, win or lose this could be a good place to fine-tune your designing or start of working for a client but I wouldn’t recommend it over freelancing for specific businesses.

Alright, now onto the job sites!

Smashing Jobs

http://jobs.smashingmagazine.com

It goes without say that Smashing is one of the top design blogs on the web and their job list is the same. You’ll find many different fulltime and freelance jobs in both the design and programming fields.

Behance Joblist

http://www.behance.net/joblist

Behance has become one of the most popular professional design sites on the web. Many businesses list jobs here in a ton of fields. The Web Design and Web Development list is always worth looking at as it has a long list of open positions including jobs at many noteworthy companies.

Authentic Jobs

http://www.authenticjobs.com/

This is a nifty site with job listings specifically for Web Designers and Developers. You can sort between full-time, contract, freelance and internships. They also have a free app on the Apple App Store which I have found extremely convenient for when I have a minute between classes or elsewhere.

Monster

http://www.monster.com

Monster has become one of the biggest job listing sites on the web. While I have found that it sometimes doesn’t have as many jobs as the sites listen previously, it is still great for finding jobs around your area.

On a final note - don’t forget to check your local newspaper! They often have listings for jobs you wouldn’t find on the web and it is almost guaranteed there aren’t as many people seeing it as there would be on a site like Monster. Also, look for businesses based on your location through sites like Google. Simply typing in “Web Design Madison,” (replacing Madison with your town) will give you a list of different studios in the area. Shoot them an email inquiring about open positions, internships or even just advice on how to get started in the field.

Hope this has been helpful for you all. Good luck!