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.

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

Anger Management

Image

How are we doing today at anger management?  It seems today we do a poor job of controlling our emotions.  I’m sure there are all sorts of reasons why.  But today I want to talk about how to manage that anger when it crops up.  It might happen to you in the car, at the grocery store,  or while you’re at work, to name a few places.

The first thing you need to do is be aware of what is going on around you before you get a chance to get angry.  Think ahead of time how you will handle possible situations.  Are you going to yell at the car that cuts you off, or are you going to sing a little louder to the song on the radio?  Are you going to quit your job when someone else gets a promotion, or are you going to talk to your boss about how you can advance?

In the workplace it is important to conduct yourself professionally.  Losing your cool is not professional.  If there is something going on at work that is ruffling your feathers, find someone to talk to.  Maybe you are getting upset about something that really isn’t an issue at all.  Talk to your boss about your concerns instead of stewing and worrying yourself sick.

Many times we get upset about things that really won’t even matter to us tomorrow.  Maybe we are in a bad mood, we didn’t sleep the night before or we haven’t had our morning coffee (or diet Dr. Pepper).  Trying the old “count to ten” method is never a bad idea.   Another method is to leave the area.  Go get some fresh air and clear your head.  Take some deep breaths and relax.

It is very easy to say something you will regret during a moment of anger.  And words are hard for people to forget.  No one wants to be around an angry person.  They are hard to work with and difficult to trust.  I believe if we treat people the way we want to be treated, most of our anger issues can be kept in check.

Progressive Enhancement vs. Graceful Degradation

Today I read two different articles that discuss the differences between two types of web development – progressive enhancement and graceful degradation.  Progressive enhancement can be defined as delivering the best possible experience to the widest possible audience, regardless of the device type being used.  With this method, you write code that works in all base-level browsers then add layers for browsers that support more advanced capabilities. With graceful degradation, you build your site completely with all the bells and whistles.  Then you add workarounds or fallbacks for the browsers that cannot offer support. 

 In the article Graceful Degradation Versus Progressive Enhancement by Chris Heilmann, the author points out that with graceful degradation assumptions are made regarding the user’s environment and their ability to make upgrades.  While he is a supporter of progressive enhancement, he admits there are times when graceful degradation is in order.  This includes old websites for which there is not time to rebuild, websites highly dependent on scripting and new websites where development timelines restrict full progressive enhancement. Advantages of progressive enhancement include a working website, no matter the environment, smooth transitions to new browsers and easier maintenance.   

 The second article is Progressive Enhancement – What it is and how to use it by Sam Dwyer. He defines progressive enhancement as the journey from simplicity to complexity and graceful degradation as the journey from complexity to simplicity.  He points out strengths of progressive enhancement (PE), including a strong base to fall back on, the ability to release projects early then adding more complex code later, ease of maintenance and good usability.

The author then explains how to create code with PE using layers.  The first layer includes clean, semantic HTML which will allow any user to navigate your site.  Next, is the CSS layer which will allows users to view your site with it’s advanced visual enhancements.  Third is a layer of Javascript which can provide another level of usability to your users.

I agree with both these authors.  As time moves forward, the web will continue to offer new challenges to web designers in order to keep their sites viewable by all.  These articles help me see that future usability of the web is largely dependent upon the practices of web developers.  What route will we choose to take?  Progressive Enhancement will provide the guidelines we need in order to ensure a highly usable and accessible web experience for everyone.

Compassion

Dictionary.com defines compassion as “a feeling of deep sympathy and sorrow for another stricken by misfortune, accompanied by a strong desire to alleviate the suffering”.

The first picture that pops into my head when I hear the word compassion is Jesus.  He had great compassion on the lost in the world.  Another picture is Mother Teresa.  She spent her entire life giving of herself to those less fortunate.  Today there are entire ministries across the globe based on compassion.  One such ministry is called Compassion International.  Through this agency, you can sponsor a specific child by making a donation. You exhibit compassion on this child when you sponsor him, write letters, share photos and offer encouragement.

Compassion International thumbnail

Compassion International

How can someone like me offer compassion today?  Our world is full of those needing compassion.  It could be a neighbor who has lost a family member, a friend who has lost a job, or a small baby in India that needs health care.

How might this apply to the web profession?  Perhaps a co-worker is having a hard time with a project, and you could offer your help.  Maybe a client is having tough time due to family issues.  You could help by lending an ear to let them know you care.  Opportunities are all around you.  You just have to look.

But first I believe your heart must be in the right place.  Without this, compassion has no meaning.  I think this can be difficult in today’s world.  We fill our schedules with every conceivable thing and leave no room for this type of outpouring.  We also may have fears about putting ourselves “out there”.  But when our heart is right, and we reach out to someone, it can prove to be a very moving experience. Lives can be changed with even the smallest acts of compassion.

Previous Older Entries