Posts Tagged ‘website design’

Colors bring out an emotional response in everyone – and while it may not be the same emotion in all of us, there are some commonly accepted ties to certain colors. Pulling a small segment from a 2004 article written by Naz Kaya, Ph.D. and Helen H. Eppds, Ph.D., professors from the Department of Textiles, Merchandising and Interiors at The University of Georgia:

The color red has been associated with excitement, orange has been perceived as distressing and upsetting, purple as dignified and stately, yellow as cheerful, and blue has been associated with comfort and security. Moreover, some colors may be associated with several different emotions and some emotions are associated with more than one color. Red, symbolically known as a dominant and dynamic color, has an exciting and stimulating hue effect. It has both positive and negative impressions such as active, strong, passionate, warm, but on the other hand aggressive, bloody, raging and intense. Green has been found to have a retiring and relaxing effect. It too has both positive and negative impressions such as refreshment, quietness, naturalness, and conversely tiredness and guilt. – Relationship between color and emotion: a study of college students

The article goes further in depth to analyze the difference in reaction to principle hues (i.e., red, yellow, green, blue, purple), intermediate hues (i.e., yellow-red, green-yellow, blue-green, purple-blue, and red-purple), and achromatic colors (white, gray, and black). While it is not necessary to go into this level of analysis when choosing colors for a website design, the understanding of colors is imperative for a successful response to your design.

Before taking on any new web design project, I always follow these three steps to choose the colors for a website:

1. What am I trying to sell? Selling fluffy pillows needs different colors than selling chainsaws – and not just because they appeal to different genders. The product or the service will be a huge determinant in the colors that you choose because of the emotion you need to product to incite. There are many products that people will not buy without a connection – and others, they want to feel as disconnected as possible when purchasing. Knowing the difference will help in choosing the colors.
2. What type of person will visit this site? As different as men and women are in their color choice – so are different types of women. A teenage female, a college age female and a mother of 4 will all react to colors differently. So it is not enough to just define the gender or basic age group – you must get down to the details. For some sites, they may appeal to many generations and all genders, which can make design difficult, but needs to be understood to have any chance of getting it right.
3. What do I want the visitors to feel when they see the site? Some sites, you want them to immediately react. Some, you want them to browse and feel welcome. Still others, you need to get them to share the information. We are accustomed to reacting to colors in traditional manners. Red, yellow and green have (and will always be) associated with stoplights. Therefore, most people will see stop, caution and go, when they see the primary versions. But what if you make them tones of the colors? It changes the reaction!

Once I have determined the product, the person and the action for the site, then I can move onto picking the colors. When I need to play with colors, I most often work in photoshop. I create 5 boxes (the average color palette for a site is only 5 colors, not including black or white), and make each one a different color. I play and test them until I get a set of 5 that I like the shade and the combination. But, there are also a lot of great free tools you can use to do the same thing! I recommend checking out:

