Solutions for Web Design » Graphic Design for the Web

Web Design Tips for Graphic Designers New to Website Design

admin — Mon, 29 Jun 2009 03:17:41 +0000

Chris London asked:

For graphic designers who are new to web design this article will provide some very useful tips to optimize your websites and images to maintain a visually dynamic website without slow load times.

Everyone should want a website that is attractive, engaging, and easy to navigate. More often than not, you can spot websites that were created by graphic designers and sites that were created by programmers. Generally speaking a website created by a graphic designer will be visually engaging but is probably not Search Engine Friendly, while a programmer’s site will be set up beautifully with CSS streamlined for Search Engines and quick load times. For obvious reasons the best websites are usually created by a team of professionals working in tandem.

It sure seems to me that most people designing websites have an “either or” attitude, either it looks good but loads slow or you focus on code and appear more generic. I’ve seen plenty of websites that contradict this thinking and I personally believe every website should be visually stunning and streamlined for search engines and download time. Every year less people are using dial up to connect, however there are too many to ignore. I really don’t worry too much about dial up users anymore, because most of the websites I design are targeted at fairly web savvy searchers. However, just because I don’t worry about dial up doesn’t mean that I can neglect to streamline my websites for its users.

This article will provide some quick and useful tips on how graphic designers new to web design can optimize websites and images and still keep them looking hot. If you’re just starting out then you’re probably not going to know a lot about CSS. No worries! Just start designing your layout in Photoshop. A good document size to start with would be 950 pixels wide by 600 pixel high set to RGB at 300 dpi. When you’ve created the layout that you want you are ready to slice up your document and export it as an html document with an image folder.

1. In Photoshop you can use the slice tool and manually create slices organized in rows and columns for Dreamweaver or drag “guides” where you want to slice your page and just click the “slice from guides” button at the top of the Photoshop menu bar. Note: you can combine slices by shift clicking multiple slices then holding down the control key and clicking to select combine slices. (You can define your text and background colors easily in Dreamweaver).

The image below is an example of how I sliced this Photoshop document up.

a. Hold down shift + option + command + s to export the slices. Click “Save” and then select export html and images.

b. Open all of your images in Fireworks and resave them at 80% quality and jpg format. Now you have nice looking images that have a small file size and are easy to load.

2. Another quick tip is to learn to set up your web pages using .php includes.

The basic set up for a php page is a “header”, “body” and “footer”. In a nutshell what we are doing is breaking one complete html page into three separate html files and letting the server put them back together as one complete page. Why would we do this? We do this, because there are many beneficial advantages to creating your pages this way. For example if your navigation is in the header document and you need to make a change to your navigation you only need to do it once, not for every page. Also the server loads your images once and not for every page which makes your site quicker to load and use.

a. In Photoshop you proceed the same way using the slice tool or guides to create slices organized in rows and columns for Dreamweaver. Except this time you are turning the one file in the example shown previously into (3) separate files. Break your main Photoshop document into three sections, a header, the body, and the footer. Label each Photoshop document accordingly. Samples shown below.

Header File:

Body File:

Footer File:

b. Hold down shift + option + command + s to export the slices as html and images for each of the three Photoshop documents.

c. Your head document named: “header.html” change to “header.php”

d. Replace the and information found at the top of your “index.html” page with this simple code:

include(“header.php”);?>

e. Replace the / tag found at the very bottom of your page with the following footer include.

include(“footer.php”);?>

Note: Re-save the “body” which is your index.html as index.php

Note: You will need to upload these files to preview the entire page, but on the positive if you use these same header and footer tags on the rest of your pages your website only needs to load the header and footer images one time making your site display much quicker. This idea works with background images as well (if you re-use the images they only have to load once).

Reference #1:

Here is what the basic html looks like in the header.html file:

These brackets {} used in place coding of actual code for placement purposes only.

{html}

{head}

{title}Your Title Goes Here{title}

{table}

Reference#2:

Here is what the basic html looks like in the index.php file:

{?php

include(“header.php”);?}

{body}

{table}

