Giving a cost estimate for website and graphic design jobs

Posted by on Jan 7, 2011 in Website Development |

Drawing up costs and proposals are time-consuming. If you are a website designer or a graphic designer, you need to know how to accurately bill for your work (even if you are working for a salary, it’s a good idea to make a mental note of how this gets done). Although you won’t get every job you bid on, you need to make sure you are providing clients with a fair, realistic and profitable cost estimate for design jobs. What are your competitors charging? You probably won’t know who else is bidding on the job, but find out what other designers and agencies are charging for work. If you’re vastly overpriced, the client probably won’t even consider you (unless you have something extremely unique to offer) and if you’re charging much less, the client may not take you seriously (or the money won’t compensate for the effort you put into the job). Get some ball-park figures from other designers in your area so that you have a good point of reference. Who’s the client? If you’re setting up a cost estimate for a blue chip company, chances are they have bigger budgets and are prepared to pay for what they want. If you’ve got a smaller client and you know they are a bit strapped for cash, rather speak to them about a payment plan for you (or how you can compromise) instead of undercutting yourself from the get-go. You don’t want to be the cheapest designer, but try to be flexible if you are looking for new clients. A good tip is to have specific price ranges for website design and graphic design jobs. Ask a lot of questions about the job (if the client is too vague during the brief, they could either be looking to you for some guidance or they could be expecting you to re-do various logos or website ideas until you present something they like – which will take a lot of time). If you can get a lot of information upfront, you’ll have a better idea of what you can charge for the job. Please follow and like...

read more

Changing sizes and positioning of a Div layout

Posted by on Dec 14, 2010 in Website Development | 1 comment

In our last post, we discussed the basics of creating a CSS layout in Dreamweaver. For website designers, the basics of a good website designs starts with creating your website’s layout (before any images, text or design elements are incorporated). Now that you have your three layout boxes (Header, Content and Footer), we are going to start changing the positioning so that the layout is fit for an internet browser. Step 1: As mentioned in our previous post, you can change the positioning of the Div’s by clicking on the Div’s and dragging them around, but using fixed values for the positioning is much more accurate. To use fixed values for your Div positioning, click on the Div and go down to the property inspector at the bottom of the page. You will see that the positioning values of the left, top, width and height (called L, T, W and H) are in the boxes. Click on the Header Div and reset the values (the L should be 0 – this is how far you want the Div from the left side of the screen), make the Width 990 pixels, Height should be 100 and T should be 0). You may be wondering why the Width is 990 pixels – this isn’t an arbitrary number, it’s because we want this layout to fit inside a monitor resolution of 1024 x 768 (vertical scrolling isn’t a big deal in website design, but we want to avoid any horizontal scrolling). Click on the Footer Div and make the measurements as follows: L = 0, T = 560, W = 990, H = 50. You will see that there’s a “px” after the numbers, don’t take these letters out of the box when you are changing the numbers – the layouts will work in Dreamweaver but they won’t display in an internet browser if you remove the “px”. Now, click on the Content Div and change the values to the following: L = 0, T = 105, W = 990, H = 450. Step 2: You have now created the Div’s for your layout, but they won’t have any visibility in a browser yet. A good tip is to add a different background colour to each of the Div’s so that you can check them out in a browser (you can do this by clicking on the Div’s and them going down to the on property inspector at the bottom of the page – choose a bright background colour for each Div). Save the page and click on the globe icon at the top of the page so that you can see it in a browser. These are the basics of using...

read more

Refining your CSS layout with nested Div’s

Posted by on Dec 7, 2010 in Website Development |

This post is part of a series about the basics of creating a CSS layout in Dreamweaver. In the previous post we discussed how to create Div’s and change the sizes. When designing a website, one needs to create “nested Div’s” (which basically refers to a Div inside a Div) so that you have the layout you need for menu buttons, advertisement spaces and so forth. Once you’ve got the basics of CSS layouts, you can start to refine your site with nested Div’s. Step 1 We have already created the three Div’s (in our example they are called Header, Content and Footer – if you are unfamiliar with Dreamweaver, it would be a good idea to keep Dreamweaver open in front of you while reading this post). Once you’ve checked out the Div’s in the browser, go to the CSS Styles panel at the top right-hand side of the page (if you don’t see the CSS Styles panel, go to your window menu – you might have to expand the styles button to see your three Div’s). Now that you can see the three Div’s, select the Header Div to see its various properties, such as the background colour, positioning values etc. *Note: This is an important aspect of CSS layouts: As soon as you draw out a Div in Dreamweaver, the program will create the rules for you. If you double click on the Header Div, a dialogue box will pop up that says “CSS Rule definition for Header” – this dialogue box has all the different categories for the rules of this Div and this is where you can control the font, set a border etc. If you click on the Positioning button in this dialogue box, you will get the Width, Height and other fixed values of the Div’s positioning. You will notice that the Type setting in this box is “absolute” – that’s what Dreamweaver means by calling the Div’s an “AP Div” – it stands for absolute positioning Div. If you have some time, explore the different options besides “absolute” to see what other creative aspects you can bring to your Div. Step 2 For our example, we are going to put a nested Div inside the Content (middle) Div that we have drawn. Click inside of the Content Div and then click on the Code button at the top left side of the page (this will show you the coding behind your Dreamweaver site). Scroll towards bottom – you’ll see the three Div’s that Dreamweaver created for you: <div i.d=”Header”></div> <div i.d=”Content”></div> <div i.d=”Footer”></div> Seeing as we clicked on the Content Div, the curser should be in this line of code: <div i.d=”Content”></div>....

