It happens often. A graphic designer decides to expand their skillset and delves into web design. This is typically a good move. Anything that can make you more valuable as a designer is realistically a bonus. The problem however comes when the designer doesn’t have the necessary background or experience when dealing with web design and web development. Print is great because you can pretty much design as you want. You have a blank canvas and can place type, crop images, do sweet cut-outs and “photoshop magickery” as you please with little or no consequence to the overall project.
This is not the case for web.
When you design for a website one of the first things to tackle is the background. This is probably one of the easiest pieces to overlook because as a professional print designer your canvas is your border. You can bleed over it and it won’t matter because the visual ends at the edge of the physical page. When you design for web however, those elements that are left cropped or hanging off the page have to go somewhere. Since you typically do not know how large a viewers screen size is it is difficult to accommodate everyone so they all see the same thing. Some folks still use the 800×600 browser size while others go full screen on 30 inch monitors. If you have a web graphic that ends or is abruptly cut off at the 1600 pixel mark then you may get the “unfinished site” look when you expand past 1600 pixels. What you are left with is a 1600 pixel wide website with large colored bars and cut off images on either side that just don’t promote that professional look you were originally going for.
Another issue that plagues would-be-web-designers is the use of shadows and gradients. Now it is true that CSS3 and HTML5 have resources built in to show these effects but that doesn’t mean that you should use them for EVERY LITTLE GRAPHIC. Print designers must understand that the photoshop drop shadow isn’t necessarily going to look as good on web so it sometimes benefits them to avoid it if possible. If you want to add a little shadow to the page outline to show some depth, fine, but if you intend on putting a drop shadow on a drop-down navigation along with a gradient in the buttons, gradients in the background and shadows on all text, you are just making the job harder for the end developer.
Resolution should obviously play a part in designing for web but sometimes gets pushed aside. Regardless of how big your screen is and regardless of how some devices may claim to be ultra high resolution, your screen is only (always) 72 dpi. Having your graphics at 72 dpi helps the load time of the page. The larger the images, the longer it takes to load the page. If you’re a print designer you know that nothing looks good that small and that anything with finer detail will virtually disappear. This includes backgrounds and graphic textures. Ideally you want to start with a canvas that is higher than 72 dpi and then “save for web” or manually “res-down” the images.
Finally, it is important to realize that different browsers will undoubtedly display your website differently from one another. A site viewed in Firefox is going to appear slightly different from one viewed on Internet Explorer. Sometimes the differences go beyond the visual interface and items in the CSS need to be changed on specific style sheets for those browsers. That being said, someone who is designing a layout for a website must take this into consideration. As we stated above, CSS3 and HTML5 have certain “effects” built in however they are not all fully supported yet by the majority of browsers. This may make those effects not show up and cause the consistency of your site to be lacking across multiple browsers.
At the end of the day we as designers all are able to “put pen to paper” but often times are called for us to expand our tool box and learn a few things to make our jobs, and the jobs of others, easier. If you decide to make the leap from print design to web design be sure to remember that your canvas is infinitely larger than the screen your working on, always res down (not up), and not all browsers are created equally!
Websites come in all shapes, sizes, colors and levels of user-friendliness. We’ve blogged before about the importance of your website being easy to navigate and, thus, being user friendly. One aspect of user-friendliness that is often overlooked is the ol’ bells and whistles and how they can be a deterrent to visitors.
Specifically, let’s look at those cool looking flash-player video presentations, slide shows and such that are built into the home page of your website so as to make a great first impression on your visitors. While some of these effects can look incredible, they can also cause your website to load slowly or, depending on the computer and the connection, even freeze the computer it’s loading on.
All kinds of people with all kinds of computers and all kinds of connections will be looking at your website, and a good web development and web design team will work with you on what your best options are. Most often, the “keep it simple” rule applies. Be aware that those fun interactive and flashy bits take up some space on your site in the way of scripts and programming. If they aren’t included properly or written poorly, your site will suffer! Not to mention the fact that now most search engines, like Google, take loading time as a key factor for page ranking and SEO.
Heck, look at our website. We have a definite design image and a simple “slideshow” of our services. Nothing too over-the-top that would cause our site to load too slowly, as connections and computers vary greatly from one user environment to another.
If your website loads too slowly, it’s extremely easy for the visitor to click and go somewhere else…Without ever really seeing your site.
Every day businesses are making this very future more and more possible for themselves, and the pictures are mostly the same: They start a Facebook page, half-ass it, then complain when they don’t get results as good as their competition. They open an Urban Spoon page for their restaurant and don’t even include their web address or other vital information. The list goes on and on with Google Places, Yelp and countless other online resources. And it’s truly amazing how many people and businesses still won’t get on board with social media. They’re not only missing out on business but eroding their own business base and hurting their business.
If you’re reading this post and need some convincing, consider the Yellow Pages. Have you noticed how their pricing has continuously gone up…while participation has gone down? They didn’t get on the INTERNET bandwagon in time, and you know the result has been? The Yellow Pages have lost 80% market share in past 3 years.
Yep. Even though they’re trying to incorporate web listings and links into the mix for their sales, they’re really too late. By the time they got with the program and started taking the Internet seriously, there were already too many resources online (white pages, business directories, social media pages, etc) that they were immediately in competition with. They had name recognition going for them, but that wound up working against them because they were the last to get a presence online. And of course because the phone book is hardly even used anymore! When was the last time you were looking forward to paging through that big yellow brick on your doorstep? The best web development and web design is more effective if you have a good foundation online. All of these elements work hand-in-hand, and it’s important to take your online presence seriously…starting with making sure that your profile is complete on any forum where you’re listed.
The Internet really is the future of marketing (just ask the Yellow Pages), so make sure your input and efforts are complete and you will find your own success online.
We’ve talked and blogged before about how it’s not always necessary to have the “latest and greatest” with technology moving so fast as it is. With every new device or piece of software comes a new learning curve, which of course requires yet more time out of your busy schedule.
For your website, keep in MIND that added features and plug-ins are certainly cool and in some cases called for. Problem is, it’s easy to get into “overkill” mode and clutter up your first impression on your website. A good web development and web design team will keep things pretty and easy to read and navigate.
Before you jump on the bandwagon of a new bell or whistle that appears cool and/or indispensable for your website, make sure you’re getting utilizing all the capability and tools of your current website configuration.
Consider these pictures…
They were all done by Don Marco, an Army Air Corps retiree…with Crayola crayons.
Yep.
Remember…time and creativity are your best tools, no matter what you’re working on:)
While working on developing and designing websites we often come across the need for solid, well-crafted social media icons. Almost every site nowadays has some form of social media icons that connect to sites like Facebook, Twitter, LinkedIn and YouTube. If you want to stay engaged with your target market and you would like to be “social” then setting up these social pages and adding links (like these icons) to your homepage is a definite plus. This social media icon set includes transparent PNG images for the following social media sites: Facebook, Twitter, LinkedIn, YouTube, Slash Dot, Technorati, Stumble Upon, MySpace, WordPress, Google Buzz, Yahoo, Delicious, Reddit, Flickr, Digg and even an RSS icon. These social media icons come in sizes: 64×64, 32×32, and 16×16. Feel free to contact MIND for other icons, vector files and various web related items!
Download the MIND Social Media Icon Set here!