{?php

include(“footer.php”);?}

Reference#3:

Here is what the basic html looks like in the footer.php file:

{body}

{html}

When you upload these files and images the server will put them together as one complete page. Now you can create new pages and content and keep your header and footer information the same using the header and footer includes.

information provided by Solutions for Web Design

Technorati Tags: Document Size, Graphic Designer, New Designers, Search Engine, Tandem, Web Design Tips, Web Searchers

Free Web Design Tips

admin — Sat, 27 Jun 2009 14:21:23 +0000

Cary Ganz asked:

If you are in search for free web design tips, there are things that you must always apply whether you will be creating your own site or you will let someone handle the task for you. If you are not adept with online tools or the basic process of creating a web site, your best resort is to look for a professional to execute such task. But if you don’t have enough resources to afford such service, you must still not lose hope.

There are many free templates available online that you can apply on your site. The main disadvantage of this is that your site won’t look original. But the best thing that you can do when faced with this condition is to create quality content that will make your visitors linger and keep coming back at your page for more.

If you are going to purchase web hosting services, some providers offer free web design as part of the package. You can search online for your best options regarding such. You must read through the testimonials available from those who have tried such route. This way, you are assured that you will be entering a good deal when you have decided to opt for this.

However you acquire your free web design, here are some important notes that you must think about when you are embarking on this project.

1. You have to know the preferences of your target market in terms of the free web design that will be pleasing to their eyes. If you cannot make them come back at your page often and tell other people about it, your business will not prosper.

Even if you will only be using free web design, you site must be created with your target audience in mind. For example, younger audiences will prefer colorful pages with tons of graphics and other features to satisfy their curiosity. While for the older ones, they may prefer simple types that are easy to navigate. They may want to find what they are looking for fast without so much hassle. So that is what you should give to them.

In any way, your site must look professional so that people will not easily disregard it. You must remember that you are in constant competition with other websites that offer same services as you do. The design is the façade and the first thing that people will base their judgment as to whether they will pursue reading your entries or click on to other websites.

2. Whether you are actually selling products on your site or you are offering insightful information about certain topics, your site must appear credible. This must be done even if you will rely on free web design packages. People won’t easily believe what they see, especially in the cyberspace. If you want to last on this venture, you must create the kind of image that will be deemed as trustworthy in this avenue where spammers can often be found.

information provided by Solutions for Web Design

Technorati Tags: Audiences, Creating A Web Site, Project 1, Quality Content, Search Web, Target Market, Testimonials

Web Design Tips and Tutorials

admin — Thu, 25 Jun 2009 17:49:39 +0000

Elijah James asked:

The World Wide Web is filled with millions of different websites all sporting unique designs that either look really attractive or look real messy on the viewer’s perspective. If you ever plan on diving into the web and getting your site published, you should know these basic Web Design Tips Tutorials that will greatly help you when designing a website from scratch.

Create a Mockup Design First

When designing a website, there are two major phases where the first is the designing and the second is the coding. You can actually start with the coding phase if you think you are skilled, but the problem is that coding takes time depending on your skill and if ever corrections to the design need to be made, recoding is necessary. But if you spend all the time you have perfecting your design, you can proceed to coding smoothly without any rollbacks.

Ensure your Content Remains Easy to Read

After your mockup design is finished, check the design before putting it as HTML. Remember, you should make sure your design is final to make your coding as easy as possible. The images (if any) should be appropriately sized and positioned depending on how much attention you want to give your audience and the text should be large enough to be readable while putting emphasis on other elements if needed.

Apply as much CSS as Possible

Now that you are all set with your final mockup, you can start using that as a reference in coding your new website using HTML. However HTML shouldn’t be the only thing that should be used in making a website because full HTML sites take longer to load. This program can be solved by practicing CSS techniques to trim down the filesize of the web pages and increase compatibility amongst the top Internet browsers. You can find plenty of web design tips tutorials on CSS just by searching online.

Use the Right Formats for Images

