Visual Design Techniques

Painbrush and PaintsI am currently taking a course in Visual Design Techniques. In this course, I will be learning how to create professional-looking websites that appeal to my target audience.  What about this course excites me?

Anything that involves art sounds like fun to me!  The prospect of being able to create something artistically appealing and incorporate it into a website is exciting.  There really is no boundary to what you can do.  With the web, you have the power to reach across the world in seconds!  That amazes me.  I look forward to learning more about Photoshop and how to slice up a Photoshop file to create a live website.

Business people walking towards a world mapWith this course, I hope to learn more about how to make a website that will catch your interest.  I want to learn more about what is visually appealing and how to use that to reach people.  How can I create a site that will cause you to dig deeper and develop a sense of trust in what I am saying?  There is a lot of competition out there, and I know it is important to equip myself with the latest techniques that will give my clients the leading edge with their websites.

Advertisements

Important Ingredients for Website Design Credibility

handshake through a computer screenI recently read a blog by Lorelle VanFossen, a popular WordPress blogger.  She provides a wealth of information about what makes people trust a website.  I found several points interesting and helpful.

When someone comes to your site for the first time, you have about one second to gain their trust.  One second.  That tells me that you better do some research and learn how to make that one second count.  What are people looking for in that one second?  How can your site keep that person’s attention and draw them in?

The first thing that people are looking for are trust triggers.  These are design elements that invoke a feeling of trust from the user.  It can be a variety of things including a professional logo, content accuracy, design consistency, minimal advertising, updated content, an About Us page, third party links and testimonials.

I liked the points made by Larry Kunz in his blog.  To gain trust on a corporate blog it must be “humanized”. One way to do this is with an “About Us” page where you post staff photos, their hobbies, and other information that might make the experience more personal for the user.

Another good point was made by copywriter Susan Greene.  One way to gain trust through your content is to use the word “you” instead of “we or I”.  I also liked her point that you should tell your visitors what you have, what it will do for them and what they need to do next.  Keep it simple.

Your goal is to get the user to your website, draw them in and get them to stay, make a purchase or interact if that applies, and return in the future.  If you incorporate the elements that invoke trust and credibility you should be able to reach your goals! Trust me.

Positive Attitude

Smiley FaceThink of someone who you respect. Now tell me, do they have a positive outlook on life? Or are they negative? I’d be willing to bet that they are positive.

Having a positive attitude is not easy. I think our natural tendency is to complain. Sometimes we don’t even realize how negative we have become. Many times, I have to stop myself and redirect!

When it comes to working, a positive attitude is very important. Who wants to work with or be around a person who cannot enjoy their job? You need to look for opportunities to encourage others and also recognize and celebrate your own accomplishments. If this is the work you were made to do, then enjoy it! Remember why you chose your job and be a positive influence in the workplace! You can make a difference.

Photoshop Tutorial for Web Layout Design

My latest assignment in my Web Design program was to find a tutorial on creating a web design layout, complete the tutorial and post the finished product. I selected this tutorial at psd tuts+  because I liked the simplicity of the design, and the background caught my eye.
I was a little worried when I read the difficulty was “intermediate” but decided to give it a try anyway. After applying a gradient to the background, I downloaded a watercolor image from Gomedia’s Arsenal. I really like this image, and it was free! Next, I inverted the color on the image, and that gave it the cool hues it has now. Next, I erased part of the image to get the same look as the example.  This was my favorite part of the tutorial.  I am sure I will use this technique in other design layouts.
The one step I had a little trouble with was applying the radial gradients in step 6. I wasn’t quite sure how to get the exact same effect as the example, but I think it turned out well. Next, I added text and text boxes, along with some dummy text. A few enhancements were made to make the text stand out nicely.
That was it! I enjoyed doing this tutorial. I thought the author did a great job of explaining the steps and giving visual examples on what to do. This has encouraged me to give some other tutorials a try.

Honesty and Integrity

Honesty and Integrity

Who do you respect? To whom would you go to for advice? What qualities do they possess? Would you do business with someone you know is dishonest? I hope not.

I believe that honesty and integrity are key to running a successful business. My father was known for these qualities. People trusted him and respected his opinion. I know this had a great deal to do with his success and his stellar reputation. People like that are not easy to find.

Some people may think that taking dishonest shortcuts in business will get them ahead of the game. I think it will eventually catch up with them. Find a mentor you trust and respect. When you need help with a decision, seek their advice. Take the high road. This will get you well on your way to a successful business.

As the saying goes…“Honesty is the best policy.”

Communication

Communication is key in any business. You must listen to your client, and you must know how to get your point across as well. Listening can be difficult. You may already have ideas in your head that get in the way of what the client wants. Work at clearing your head and really hearing what they have to say. It could be that your client is not a good communicator. In that case, you may need to be armed with ways to extract the information you need. Make a list of questions that the client will need to answer. Help them understand what it is you need from them in order to make their website a success. During the development of the site, be sure to keep the lines of communication open. Don’t wait until it is too late to find out you are on the wrong track.
Find out how to best communicate with your client. Some people are easier to contact by email. Or maybe a phone call is best. Your client may want to meet with you in person occasionally to get updates, or maybe they don’t care to see you till you are done. Find out what your client expects, then do your best to deliver.
Keep your communications professional and to the point. Do not get lazy and forget to let your client know the status of the project. Keep them informed and in the loop. Hopefully, by employing these tips, you will save time and money by completing your client’s website in a timely manner.

Responsive Web Design

I recently read the book Responsive Web Design by Ethan Marcotte.  The idea behind a responsive web site is to make the site viewable on any size device.  That may be a desktop, a laptop, an iPad or an iPhone, to name a few possibilities!  I think this is a fantastic idea.  Why wouldn’t you want your website to be viewable as many ways as possible?

I was given a project idea and was asked to make it a responsive website.  First, I made a wireframe using the 960 grid layout.  This gave me a base for figuring out the percentages of various components of the website.  I designed the page which would be for a normal-size computer screen first.  To make the layout flexible, I converted pixels (fixed width) into percentages (flexible width).  This is done with a very easy formula ….target / context = result.  The target is the size you want to have, the context is the size of the containing element, and the result is the number you will use to make your layout flexible.  I  converted font, elements, images and media sizes from fixed to flexible sizes.  Once the main page was designed, I added media queries for the various view-port widths (also called break points) of devices.

It is pretty cool to see how this works with your own site.  I know I’ve run into many sites that are not responsive.  You end up having to scroll to see the whole page, or maybe you can’t even make the page operate.  This can be very frustrating for the user.  I can see how important it is for a website to be responsive in order to deliver a good experience to all users.  I would recommend this book to other web developers.   Check out the screen shots below of my page at various widths, or give it a try yourself using my site.

http://inetstudent1.francistuttle.edu/jh0916369/discography/index.html

Desktop

iPad

iPhone

Previous Older Entries