Young Web Designer

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!