As you start to construct your website, you will find yourself exporting graphics from your favorite graphics design tools and importing them to your website editor. But before you start to rush yourself on these easy procedures, try to take a better look at your graphics and see if they are using the right format. Remember, use JPEG file formats for photographs and PNG formats for logos, screenshots, and other graphical elements. You can also use GIF as a replacement for PNG as long as little or no image quality is lost.

There are so many more Web Design Tips Tutorials made by countless web design professionals that you can rely on. Always search around the net for the latest trends so you can avoid mistakes that other designers make as they try to perfect their websites. These four web design tips tutorials alone should save you plenty of frustrations as you go through the process of making a nice website for yourself. For best results, use web designing software along with a nice graphics design tool and you should be fine.

information provided by Solutions for Web Design

Technorati Tags: Audience, Basic Web Design, Compatibility, Design Tools, Designing A Website, Graphics Design, World Wide Web

Web Designing Tips

admin — Tue, 23 Jun 2009 09:43:45 +0000

Mets Aquino asked:

More and more people are getting fond of web design. Whether for work related purposes or for personal-use purposes. Some people get short courses to study web designing and some rely on e-learning and get web designing tutorials on-line. For people who works as a web designer, they know the do’s and dont’s of web designing, for most of them at least. For those who don’t, especially those who are new in the field, here are some basic tips that would help in enhancing your web designing skills.

Keep your index page short

For the convenience of your visitor, don’t place all your content on the index page. Remember that you can use several pages on making a web site. Having a single-page site with all the contents there will make a visitor dizzy and confused.

Create a toolbar or menus easy navigation

This will make your visitors stay in your site longer. After reading the content of your page, it is more likely that your visitor will look for other pages on your site that would interest him. Using short, clear and precise words will also help the visitor know the content of the page where your link is going. I suggest to place the navigation menu on top and the other main links on the right hand side menu. You can also use a drop-down menus if you have many links.

Clean layout design

Align the contents of the page properly. You can use as many tables as you need to be able to insert the images or whatever you need for the page. Beginners tend to put as much images as they can, thinking it would be nice to look at, but it is advisable to put minimal photos. For a safer design, you can also use templates.

Use uniform fonts

As much as possible, use only two to three kinds of font face and the suggested sizes are ten to fourteen points. Just use different font styles, italics for instance, to emphasize keywords. Also, use a font that is available on all computers to prevent having a messed up design.

Cross browser compatible

Keep in mind that there are other internet browsers other than what you are using. At least make sure that your codes and design are compatible to the major browsers like Internet Explorer 5+, Mozilla Firefox 1.0, Opera 7.0 and Netscape Navigator 6+ .

These are just basic tips and suggestions on web designing but are guaranteed useful. These can be used as guide on building your own site but still the overall design is in your hands.

information provided by Solutions for Web Design

Technorati Tags: Drop Down Menus, Index Page, Italics, Making A Web Site, Navigation Menu, Web Design, Web Designer

Web Design Articles – Web Design Tips

admin — Tue, 23 Jun 2009 08:07:25 +0000

Anantait asked:

Now let’s assume that this web page belongs to a site that sells products online. The very fact that half the users cannot even see the page, translates into losses worth half the amount straightaway (perhaps, even more!) Hence we present here a blend of different creative skills & technical prowess – and one is no less important than the other.

In the following lines, we have jotted down a few points that we noticed during our observation on online sites which are important from the point of view of web designers. Some of them may be taken with a pinch of salt; for it is not possible to please everyone every time. But most of them are simple enough to be used as a rule of thumb.

1. A picture, they say, is worth a thousand words. A picture file, alas, is also almost as big. Images, no doubt, enhance the look of a page, but it is not advisable to go overboard in stuffing your page with a truckload of images. Most net-surfers use a dial-up connection and the average time to load a page should be no longer than 5 seconds. If it’s longer, the surfer will most probably click away elsewhere. So, within this time, all the images on a page must be loaded as well. So, as a rough yardstick, keep the aggregate page size less than 30k.

Another important point to note is that each file on the page requires a separate HTTP request to the server. So a lot of small images – even if they do not add up to a lot in terms of bytes – will slow down the loading a lot.