read more

The basics of creating CSS layouts

Posted by on Dec 2, 2010 in Website Development | 1 comment

Most graphic designers will tell you that anybody can use Dreamweaver. Although this is true, you can’t always just download the program and expect to know how to start using it. If you’re an experienced graphic designer that hasn’t built a site in Dreamweaver before (or you have no website design experience and want to get the hang of it), your first point of departure is creating CSS layouts – also known as Div-based layouts. CSS layouts help you create a website with a creative layout without using inhibiting tables. So, after you’ve opened Dreamweaver, defined the site and saved the pages, this is what to do to start creating CSS layouts: Create CSS layouts Step 1: Turn the Insert bar on (if you don’t have the Insert bar turned on, go to the Window menu at the top of the page and look for insert – this is the first command in the drop-down menu).  Inside the insert bar, go to the Layout tab and click on the second icon in the bottom row called “Draw AP Div”. Once you’ve clicked on this button, you will be able to draw a box in your screen. Click anywhere in the screen and draw a box – this box is called a Div (if you have used Dreamweaver before, this can be confusing because these Div’s used to be called “layers” in previous versions of Dreamweaver). Step 2: To change the size of placement of the Divs, click on the box and drag. These Div’s can hold any type of content such as text, video, images, another Div and tables. If you come from a print background, Div’s may remind you of image boxes when designing in InDesign or Quark. For the first exercise, draw three Div’s (boxes) in the page – you can do this by going back to the “Draw AP Div” button on the insert bar. You will need three Div’s for this exercise because we are going to be making a header, content and footer layout. When you are done, close the Insert bar at the top of the page. Step 3: Click on the first Div so that it becomes highlighted, then go down to the property inspector at the bottom left hand side of the page and give the Div a different name than “AP div 1” (rename it to Header for this exercise). Grab second Div and rename it to Content and then the last Div and call it Footer. You can drag these Div’s around on the page to determine positioning, but it’s much more accurate to use fixed values for your CSS layouts. These are the basics of creating a CSS...

read more

Unambiguous website navigation

Posted by on Nov 17, 2010 in Website Development |

The navigation of a website is one of the most important elements. Website navigation needs to help users find the information, products or services they need on a site quickly and efficiently. We’ve all seen some websites where creative navigation was used, but one could argue that a home page which consists of one big picture isn’t the easiest way for a website user to understand the navigation and find the content he or she was looking for. Getting caught up in unique designs may create something different for the client, but it is important to remember that their clients (the website users) are probably on the website to quickly get the information they need, so it may not be wise sending them on a roundabout to access the various pages they want to look at. Here are some ways to test if your navigation efforts are really working: Test it out Get somebody who is unfamiliar with the company to use the website. Ask the office accountant to try to buy a product from the website or to find out if the company offers a specific service you need. If you see the person gazing around the home page, unsure of where to click next, it’s a sign that your website navigation might be too complex for the average user. Although some designers dislike underlining text links in the body content, you may be surprised to find out how few website users will click on words if they are not underlined (they simply don’t realise that it’s a hyperlink!). These design techniques may seem old-fashioned, but they are consistently used, leading them to become important visual cues for website visitors. Once you have somebody on a sub-page in the website, ask them to get back to the home page. Many website users will scroll down to the bottom of the page they are on, expecting to find the main navigation buttons (such as About Us, Contact Us and Home Page) as a text link on the bottom of the page. Make sure you’ve got these hyperlinks at the bottom and that the main navigation menu is always on the top part of the page. Please follow and like...

read more

Website Usability Can Improve Your Conversion Rates

Posted by on Apr 29, 2010 in Website Development | 1 comment

Keeping your website simple is the most important factor for usability.  Be sure to make everything about your website understandable and clear.  Visitors should easily be able to access all the information that is important on your website. Website navigation links should be clearly visible and easily understood.  Your page layouts should also be simple and they must be easily scan-able.  In simpler terms, your website should be organized in a logical flow.  Users should be able to find all the information/answers quickly to what they are looking for. By following these accepted website standards, your visitors can immediately find their way around your website.  Website users have learned to mistrust online business.  By following these conventions for your website, you are building trust, credibility and it means that you are serious about your online business. By making your website more usable, you can increase conversion rates as you are delivering the right information at the right time.  When you are selling a product on your website, give your users access to all the elements that they need to make the final decision to buy.  Give your users the tools that they need to research the product without having to leave the product page.  Let your visitors be in control and access the answers to the questions they may have. What you include on your website pages will vary to what you are selling and who your visitor is.  These are typical things your visitor may want to see while on the product page. Details and technical data about the product. Shipping options and charges based on their zip code. Refund, privacy and security policies. User product reviews and ratings. Website usability goes beyond the visual items and site hierarchy.  It is all about giving the right information at the right time.  Never be afraid to tell your visitors what they should do next on the page.  It should always be the main focus point.  Let the visitor of your website feel in control.  Give them all the information that they are interested in. Please follow and like...

read more