Friday, October 12, 2012
Communication Is Key: Be Honest With Your Website Designer
Thursday, September 27, 2012
RWD: The Revolution of the Smart World
You know how sometimes you pull up a website on your smart phone and the picture looks distorted? Well, that website isn’t responsive. The goal of RWD is to make websites viewable from different windows of technology. Whether you have a tablet, an iPhone, or a laptop, a responsive website will appear equally clear on all mediums. These days, a lot of web designers recognize the importance of RWD, but it’s still a pretty advanced technology. In 2012, more website design companies will be investing time in responsive sites to increase the viewing population of their clients’ websites. At CODANK web design, we work with our clients to ensure their designs are responsive to a variety of forms of technology.
There are three important things to consider when dealing with RWD: flexible grid, responsive images, and media queries.
Flexible grids make the template of your website moldable on different technologies. You can download flexible grids, or make them yourself from scratch. There are also several types of tools to help you sketch out your templates. First, there are sketch sheets and sketchbooks, which allow you to see what the template will look like before your website goes live. You can keep the designs just like a real sketchbook. Responsive wireframes and multi device layouts also help you see what your template will look like before you proceed with other steps in your responsive web design.
Once you’ve laid out the template in a sketchbook, you can proceed with a template. There are lots of tools out there for making flexible grids.
Next you have to consider responsive images. You don’t wait your images to be distorted when viewers see your website on their smart phone or iPad. There are tools to help convert images on your website as they move from the computer screen to the smart phone. Responsive images are adaptable no matter what the viewing device.
Lastly, media queries help shift your web pages’ elements to make them responsive and adaptable.
Read these articles for suggestions on the specific tools that are out there to help you with responsive web design. As technologies become more advanced, and screens become smaller and more portable, responsive web design is going to become essential in the world of web design. Getting Started with Responsive Web Design: 50 Fantastic Tools for Responsive Web Design:
Thursday, September 20, 2012
Monday, September 10, 2012
Web Design Tips Centered on Usability
Tuesday, September 4, 2012
Combat Writer's Block
Monday, August 20, 2012
Website Design Errors You Should Avoid
Monday, August 13, 2012
Let's Start Pinning
Thursday, February 2, 2012
What to offer on your mobile website
Provide the same engaging content. You might have heard people talking about having a "stripped down" site. I have even mentioned it in past articles. However, we have to think about the meaning of "stripped down." It does not mean that you should include almost no information except for a few lines and your contact information. People don't just visit mobile sites to find a phone number or an address; many people regularly browse the Internet using their smart phones or tablet computers. Therefore, it is important to develop content that provides all the necessary information. You can provide an abridged version, but do not sacrifice important information or points. Cut out any introductory speech or fluff if you need to; get straight to the point and your users will thank you.
Include interesting visuals. Just like with your desktop version, you need to include pictures, graphs, and anything else you have on your regular site. You can edit the size of the files yourself or you can have your graphic or web designer do it for you. You can use some of the same pictures as your desktop version, just scaled down and saved in a format that optimizes the size for mobile sites to decrease the loading time. Provide bold, attention-grabbing pictures; the small text on mobile screens is sometimes difficult to read, so graphics are more important than ever to draw the eye to the areas you need your users to look at. If you want to create graphics (such as buttons and banners) or include photographs you don't have on your desktop site, be sure that it doesn't add information the desktop site doesn't have; the only difference should be that they are bolder and designed specifically for mobile use.
The design should be similar to the desktop version. Your design is part of your brand, your corporate identity, and you don't want to jump too far from that. Furthermore, users shouldn't be confused or question what site they've visited; it's important to maintain consistency with colors, logos, and styles. With more people using mobile, you also want to give them a good user experience and make the site seem inviting. You don't need to only display a white background, the logo, and contact information anymore. Mobile design has come a long way, giving you more freedom than ever before. There are many beautiful mobile designs out there – you just have to spend some extra time discussing it with your developer.
Mobile design is becoming increasingly important. Many believe mobile Internet will be the next big thing, overtaking desktop usage over the next couple of years. Don't be left behind the times; contact a web development company, such as Codank Web Design, and get started on your mobile site today.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Tuesday, October 11, 2011
How to stylize text in Photoshop CS4
First, open Photoshop and click File then New. You can make your document any size you'd like, but I've chosen to make mine 1000 px wide by 500 px tall. Once you've created your document, click on the text tool in the Tools panel (it looks like a capital T). Click on the font dropdown at the top of the workspace and choose a font, then choose a font size and color. I've chosen to use Copa Sharp BTN in 72 pt black. You can drag a text box across the document at any time during this step.
Type your text in the text box. You can change your text options at any time during the process by selecting the text and changing the dropdown boxes at the top. Here, I've chosen to center align my text by clicking the middle button near the color swatch.
Click the Create Warped Text button (located on the right of the color swatch) and choose a style from the dropdown. You can play with the different styles until you find one you like; I've chosen to use the Arc style.
You might need to use the move tool at the top of the Tools panel to move or nudge the text down so it's visible on the document. Now we need to add some layer styles. Click on the fx at the bottom of the Layers panel on the right side of the workspace. Choose Blending Options from the list and explore your options once the dialogue box pops up.
The first thing I'm going to add is a drop shadow. I've changed the distance to 6 px because it was looking a little crowded before. You can leave it as it is if you're satisfied, but I wanted to do something a little different and make my text really pop. To do this, explore your contour options and try different ones; I chose to use Sawtooth 1 to give my text more definition and dimension.
Next, I decided to soften the text so I added an inner glow. I changed the color to white and the opacity to 50% to make it blend in more. Now it has a nice, smooth 'chrome' look.
At this point, if so desired, you can center the arc a little more by clicking Edit then Transform then Rotate and dragging the bounding box until you're satisfied.
Next, we're going to create a some vertical text. To do this, click on the black arrow at the corner of the text tool button and select the Vertical Type Tool. Drag a text box down and choose your font type, font size, and font color. I've chosen to use Cooper Std in 60 pt black. Type your text in the box.
Just like with our other text, we're going to add some layer styles. Navigate to the bottom of the Layers panel and click the fx, then choose Blending Options. For this text, I've chosen to use a drop shadow and left the default settings. I also added an inner glow, again leaving the default settings. Where I did some customizing was when I got to using a gradient overlay, which you can use to add a gradient to your text. I chose to use a black and white gradient (though you can change it by clicking the arrow next to the gradient), and checked the reverse checkbox. I also chose a different gradient style from the dropdown (instead of linear, I went with reflected).
Next, I clicked on bevel and emboss. I chose to use a pillow emboss from the style dropdown to give it more definition and make it easier to read. Then, I clicked on the texture subcategory and used the arrow next to the texture swatch to browse the patterns. I chose to use the denim texture, though if you don't see any you like in the preset swatches, you can append more by clicking the black arrow next to the texture swatches displayed.
There's one other way of customizing text that I'd like to look at, so create a third text box. This time, change the text color (I've made mine blue), though I've left the settings from the previous text box I created.
Along the top bar of the workspace, find where it says Filter and click on it. Then click on Filter Gallery to bring up the dialogue box where you can view changes and test filters before you apply them.
You can browse through the filter gallery and try out different filters; many of them won't show up that well because text is pretty flat. However, we can add some noise to the text by going under the texture category and choosing Grain. You can leave the default settings if you'd like, but I changed the Intensity to 66 and the Contrast to 61. I also changed the type to Soft. Once you're satisfied, click OK to apply the changes.
Finally, I decided to give the text some more definition and make it look sort of plastic, so I decided to add a layer style. Just like before, click on fx and then Blending Options. This time, click on bevel and emboss and leave the default settings.
We've only just scratched the surface of the many things you can do to customize your text in Photoshop. However, now that you've completed the tutorial, you should have a better understanding about how to navigate Photoshop and edit text to stylize it. As mentioned before, sometimes the key is to play around with your options, and once you get more familiar with it, you'll be able to choose options in a snap to make it look like the vision in your head.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Monday, October 10, 2011
Web page elements that users hate
Background music. Playing music upon entering a site and looping it is one of the most irritating practices in times past. Thankfully, these days the trend has mostly died out. However, there are still sites that do this, and it can annoy your users. It gets old fast, especially if the music starts over every time you click on a new page. Any sound effect that goes off when clicking a link or arriving on a new page should be avoided. Not only is it irritating, but it can startle the user and make them want to leave the site before they can reach their volume control. Needless to say, the same goes for autoplay videos. For music and videos, give the user control over when it's played.
Flash elements or excessive animation and GIFs. Flash is not exactly bad in small doses; however, it should be used sparingly for many reasons. Not only does Flash in excess irritate users – especially in the form of a welcome splash screen or the entire website being made in Flash – but it also can harm you as far as search engine optimization and loading times are concerned. Users with a slower connection will find it more difficult to load a page with a lot of Flash elements and won't want to stick around. Using excessive animation and GIFs can also slow down your website performance – and it's poor design. Animation should be kept to a minimum; leave the “blingy” backgrounds for old MySpace profiles.
Font size that is too big or too small. Making sure your users can read your text without straining is very important. You should avoid overly large font sizes even in headings because it can overwhelm the user. Conversely, you should avoid making the font too small so the users won't have to squint or strain to read it – or, worse, give up and leave your site. Test different font sizes until you're comfortable; generally, a font size between 11 and 13 points is ideal.
Even if you aren't designing your own site, these tips will help you when coming up with your concept and a checklist of what you want. You can consult a web design company, like Codank Web Design, to further advise you in your site concept and design.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Wednesday, September 14, 2011
User Testing
Test site usability. User testing is good for more than just figuring out if people like the colors or the design. Although this is a part of the process and you can take suggestions, it's important not to take every single suggestion or give too much merit to opinion because everyone will have something different to say about the same element. What is important is paying attention to details that multiple users have a complaint about - especially if it has to do with layout, navigation, and usability. Watch them as they use the site; this is even more important than getting verbal feedback. By giving them a task to complete and watching them use the site, you can figure out where your weak spots are. If you notice more than one user struggling with the task, then you'll know you have to make some changes.
Choose a variety of users. It's best to have around five users try out your site. No matter how many users you have, however, you won't get rounded feedback unless you pick users from different backgrounds with various levels of computer experience. For example, a web design professional is bound to understand the site whereas a person with little experience surfing the web will be able to more properly convey the effectiveness of your site. Although it might seem strange to think that another web designer wouldn't be able to give you all the feedback you need, you have to keep in mind that designers know how to use the Internet and have had exposure to many different sites and designs. People who haven't used the web as much should be able to navigate your site and finish the task as easily as possible; it should be obvious to the average user as well.
Develop your site in iterations. There is nothing worse than working hard on a design only to find out that you need to reinvent the whole thing. Designers can get caught up in the process and shut out everything else, only zoning in on what looks good. However, what necessarily looks good artistically speaking does not always translate for practical use. Abstract designs are especially at risk. Users tend to like things laid out in a neat and predictable fashion; you don't want to do something they aren't expecting, like put the navigation bar to the right side of the screen and below a widget. The best way to avoid these pitfalls is to have users test your site as you develop it. That way, you will be able to make changes more easily and you aren't as attached to the final product. Don't be afraid of criticism or change - they are pertinent to the process.
User testing can sometimes be a long, difficult process. But the end result is worth the time and effort spent. You can contact a design company, like Codank Web Design, to find out more about user testing and what you can do for your website.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Friday, September 9, 2011
Simple vs. Busy Design
Busy design can be overkill. Too many elements can disrupt the balance on the page. The worst thing you can do is try to fill every bit of white space on the page. White space acts as a frame around the elements, emphasizing them. It helps lead the eye towards what you want your users to see, and properly utilizing it takes just as much skill as creating the elements and content. What's more, filling every possible amount of space can lead to disarray and confusion; the user won't know where to start and the page content won't have a distinct flow. The best way to prevent this from happening is only to include elements that are absolutely necessary. Make sure your text is free of all "happy talk" and gets right to the point. Above all, remember that white space is just as much a part of the design as the other aesthetic elements.
Busy design is more difficult to navigate. This goes hand in hand with the above point. If you have too many elements cluttering your design, users won't know what you want them to do next. They might have trouble finding your navigation if it's buried in tons of flashy pictures and ads - especially if you place it in an area that they aren't expecting it to be. Speaking from experience, if a site is cluttered and navigation isn't intuitively obvious, then users won't find the site professional or reputable and will click the back button.
Simple design is more universally usable. I cannot stress universal usability enough. Too many sites forgo this rule in order to be "ingenious" and "innovative." In all actuality, it is far more complex to create a simple design that works the way it's supposed to. Creating a simple design involves a lot of thought, planning, and laying out. But it's worth it in the end when all your users are able to find what they need to find with little hassle. So skip the Flash intros and take the time to clean up your design and code to make it more accessible to everyone. Not only will you satisfy your users while maintaining a pleasing aesthetic appeal, but you'll also gain more search engine visibility as well.
When conceptualizing the design for your site, be sure to keep these pointers in mind. You may be tempted to squeeze in as much information as possible or splatter your pages with Flash elements, but remember that not everyone is able to view these and many people who can don't want to. Keep your users in mind when working with a design company, like Codank Web Design, and your design will be wonderfully successful.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Friday, September 2, 2011
Typography Tips Every Designer Should Know
Creating a website is not just about the general layout, structure, and design. Although these things are important, it should not become so important that your content suffers. After all, your visitors are on your page to look at the content and read the information you have to offer. Therefore, formatting your content is one of the most important steps to take, and you should pay special attention to the way you display your text.
Ensuring your page has defined sections and hierarchies is the first step. Just like a newspaper has headlines and subtitles, your web page should also have headings and sub-headings. Larger font draws the eye in and helps to organize the page in neat sections; it is an expected courtesy to format your pages in a way that makes them easy to scan and pick out desired information. As much as we want our visitors to read every word we so painstakingly crafted, that isn't the way people work. It has been proven that Internet users scan pages to glean the information they're looking for, so make it easy for them and they may go back over your site and spend a little longer. Remember, though, it's not just the amount of hits you receive, but the amount of relevant hits you receive.
Color contrast is the next thing you should keep in mind. Although you may be tempted to go crazy and pick out as many bright colors as you can to attract attention, too many colors can be an eyesore. Not only is it in bad taste, but you want your visitors to be able to read your text without having to strain their eyes. As a general rule of thumb, you want to mix dark and light colors for your background and text. Usually, it's best to pick a light color (like white or a tint of a color) for the background and have darker text; this yields the best results. However, if you use the right tones, you can use complementary colors too (such as dark blue and light orange). Just be sure to conduct user testing before launching the site and listen to any feedback or concerns you receive.
Be consistent with your font choices by using CSS and external style sheets to apply fonts throughout all your pages. When choosing fonts, make sure you use between two and four consistently. Generally, it's best to have a different font for each different type of text; serif fonts and decorative fonts are best used for headings and sans-serif fonts for body. Sans-serif fonts such as Verdana and Tahoma were specifically made for viewing on the web, so they are your best choices for body text.
One last word of caution: text should not be centered. Aligning your text to the left margin yields the best appearance - and it's easier to read too. Centering text can cause the sides to look ragged and break up the flow of your webpage. Generally, it's best to left-align all elements, including headings.
Now that you know how important styling your font is, you can pay closer attention to those details. When working with a web designer, such as Codank Web Design, you can better communicate your vision for your site and what kind of impression you want to leave on your visitors. Even if you are not a designer, if you are looking to create a web site, you should have an idea of what you're looking for.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Wednesday, August 31, 2011
Choosing Colors for Your Web Site
Having well-composed and structured content is only the beginning when it comes to creating a website. All the elements of the site - the structure, the content, the functionality, and the design - come together to create one cohesive look and feel. Your visitors will draw conclusions about you and your site during the first few seconds they visit, so it is important to make it aesthetically appealing and choose the right colors to affect the mood. Color is one of the best ways to send subliminal messages about who you are and what you want your visitor to think of your site; if utilized properly, your site's purpose and theme should be properly conveyed through color. So be sure to know color theory.
Warm colors are chosen for the energy, passion, and positivity they convey. Colors like these are used when you want to get a visitor's attention. However, these colors can be overpowering if used in excess. You should pick warm colors as accent colors and offset them with lighter tints, neutrals, or complementary cool colors to take the overwhelming edge off.
- Red is the hottest of the three; it is associated with fire, violence, and warfare. However, it is also associated with love, passion, power, and excitement.
- Orange conveys energy, happiness, and vitality, and is often associated with autumn and change. Whereas red can be overbearing, orange is friendly, warm and inviting.
- Yellow is the brightest of the three colors and conveys happiness, hope, energy, and deceit; it is often associated with sunshine and can give a design a pleasing pop of color. Be careful, though; too much yellow can subconsciously irritate the user.
Cool colors are chosen for the calm, relaxed, and reserved feeling they invoke. These colors are good for sites that want to instill goodwill in their customer, such as insurance, health care, and financial oriented sites. In general, cool colors can be used as a main or an accent color; they can offer interest and color to a page without being overwhelming.
- Green is a natural color; it conveys renewal, abundance, and stability. It is energetic yet can be calming, depending on the vibrancy of the hue.
- Blue can convey sadness, but it can also invoke feelings of calm and responsibility. Bright blues can offer a pop of accent color while muted blues can offer a seamless transition.
- Purple is often associated with creativity, royalty, and opulence. Lighter purples can be reminiscent of spring and romance, while dark purples can command pertinence and luxury.
Neutrals can be used for the main color of the site. They provide a pleasing backdrop to the content, drawing attention to the content instead of the design itself. When combined with accent colors, neutrals can create a pleasing design and showcase the finer details, drawing attention to the mood colors and providing wonderful contrast. Although these colors do have connotations associated with them, the colors that surround them determine the mood more than they do.
- Black is a very powerful color and can indicate sophistication and modern detail; however, you should be careful about what colors you want to choose with it, since it is also associated with evil, death, and mystery.
- White is a very pure, clean, and virtuous neutral; it is commonly used in minimalistic designs and is great for showcasing content and font.
- Browns and tans can provide an earthy, natural feel. Warmer tones of brown can convey some of the characteristics of orange; it is friendly and genuine.
Choosing a color scheme can be difficult even with these things in mind. You can hire a web designer, like Codank Web Design, to talk about what kind of message you want to send your audience and what kind of feelings you want to convey.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Monday, August 29, 2011
The Importance of Learning Web Standards
Most anyone can learn to create a basic web page using HTML. However, a lot of people who learn how to create webpages only know the basics or the old ways of doing things; they don't know about the latest web standards. Although writing code using old techniques does still work, there are many good reasons why web standards should be followed, and that goes beyond being prepared for old techniques to stop working in newer browsers. In addition to being future proof, you are doing yourself a lot of favors by learning and keeping up with the latest developments in web standards. For example:
It allows you to write more efficient code. Not only are you able to reuse code you've already written, but you are also doing your visitors a favor. By separating structure from style by placing all stylistic CSS elements in an external style sheet, you are able to make your pages load more quickly. Putting the same style elements on every single HTML file means that the browser has to read it every time it loads a new page. On the other hand, using an external style sheet allows browsers to cache the file and save users' bandwidth. The less time it takes to load a page, the more likely your visitors will want to stick around and browse.
Changes and updates are easy when you keep your pages written in plain XHTML and use an external style sheet. Instead of taking hours trying to find all the style elements in every single page - even with copying and pasting - you can make a change in one place and have it rendered throughout the entire site. Structural changes are easier to make too without all those style elements cluttering the document.
Universal usability is ensured. This means that alternate content is provided for people without sight or hearing, as well as people with different input devices. For example, the blind can access information on a web site using a screen reader, but cannot see any images accompanying the text. In this case, alternate text is provided that describes the image. Elements on the page should be properly marked up too. For instance, by placing more than two items, such as navigation links, into a list, then it will make it easier for people with disabilities to navigate.
Crossplatform and device compatibility should also be kept in mind. When following web standards, you make sure that all your bases are covered; your web site can be accessed from any browser and any device. This is where using an external style sheet also comes into play. When accessing sites from mobile browsers, the critical information (the structure and content) is rendered while the stylistic information can be adjusted to fit the screen size and browser. Being compatible with many platforms and devices will also get you higher rankings and visibility on search engines like Google; this is called search engine optimization (SEO).
With all these benefits, it's hard to see why anyone wouldn't want to learn and follow the latest web standards. It may take some time to get in the habit of using them, but it'll be well worth it in the future.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Thursday, August 18, 2011
How Cheap Design Is Expensive
Choosing a web designer for your company's website can be a daunting task. With so many options out there, you might not know where to start. However, chances are that you're in the market for the cheapest solution available. Although it may seem economical and effective at first glance, many companies find that they get what they paid for - and end up having to spend more money in order to fix their site so they can have a professional online presence.
From our experience, we have found that clients who picked a designer who wasn't professional ended up spending twice as much money in order to clean up the mess or finish the job. Many cheaper web designers do not have as much knowledge, skill, or experience; therefore, designs can be cluttered or messy, and they don't always serve the purpose desired. Even if it seems outwardly appealing at first glance, when it comes time to update your site or make changes, you might be in for a nasty surprise. Designers and developers who don't adhere to web standards or good structure can write code that is difficult to change, even when it comes to simply updating content. Cheap web designs are likely not to follow web standards or rules for good search engine optimization either. Your site could end up being inaccessible to customers due to issues with universal usability or because it was buried under many pages of results in a search engine. Problems like these can cost your company a lot of money to set right. There is no way to compensate for the lost time or the lost business.
As the mistakes become more and more apparent, businesses have to look for other designers to fix it. If they make the same mistake of hiring someone for a price that seems like a steal because they aren't as experienced, then they run the risk of continuing in the cycle until they finally do find someone knowledgeable. By this time, the company has spent more money than they bargained for, and more than they would have if they'd contacted a respectable designer or company in the first place.
With these things in mind, if you are in the market for a website, then do your research and get to know the skill level of your designer before agreeing to work with him or her. Companies, like Codank Web Design, are the best place to start your search. So don't go the cheap route and end up with a website that will cost you time and money; go with someone you know is reputable. It will save you much grief later.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