Even when you must use images for navigation, please give a second thought to the users who will not be seeing those jazzy, fantastic & truly amazing buttons that you spent hours to design. Yes, we are talking of the ALT text attribute of the IMG tag. Do not forget to provide an Alternate Text for each image that you use for navigation. (It may be left blank for certain images that are purely for aesthetic reasons, but let that be an exception, rather than the rule.) Though not obviously apparent, ALT text can help such users immensely.

Modern browsers offer users a choice to turn off images. This gives an idea of how troublesome the unwanted images could be.

A couple of more attributes that make your pages load faster are the HEIGHT and WIDTH attributes. Without these, the browser must wait for the image to download since it cannot know how much space to leave for them!

2. Navigability & functionality come before artistic excellence. It is no use making your site a masterpiece of art if users cannot navigate around it – even after they reach the main page; they have no clue as to how to go where they want to go.

3. Especially common, is a kind of navigation that some people call Mystery Meat Navigation. That means that unless your mouse moves over an image, you have no idea where that link might take you. Only when the mouse hovers do you see the actual link. This is cumbersome because users need to move their mouse all over the place to find out which part is a link and which is not.

4. Follow the K.I.S.S. principle: Keep it simple, stupid!

5. Next is a very important practical suggestion: whenever your whole page is within a TABLE, the page cannot render (i.e., the page does not show on the screen) unless the entire table is downloaded. You might have noticed this on several websites, when there is no activity for a long time, and suddenly the entire page is visible. Hence, to avoid such a situation, what you should do is this: Split the table up into two tables one below the other, and let the top one be a short table that displays just the page header and a few navigation links. So now, immediately upon downloading this part of the page, users can see the page header – and this prepares them for the long wait ahead, as well as keeps them from leaving your site to go to other sites, in case of a slow connection.

6. The ongoing browser wars have left only one casualty – the user. As a word of caution, stay away from all browser-specific functions. Because if a certain feature is supported by one browser, it will most definitely not be supported by another. Where you must use such features, it should not hamper the display of the page in the other browser which does not support such functionality. In other words, your page should degrade gracefully.

7. Creating a new browser window should be the authority of the user only. Do not try to popup new windows to clutter the user’s screen. All links must open in the same window by default. An exception, however, may be made for pages containing a links list. It is convenient in such cases to open links in another window, so that the user can come back to the links page easily. Even in such cases, it is advisable to give the user a prior note that links would open in a new window.

8. Keep in mind the fonts-challenged users too. The ultra-jazzy “Cloister Black MT Light” font that looks so amazing on your machine may well be degraded into plain old Times New Roman on your user’s machine. The reason? He/she does not have the font installed on his/her machine – and one thing’s obvious – there’s nothing you can do about the situation, sitting halfway across the globe from them.