1. 0 to 255 This is a great tool for finding shades of a color. For example, say you love this color pink but you want to turn it into a gradient – and not one that goes into white. Using this tool, you just enter the hex code (the six digit number that starts with # that defines any color) and it gives you the entire shade scale – like this! Then, you can choose any other color and then turn it into your gradient.
2. Kuler from Adobe Do you have trouble knowing which colors go together? Then kuler is your hero. Simply click “create” and place the hex code of a color you want to start with in the center box. Then, using the different rules, you can create a color palette that matches perfectly! Personally, I love using the complimentary and compound rules for websites. You can also look at other user created palettes for inspiration if you are feeling really stuck.
3. Colour Lovers I get lost in this site very easily – there is so much to do! From creating a color palette or seamless background , to browsing other users designs, I can spend hours on here. I recommend checking it out when you have a lot of free time, just so you can get used to it and find out everything that really exists. My favorite piece of the site? Trends! It shows color palettes for some of the most popular clothing fashions, web and print designs.

What do you think about colors? How did you pick your site colors? Let’s talk!

Taking the leap from a basic free template blog to a completely custom one that does exactly what you want and looks the way you like is scary. It is also not cheap. So when you make the decision to go custom, you want to make sure you choose someone who knows what they are doing.

So how do you know that a designer is any good?

Of course, you can look at their portfolio, ask for referrals, check their pricing, and talk with them in person. But, the true measure of a designer is how well they can create a site that will be exactly what you want and what your audience needs. They will have a solid understanding of who you are, what your business is and how to attract an audience. To do this, they need to ask questions. And these are the 10 that I believe should be asked before any design is started.

1. What is your goal with the site?
2. Is the site for information, contact building or sharing product (or a combination)?
3. What do you want visitors to do on the site (read, click, sign up)?
4. Who are your clients: individuals, businesses, tech departments etc?
5. What are your verticals (which markets are you trying to reach)?
6. What type of person will visit your site: business owners, SAHM’s, kids, web geeks, etc?
7. What is your key marketing statement (your motto) and your elevator pitch?
8. Do you want to have a blog? (this should be seriously considered)
9. What websites have you seen that you like?
10. What websites have you seen that you don’t like?

The answers to these questions are what will make the difference between an average blog design and a completely custom, perfect for your business, amazing blog design. And, any good designer is going to ask them (or at least something close to them) because they aren’t psychic. They can’t know what you need just from a short conversation. They need details and insight into your business that only you can give them. And with solid answers to these questions, they can get a really clear understanding, which will equal a much better design!

What are your thoughts?

Are you looking to hire a web designer for your website or blog? You probably want this to be an easy process, and want it to go as smoothly as possible, right? Well then I suggest avoiding these 5 steps to pissing off your designer:

1. Don’t tell them what you want. Every (good) designer has a questionnaire they fill out about their clients. This includes what they want in the site, who their customers are, and all the important details that will make the design a rousing success without too many revisions. Unfortunately, designers are not mind readers, and unless you are willing to answer some questions and provide some details then the design is off to a bad start.
2. Don’t be available. A web design takes conversation. It takes revisions, it takes discussion and it certainly takes your approval. If your designer emails you for your thoughts on an image or a revision, and you take a week to get back to them, how do you expect the design to get completed in a timely manner? Just like you appreciate prompt replies, so does your designer. Being accessible during the process guarantees it will go much more effectively.
3. Change your mind 20 times. Having an idea in the middle of the project, and wanting to add something small is perfectly acceptable, and expected. Changing your mind every 10 minutes about the big details? Not okay. Before you hire someone, make sure that you are ready to let them design and have a clear understanding of what you want. Still in the “trying to get some clue of what I want” phase, make sure to let the designer know! Many are very willing to help with this, but need to know where you stand.
4. Bring in everyone you know to review the site. The designer knows you want the site to be perfect, so do they. Despite what you may think, the designer want your site to seriously rock. Wanna know why? Because a happy client is a client who will refer. So the designer is going to make a site that will work, looks good and covers all the bases. So when you bring in everyone from your business partner to your mother to review the site, it is a little frustrating and tells the designer one thing: You don’t actually trust the designer you hired to do a good job.
5. Ask for flash. Really, it’s that simple. If you want flash, call a flash designer. If you want a website that is gorgeous, easy to navigate and SEO friendly, then call a web designer.

So, remember, when it is time to hire a designer, we are your friends. We want you to have a killer site that works awesome and looks great. So trust us. We’re the professionals.

Many people I meet with about designing a site have an idea in mind of colors they want, or a layout that they like. The problem is that they have a tough time putting it into words, and I have often heard, “I just wish I could show you a mini mockup”. A lot of times, they will come to our first meeting with a sketch on paper, which is wonderful and I appreciate! But, if you are looking for a little more, or want to test some things out yourself,  try photoshop. Photoshop is what I use when I actually create client mockups, but you can use it too to help you get your ideas down. Adobe offers a free 30 day trial of any of its programs, including photoshop. So, if you are considering doing a blog makeover, I recommend downloading the trial and following this tutorial. The tutorial is going to span over multiple days as it takes a lot of time to really build out a mockup for a site. Today, we are going to cover the first 10 steps, which will lead you through creating the base layout and your header.

Step 1: Open a word document. Write down a list of all the pages you want, the sidebars that you need, the links to social media sites, all the details that need to fit on your main page. This is where the layout for your site starts. If you don’t know what you need, you can’t start the design. Don’t worry about what is going to go on these pages, just make sure to thoroughly think through everything you want on the site.

Step 2: Open photoshop. Under file, select new. There are a lot of size you can choose, but for a website or blog mockup, I recommend setting it to 1024×2000. 1024 is going to be the width of your finished product. This width is most commonly chosen because it is the size that most laptops and small screens use. If you make your site bigger than that, people with smaller screens will not see everything. I set the height at 2000 so that I have room to work with. We can crop it smaller later.

Once you have the sizes right, click okay. It will open a blank screen for you to work with.

Step 3: On the left hand side, select the rectangle tool. It is the 18th button down on the left, below the one that looks like an arrow. This is the tool which will allow you to create many different shapes, but for now, we just want the rectangle. When you click on the button, you will notice in the upper bar that you have a variety of options, including shapes and colors. Make sure to select the rectangle. Then, click on the colored box at the far end. It will open up a color spectrum. Pick your favorite color and click okay.
Your bar should look like this at the top of the screen, where the pink is the color that you have chosen to use.

Step 4: Draw rectangles for your header, your navigation area, your content and your sidebar. There are many ways that you can layout your site, but we are going to start with the most common style, which is a header, then a navigation bar, then the content area and a right aligned sidebar, with the footer at the bottom. Remember to leave space between the areas for the background to shine through.  If you do not want the background color to show through between the content area and the sidebar, we can make that adjustment later. For now, just leave space between all areas.
If you notice, in the layers pannel, you will now see 5 different layers. If you want to make changes to a piece in photoshop, you must first select the layer that you want to work on it in the layers panel by clicking on it. Once you have created all of your layers and you like how the spacing looks we can move onto the next step.

Step 5: Creating your header. Your header can include whatever you want, from the name of your site to pictures and designs. We are going to create a very simple header with just one image and the title of the site. To add an image, go to file and select place. This will open a file browser for you to choose your image. Once you select your image, you have to “okay” it. To do so, in the upper navigation bar, click the check mark. It will then actually place the layer there. Depending on which layer you had selected when you placed your image will determine where it places. If the image is hidden behind another layer, simply select it in the layers panel and drag it up the layers, placing it where you want it to be. In this case, you will want it at the very top. Once you drag it, just let go and it will drop into place.

Step 6: Now that the image is above the header, it will be sitting on top of that layer and will block out part of it. Select the image layer in the layers panel and then click on the arrow at the top of the panel on the left. You will see a dotted outline with boxes at the corner of the images. Place your mouse at the bottom corner. Click on the corner and hold down the shift key. Now drag the corner out until the right side of the image covers the entire header. Once it does, let go of your click, then let go of the shift key. You will again have to confirm the changes by clicking the check box in the upper panel.

The image will now be sitting on top of the header, and behind the rest of the layers. But, we want this image to fit within the header itself so we are going to create a clipping mask. The clipping mask will basically make only the part of the image that fits within the box you have planned for the header show. You can move the image inside of the header, and it will show different parts, but it will only be as wide and as tall as the size of the header.

Step 7: Creating the clipping mask: Once you have moved the image on top of the header layer and have made it large enough to cover the width, you need to select the layer in the layer panel. In the layer panel, right click on the image. It will open a menu of options. Select ‘create a clipping mask’.

Once you select it, it will crop the image to fit within the area you had decided for the header. If you do not like what section of the image is showing, you can click on the image in the layer panel and then use your up and down arrow to move it within the header. This will show different parts of the image as you move it around. Feel free to play, or change the image. If you want to change the image, simply select the one you have now and click delete. Then follow the steps above for adding a new image and resizing it to fit in the header. When you have it where you want it, we will move on to creating the title.

Step 8: Adding the title: Right now, the complete mockup is zoomed at only 25% so that you can see the entire design. Since we are going to work with just the header area, we want to zoom it in. To zoom in, select the magnifying glass on the left panel. It is the bottom tool. Then, click on “actual pixels” in the upper navigation. Use the scroll bars on the right and the bottom so that your header is in the view.

Step 9: Adding text to the header. In the left panel, select the “T” icon for text. Then, drag out a text box on top of the header. Once it is the size of the header, let go and you will have a cursor inside of the text box. Type in the title of your blog or what text you want at the top of your page. Once you have typed it out, select the text (or hit ctrl A). In the upper navigation, you can choose the font, the size and the color of the text. This is all personal preference, but remember, you are viewing this at 100% so whatever size it is on here is what size it will look like live. Once you have selected the size, the font and the color, you will need to click the ‘okay’ check mark again (this is done anytime you change a layer, it commits your changes). If you want to move where the text sits on the header, click on the text layer in the layers panel and then click on the arrow tool on the top of the left panel. Then, use your up/down/left/right arrows on the keyboard to move the title where ever you want it to sit.

Step 10: Making the text look cool. One of the ways to make your title stand out is to give it some effects. There are tons of effects, and it would take years to go through every variation. I suggest that you play with them and figure out what you like the best. To do so, while selected on the text layer, click on “fx” at the bottom of the layer panel and click on “blending options…” to open all of the options for your text. Make sure that the preview box is checked and drag the box so that it shows the full text. To work with a style, click on that style, and then test out the settings. Remember, this is all yours! Play and have fun. Try out different textures, gradients, drop shadows, embossing, etc. Once you have it the way you want, click okay. If you want to make changes later on to the effects, all you have to do is double click on the “fx” that will now be next to that layer.

Wrapping up today, make sure to save this document so that you can keep working where you left off. Tomorrow, I will be covering the next 10 steps, which will walk you through 10 more steps to creating a blog layout.

Your website design speaks volumes about your business, no matter the business you are in. Unfortunately, I think this message is getting lost. I have had more conversations than I can count that end with “I don’t need a high end site design, people in my industry don’t care what my site looks like.”

This just isn’t true!

I’ve talked before about what makes a good blog design, since this is the type of design I offer most often. But, most of the ideas in the post hold true for all design types. No matter the industry, your website is the one of the first things that a potential client sees. More people than ever are going online to research companies before working with them – and whether you want to believe it, the minute they hit your site, they start to judge you. Your website needs to be clean, well put together, easy to use, and for lack of a better term – glamorous! When potential clients visit your site, you want them to want to stay and look around. You want them to read more, check out more, and learn more. But if your site is hard to use, doesn’t look appealing and isn’t welcoming, they won’t stay long.

Whether you are involved with furniture, finance or film, your site needs to show that you know what your doing.

Luckily, there are a 3 easy ways to make sure that your site looks and feels more professional:

1. Make sure that your colors work together. Tools like Kuler from adobe (free!), allow you to enter one color and it gives you other colors in that color palette. You can also use an image to create an entire palette from, which protects you from choosing clashing colors.
2. Choose fonts that are easy to read and look professional. The cleaner the font, the easier it is to read and the more professional it looks. While I am a proponent for a ‘fun’ font mixed in, the main writing on your font should be classic. And please, whatever you do, avoid Comic Sans and Papyrus!
3. Leave lots of white space. White space refers to the the blank (called white but is whatever color your background is) area between paragraphs, lines or images. White space is what opens up a page, makes it easy to read, and eliminates the feeling of being overcrowded. Simply put, white space is your friend.

Thoughts?

On February 22nd, the Wall Street Journal wrote an article about websites – more to the point – how expensive websites can and can’t be and what the benefit is for the business. The article discussed two female business owners, what they spent for their websites and how the sites were doing for them. Both were running successful businesses, and both had active websites. That’s about all they had in common.

Business owner 1: According to the article, “Katrina Garnett, 48, is an Australian-born Silicon Valley entrepreneur whose Crossworlds Software sold to IBM in 2001. Garnett has invested $2 million of her money to create My Little Swans, an adventure-travel business catering to wealthy families”. The portion of that she used on her website? An astounding $250,000. Her site, My Little Swans, sells luxury travel. (not really sure what swans and luxury travel have in common, but hey, she really wanted those swans!) Take a look through the site.What did you think?

If you’re anything like me, my first response was “you have GOT to be kidding me?!?!” Okay, so I will give the woman some credit, at first glance, I thought the site was pretty, and well put together. It was easy to use and captured what she does. There are a lot of cool features, and it is easy to connect with her on social channels. Overall, I would have given the site two thumbs up. But then…I remember that she spent $250,000 on it. More than I spent to buy my condo! And my thumbs drop. A lot. The site is good – but she easily spent $230,000 more than she should have. The site is nothing that special, in fact I have seen hundreds of sites that are much better than hers, and I can guarantee cost less than a tenth of what she spent. Seriously, that design team saw her coming a mile away. I hope they have trouble sleeping at night for the highway robbery they made out of her site.

Business owner 2: The WSJ says “Joan Bradford is a former schoolteacher and a theatrical costume–shop owner who bought and renovated an 1840s house 15 years ago in New Windsor, Md., and turned it into a bed-and-breakfast. She named it the Yellow Turtle Inn after she had a dream about such creatures and learned that they’re the only turtles that guard their nests.” And her site? She spent almost zero on her site, Yellow Turtle Inn. She used a program that came with her hosting and set it up in a few weeks. She says she has made tons of tweaks, but that she has never paid someone to work on her site. So take a look at this one. What you you think?

My first response, “Okay, it’s time to cough up a little money, because this needs a face lift”. The site is boring, simple, and obviously home-made, right? It has all the content that is needed, but it just doesn’t make you feel all warm and cozy like an inn should. I don’t really have any desire to call them because with a site that rudimentary, I worry that the service won’t be great and that they won’t deliver a good experience. A little goes a long way, and even a $5,000 investment would really help her to turn her website, and her image around. But, she does get a little more respect from me than Miss Swan because while the site is poor, at least she didn’t get hog-tied and taken for all she was worth!

A website is one of the first things that a customer is going to see – it needs to represent who you are and how they can expect you to deal with them. Clean, simple and concise websites make people feel like the person will be easy to understand. Glamor, elegance and extravagance will make them feel special and important. There are hundreds of other emotions websites can bring out  and what matters is that yours brings out the right ones from your visitors. But, you shouldn’t have to break the bank to get this to happen.

What do you think about the sites?

First, just because I offer site designs that can run into the 4 and 5 digits does not mean that I don’t want to help clients who can’t afford a large makeover – I love design, and if I can make someone’s site better with small fixes, I will.

Second, these tips are not for those who need a fully branded marketing strategy. These are for people who blog for fun, or as a secondary job. If you need a site that is branded, and used for business, you need something custom and completely yours.

With that said, here is the easiest way to make your blog look like a million bucks without spending a ton:

1. Download a theme from WordPress.org. Pick one that is clean, simple and that you like as is.
2. Hire someone to create 5 pieces for you: A header, a rss button, a social media connect button (twitter/facebook/etc), a button people can grab from your site to promote theirs and one other button (depends on your site needs).
3. Have the designer add the custom buttons that have been created for you, change out the header and add some widgets on the sidebar.

Most designers (including myself) will do work like this for under $500, and the difference that it makes will astound you…

What other ways can you think to make some simple changes to your site?

A year ago, I started this blog simply as an outlet for my creative ideas for business. I hoped that I might help my readers to improve their writing, business and life through the tips and advice that I offered. A year ago, I never imagined to be here – owning my own business, on the adage top blog list and closing the gap towards 1000 subscribers.

To celebrate my 1 year anniversary – I am making a few changes to the blog. The first, was to separate out my writing advice, blog management, website/blog design tips, and social media posts, so that they are easier to find.

The second change and on? Well, that’s up to you! I asking for your input:

1. What would you like to see from me over the next year?
2. Which posts have been your favorite and you’d like to see more of?
3. Any thoughts in general for me or my business?

Thanks for being here at the 1 year annive

*For those of you who saw “palate” when it first went out… apparently spell check doesn’t cover “lack of caffeine”. I completely forgot that there is “palate: roof of mouth” and “palette: color”

Thanks to @ksablan and @ShelleyDelayne
for helping find my error!

Life is about color, from what you wear to your website design. Many of us hear ‘color palette’ and assume we are talking graphic design. But what about the color palette of your office and work clothes? Shouldn’t you give them  just as much attention as the space your website lives on?

I find that when working in an environment that is filled with color and a well created color palate, that I am more creative and enjoy working for longer. Dingy, dreary atmospheres are horrible for me to work in. Same thing for my apparel. If I don’t like the outfit that I am in, it affects my mood.If I am in bright, fun colors, I have a bright, fun mood. Soft fabrics mellow me out, and flowy skirts make me more visually driven.

What is my color palette today?

My attire:

My work atmosphere (Corner Bakery):

What’s your color palette today? Does it make you want to be more creative?

1. Twouble with Twitterers: yeah, ok, so I may be this bad sometimes…

2. Redesigning the Stop sign – if a marketing team was in charge of designing a stop sign…definitely true for some of the large agencies.

3. Font Fight – for the Web Geek in all of us (first shown to me by Creative Whirlwind)

4. Hulu and Dennis Leary – bliggity blogs, facey spacey’s, tweety pages…yeah, I couldn’t help but laugh

5. Your printer is a brat – for all of us who have dealt with the evilness of a printer…