9. Stay clear of out-of-the-way hard-to-find fonts. Use plain vanilla fonts like Arial, Verdana, Tahoma, and Courier. If need be, make your jazzy fonts into an image and put that on the page. (And while you’re there, do not forget Tip #1.)

10. A new design trick that is increasingly being used on the web has caught my fancy: It is a very functional navigation bar that guides you across all possible paths within the site. It looks something like this – Read More:

information provided by Solutions for Web Design

Technorati Tags: Aesthetic Reasons, Attribute, Img Tag, Second Thought, Surfers, Truckload, Web Designers

Simple Web Design Tips

admin — Tue, 23 Jun 2009 01:09:23 +0000

Charles Fairmont asked:

There is always a need of improving the traffic to your website and thereby the design of your website should be user friendly and perfect. There are various things you can do to keep the website design spick and span. Firstly, a web site should be read easily. Therefore, the text and the background colors should be chosen carefully. For example, you should avoid a blue color text written on a black background. The result will be that the visitor of your site will leave it immediately. It is recommended to use a light colored background for a dark colored text. In addition, letters should not be too small or too large. If they are too small, Granny will not be able to order their new glasses online, and if they are too large it looks like they are invading your sight.

In order to be sure that the visitors of your site are comfortable with your text, you should align it to the left. Furthermore, visitors should navigate easily through your site. Buttons or tabs or other graphic images should be available. Flashy effects should be avoided because they are tiring for the eyes. Statistics say that the number of schools in which green boards are used instead of black boards is increasing, because green is a reassuring color, so students provide better results in schools which use green boards. Thus, green color used anywhere on your site might be successful.

Your links must be unique. They must not be confounded with the titles.

Information needed by visitors should be found in no more than three clicks. Otherwise, they will click off immediately. Part of a web designer’s work is to use the color efficiently, so that it can present on the internet, information, products, services or organizations. Colors have impact not only upon our health, but also upon human psychic. They can stimulate it, they can convince it to buy a product or a piece of information, or they can even inspire it.

Even if green is good for our health, experts established that blue is the most agreeable color. Blue is one of the colors which express certitude almost in all the cultures (compared to black which in most of the cultures suggest death, bad luck etc.). You can use confidently blue color in almost all kinds of sites, irrespective of the purpose of the site (commercial, art, governmental etc.) or of its location (North America, Europe etc.). Why is blue color so agreeable for the human eye? The same experts speculate that this is possible because human psychic associates blue color with the sky – and its implications, with religious or metaphysical connotations – which must not be ignored – and of other nature (freedom, universality etc.) of this universal constant in human existence.

Other colors can not be classified so easily. Pink, for example, for visitors from India or Europe is associated with feminine issues, which can’t be agreeable for men (imagine a pink web site for tools!). But in Japan for example, pink is appreciated by both sexes.

You also may associate the color of the site with the products sold on it. For example, think of the suitable colors for a natural remedies site! Thus, the problem of colors is essential when you want to have your own web site. Colors do send messages.

information provided by Solutions for Web Design

Technorati Tags: Background Colors, Black Background, Health Experts, Spick Span, Traffic, Web Designer, Website Design

Web Designing Tips to Keep Your Visitor on Board

admin — Sun, 21 Jun 2009 07:47:28 +0000

Naman Jain asked:

st problem that most websites face is with their bounce rates. Websites that are unpopular or do not have enough material to attract the user’s attention are known to have a high bounce rate. Most search engine optimizers who are also responsible to study the performance of the websites, are busy understanding how the bounce rate of the websites can be controlled and the return ration of the visitors can be improved. Here are some such examples that will help you understand the importance of web designing in this process and how people can take assistance of their web designing company to accomplish this task.

The biggest mistake that people commit is to create a lot of hype about their website in the site itself. It is high time they understand that this is not the right place for hype creation. People who have already landed on your website are now looking for some matter, they are wanting to learn something from your website, hence make sure that you have some informative stuff added in there, so that the user is satisfied to visit your website. In the same way it is also important to keep adding newer stuffs to your website content so that the re-visitors have something to look forward to.

Most visitors enter your website through the search engines. The websites are ranked in the search engine through the keywords, if a particular keyword is ranking in the search engine, it should also be present in your website pages, so that the user finds certain relevancy. Here is where the web designing company also plays a role. While they are designing the page, they must make sure that all these important keywords are also present in the title tags, meta tags and alt tags of the web pages, so that the ranking procedure is made easier.

In order to make websites creative and exceptional, web masters make the mistake of making their website complicated from the user’s point of view. The instructions provided to the web designing companies are such, that the web designers land up making a undoubtedly creative site, but be sure that it will be of no use to the user or the search engine. In order to make sure that the search engines are being able to crawl into your website and the end users are being able to freely move around in your site, make sure that your navigation is absolutely simple and easy. A good navigable site provides liberty to its users to move around freely in the site and to provide a lot of cross sectioning. This is a good way to catch the crawler’s attention too.

These tips are essential requirements of web designing which are also helpful in ensures that your visitors are always on board and have enough to return to your site every now and then.

information provided by Solutions for Web Design

Technorati Tags: Creative, Lot, People, Plays, Search Engine Optimizers, Web Pages, Website Content