Tag Archive | "web design"

Tags: , , , , , , , , ,

15 Important Website Design Tips

Posted on 03 September 2011 by Moki

Here are 15 important website design tips that you might not be aware of or have overlooked. Consider taking advantage of them if you haven’t already done so…

1. Custom 404 Pages
Create a custom 404 web page, so that any time your website visitor mistypes or misspells a URL on your site, they will still be provided with navigation options for your site (instead of getting nothing but a “Page Not Found” error message, which is neither friendly or helpful).

2. Redirect Non-www. To www.
Website visitors will often leave out the “www.” portion when they type a URL or link to your website. Set the website up so that it automatically redirects any non-www version of your domain urls (http://domain. com) to the www version (http://www.domain. com) of your website.

3. Properly Sized Graphics
Size and define all graphics and images on your web pages properly and correctly. Web pages will load quicker if the graphics contained on each page are properly defined so they don’t require the web browser to re-size them. Properly sized and defined images can reduce the web browser workload and speed up the page loading time.

4. Favicon
Add a Favicon (favorite icon) to your website, so that your company or product logo appears in the URL box. This icon will also show up in a bookmark list, and gives the web site an added level of professionalism.

5. Include RSS Auto-Discovery
If you offer an RSS feed for any content on your website, be sure to include auto-discovery code in the header of your website. This will allow many browsers and RSS readers to automatically detect the presence of an RSS feed and alert the visitor that it is available.

6. Alternate Domains
Domain names are relatively inexpensive, so you should register multiple domain versions and extensions in order to protect your brand. The varied domains can be parked on the main website, simply to prevent others from obtaining them. Registering alternate domain versions will help protect your brand.

7. Consistent Navigation
Navigation should remain consistent on a website. As a website visitor moves through the website, the navigation bar should remain in the same place on each page. This will make it easier for visitors to navigate your website, and become more comfortable as they move through your site.

8. Home Goes Home
The main graphic, company logo, or “header” at the top of the site should be included on every page in the site, and should always return the visitor to the home page of the website. This has become a web standard, and most visitors now expect to return to the main page of the site simply by clicking on the main top graphic from any page within the site.

9. Copyright Notice
Include a copyright notice on the bottom of each page contained on the website, and keep it current! It may seem trivial, but an out-of-date copyright notice can send a message to your visitors that the website and its content may be out-of-date as well.

10. Meaningful File Names
Use meaningful file names for any files, graphics, or web pages. Many search engines look at file names as part of their search algorithm, and using keywords in file names may help to improve search engine rankings.

11. Hyphens vs Underscores
When naming files and webpages, use hyphens (i.e. web-page.html) rather than underscores (i.e. web_page.html) for the file names. It is much easier for search engines to separate and index the keywords when hyphens are used.

12. Alt Tags
Use ALT tags to describe what images represent on web pages. ALT tags not only assist visually-impaired visitors in knowing what the images are, but they also help with search engine ranking.

13. Spell Check
Use a spell-check feature on the text of all web pages in a website. A website that contains mistyped or misspelled words just shouts “unprofessional”. Take the extra few minutes necessary to check the spelling of text on each page of your website.

14. Test
After making changes to a website, test it! Many times, a webmaster will upload changes, confident in their abilities, only to later discover that in their attempt to fix one thing, they have “broken” something somewhere else. Make testing a habit after making even the most minor changes!

15. Keep It Simple
Simple is good. Remove unnecessary clutter and distractions from a website and navigation menu.

Reference: SitePro News

Comments (0)

Tags: , , , , , , ,

Website Design Concepts

Posted on 03 September 2011 by Moki

If you go to google.com and search for “website tutorial”, “website design tutorial”, “how to design a website”, chances are you won’t be able to find a result that will take you from the beginning of the design process, to the end of the html process. And that is exactly what I’m going to do in this elaborate design tutorial, and for free!

Not only am I going to cover every step in detail, but also provide the reasoning and principles behind the decisions I make. Other design tutorials out there only focus on the instruction aspect, but to truly become a better designer you have to understand the principles and concepts that go into effective website design. All of these principles will help you understand how to make a website.

Website Design Principles
Many webmasters wish they could design great looking sites, but simply can’t. They’ve given it a few attempts, but either due to lack of application knowledge (with apps like photoshop), or lack of “artistic talent”, they give up. And that’s fine, because it keeps the market for design healthy! ;) But no, it really doesn’t have to be like that. If you’re an aspiring designer, there are a few key principles that I want to outline first. They are what helped me through my path to becoming a good designer, and they should help you too if you follow them.

It’s not the 90′s anymore
When the early pioneers of the internet age began designing websites in the 90′s, they became fixated on the filters offered by programs like Photoshop. Lens flares, bevels, drop shadows, glows, were used to their fullest extent. You need to avoid abusing these filters, or I should say, you need to avoid misusing these filters. There are instances in which these filters can be a great benefit, but you have to know how to use them properly and not just slap them on anything and everything.

Usability, Not clutter
Usability is all about making the visitor’s experience a good one on your site. Things should be easy to read, easy to access and most importantly, easy to understand. When a visitor visits your site, they should know exactly what your site is about within the first couple seconds. This is obviously where design, and layout come into play. You need to avoid cluttering your site in the physical sense. I’m not talking about having “too much content”, but rather how you choose to display that content. Things should be laid out with spacing and margins.

Text Do’s and Dont’s
One of the really big fads that was prevalent in the early part of this decade, was the use of small fonts. I was one of those idiots because I thought it “looked” cool. But for all practical purposes, I always scorn people for using size 10px or less for fonts. Never go below 11px font – and even 11px should only be used sparingly. Size 14px (which is what this is) seems most ideal for paragraph’s of text. You can get away with 12px of course, but as screen resolutions are increasing, 12px suddenly becomes smaller.
Line-height is very important. Line-height is the spacing between each line of text in your paragraphs. Standard line-height I find is a tad bit too thin, and I like to expand it a little more. It makes it easier for people to read.

Colors and Contrast
The color theme of a site is obviously important. A lot of aspiring designers have a tenancy to use too many colors, simply because they’re there. But I like using no more than 2 primary colors and a third “secondary” color that I will use sparingly throughout the design. A simple color theme is easier on the eyes, easier to “comprehend” and overall just looks better. Of course there are exceptions to this, but 9 times out of 10, it’s always better to keep the color theme simple.

The color theme also needs to connect with the visitors and the purpose of the site. For example, I wouldn’t use blue and florescent green/yellow for a site about health – it simply doesn’t make sense and I think that’s a given.

Contrast is hugely important. It’s very important that your content and navigation are correctly contrasted. The foreground text needs to either be very dark, or very light in comparison with the background color. I see a lot of sites where the text will be a light gray and the background is white – err! That’s very annoying and hard to read.

Design around the purpose of the site
A lot of designers, those experienced and not, always use the same “formula” for layout and design elements. To really make an impressive and effective site, you need to fully understand what the purpose of the site is, and what the goals are. Whether the site is based around selling memberships, or just general ad-based content – the design should cater most effectively to the purpose. And that’s what I will be demonstrating in the tutorial proceeding this page.

A common mistake for the aspiring designer is thinking they should be able to open up photoshop, and design a great looking site on their first try. Nope, doesn’t happen like that. You wouldn’t pick up a guitar and start writing music without first learning a few songs right? Right, and it should be no different for web design. I recommend that beginners simply try to recreate existing designs that they think look good. If you do this a few times, it will (1) help you learn the application, (2) help you become a better designer. You subconsciously learn when you recreate an existing design. You automatically pick up design sense when you do this, and it really helps and goes a long way when it comes down to designing your own sites.

Comments (0)

Tags: , , , , , , ,

Design a Website in Photoshop

Posted on 03 September 2011 by Moki

I’m going to use Adobe Photoshop to design the site. I haven’t ever used any other application so I can’t really say whether or not it’s the hands down best application to use, but it definitely is what most people use and I have no complaints about it. I’m using CS2 specifically for this but you can use pretty much any version, because I won’t be using any type of elaborate tools. In fact, I never do. So if you’re using a different application, it’s not a big deal, because chances are you will be able to follow along just fine. Just don’t use MS Paint.

I will be covering this design process as specific as possible, while attempting to explain everything in detail from the actual instructions, to the reasoning behind my different design decisions. So feel free to skip over areas where I’m rambling on and on.

Prepare your document

  • Open up Adobe Photoshop.
  • Go to File / New on the top left menu.
  • Set the document width and height to 935×900.
  • Make sure resolution is 72 DPI.The site we’re going to be designing is going to fit within 1024 width resolutions. Most people use 1024×768 for screen resolutions but not everyone. It’s okay to go beyond 800×600 only if your target audience will be using (for the very large majority) at least a 1024×768 screen resolution. And since SiteVerdict.com is for webmasters, this is most definitely the case. Otherwise if you were to start a site for senior citizens, you definitely would want to design for a 800×600 resolution.Now you probably asked yourself, Why not just set the width to 1024?. Because you have to consider that the scrollbar on the browser is taking up width, which it is. You can actually go higher than 935, but it’s just my personal preference to set it at around 935 px.

    Fill the background, Set your guides, Expand

  • Fill your background color (Paint bucket tool). I’m using color code: #f7f6f3
  • Maximize your window (I like having it fully maximized).
  • Go to View / New Guide (As shown to the left). Hit OK.
  • Repeat #3 and set the position to 5 in.
  • Then hover your mouse over the new guide, left click, drag it to the very right edge.
  • Go to Image / Canvas Size…
  • Change the width to 18 (As shown to the left). Hit OK.
  • Use the paint bucket to fill in the left and right sides of the newly expanded document with the same background color.Step 1 Explanation:I knew coming into this design that that was the color I wanted to use. I like the very light beige / off white color. Generally however, I always just start off with white and then experiment from there.
    The background color you choose is very important. You generally want to stay away from darker
    background sites for *most* sites. If you’re after a really serious corporate site, or an ecommerce
    site where you’re selling something, it’s better to stick with lighter colors / white.

    Step 2 Explanation:

    Maximizing your document is really a matter of personal preference. But I really recommend you do
    it. It gives you a nice big open canvas without much outside interference.

    Step 3 Explanation:

    The reason we’re aligning 2 guides to the very left and very right of the document is to let us know
    what the maximum left & right extremes are. This lets us know *NOT* to design the actual content
    outside of these lines.

    This is the step which made step 3 come into play. We’re expanding the document further because
    it really lets you envision the design as it would appear on a fully maximized browser beyond a 1024x
    resolution. I personally design on a 1920×1200 resolution and I like to be able to see how the design
    looks with the full background to the left and right.

    Place your logo & let the games begin

    I’m not going to be covering logo design here because I already wrote a very elaborate logo design tutorial which you can find here.

    As you can see the logo I decided to place in the upper left corner just against the left guide. I chose to make it black just to see it with the most contrast against the background.

    Now this is the point at which the *real* design process begins. This is where most of the thought and planning comes. You need to know what exactly the site is about, and the purpose / objective of the site. I really want this site to be both professional and retro’ish / designer’ish. It only makes sense because SiteVerdict is both a serious service (hence making it professional) but also geared towards reativity and design. My color scheme is going to be black and the shades of beige/brown.

    Step 4 : Design the header

    The header usually always consists of the logo, and the navigation. It’s what people are most familiar with and makes the most sense for this particular site because I want it to be easy to use and understand. If you were doing a personal portfolio design site or something, sure you can do something completely off the wall. But for this example, and most others, you will want to stick with the same formula of having your primary navigation and logo at the top.

    I kind of want to give the same feel to SiteVerdict as I did this site (garysimon.net). Since they’re both my sites, and both in the same industry, it makes sense to kind of network them in a design sense. So I’m going to create a black bar that goes all the way across the entire width of the document at the top.

  • Select the square marquee tool. (The square dashed icon on the upper left corner of the tools menu on the left).
  • Left click and hold above the upper left corner of the document, and drag all the way across the top and slightly down then let go.
  • Select the paint bucket tool, and make sure black is selected in your foreground color and left click inside the square marching antsNow I have just a random / unique idea that I want to incorporate. It will combine the logo into the black area, into a patch like rectangle that is half inside and half outside of the black strip.
  • Select the square marquee and drag a square similar to the one on the left.
  • Use the paint bucket tool with black as the foreground and left click inside of the square selection.
  • Select the layer that the logo is on (assuming it’s a logo completely flattened to 1 layer), and go to
    image / adjustments / invert.
  • Place the logo layer to the top in the layers window and move (with the move tool) the logo inside of the square black area.
    In order to incorporate that side of designer / retro’ish, I’m going to scrape the black block we just added.
  • Select the eraser tool. Then in the brush options at the top, choose a brush and diameter similar to the one shown to the left.
  • Choose the block layer and simply scrape it in a similar manner to produce an effect like the one shown to the left.Now that pretty much takes care of that side. Now we need to integrate the actual navigation and determine if we want it inside the black bar to the right, or beneath the black bar to the right.So actually I think what we’ll do is create a secondary strip that’s slightly darker than the background beige color that will go along the same height as the extended rectangle we added.

    The way you create that strip is the same way you created the black strip above it. Just first select the background color of the page with the eyedropper, click on the foreground, then change the color with the circular icon to slightly darker. Then use the marquee to make the strip, fill it in with the paint bucket tool. Make sure you place it on its own layer, and then position it *beneath* all of the other layers we created.

  • Select the paint brush tool and then select a brush similar to the one that you used to create the “scrape” effect.
  • Select a foreground color slightly darker than the background.
  • Go along the bottom portion of the bar we just created as seen above.
  • Select the square marquee tool and select everything *beneath* the beige bar, and hit the delete key.You should end up with something similar to the last image. I figured this would give us some more of that designer’ish flavor by adding the rough bottom edges to the beige strip we just created.
  • Select the Type Tool.
  • Choose Arial at size 14pt. and make sure “anti alias” is set to none.
  • Type in the navigation where I did.. Home Review Sites etc…
  • Hit CTRL + ;Step 5 : Primary ContentAfter the header, you want to emphasize the most important aspect of your site, and generally to the *left* just beneath the header – because that’s where people look at first. They read from left to right. So with this idea in mind, I’m going to simply state exactly what this site is, or what the visitor should do, etc…

    This is just standard text from the type tool, except “Smooth” is selected for anti-alias option. These are two different text layers. The top one So you have a website? Post it is one layer with the Post it bolded, and then of course the Get your .. is on its’ own layer as well. As you can see I added a weird wet effect behind it.

  • Create a new layer in the layer’s window and place it underneath the two text layers.
  • Select the paintbrush tool and select the brush we used from before, and make the diameter a bigger size.
  • Choose a darker than background foreground color.
  • Simply paint behind the text to get the effect as in the image above.The text I added to the right is simply 2 different text layers and they’re arial 14pt alias “none”.While the big text beneath it serves as the eye-catcher, this text will fill them in on exactly what this service is and how it works. That way, we completely take care of the whole “What is this site about?” aspect, which is one of the most important aspects to concern yourself with. People will leave if they don’t immediately understand.

    As seen to the right, I added a dashed rectangle. This will encase a secondary piece of content that I feel is most important.

    So now that I think about it, I think it would be a great place to feature the highest rated sites. Possibly a weekly awarded thing where 5 sites are recognized for having the best ratings. To the left we’ll position a “SiteVerdict.com Award” trophy emblem, and to the right we’ll list out the sites.

    It makes sense to feature this because visitors seeing the site for the first time will become motivated to reach that status. Motivating your visitors is huge if possible!

  • Select the square marquee tool and a foreground color slightly darker than the background.
  • Drag out to create a shape similar as above.
  • Select the Type tool and choose none for anti-alias.
  • Select a foreground color even darker than the rectangle we just made.
  • Type “- – - – - – - – - – - – -” long enough to span the bottom of the rectangle.
  • Duplicate the text layer once you got the right length and position it at the top.
  • Duplicate the layer again and go to edit / transform / rotate 90′ CW.
  • Then position it to the left and remove a few dashes, then duplicate and position to the right.
  • Duplicate the logo layer(s).
  • Invert the color so it’s black.
  • Position it over the rectangle we just created.
  • Select the type tool and a font similar to the one used in the logo and type “AWARDS”.
  • Find a picture of a trophy somewhere and vector trace it with the pen tool to create an image similar to the one in the image above.Vector tracing is what is being shown to the very right. You find an image, and trace over it with the pen tool. I cover vector tracing in depth in my logo design tutorial.As seen to the right, I added several things. First, to “encompass” and show off the trophy more, I added a white glow appearance behind it. This is just an extra step to draw some attention and notoriety to it. The middle dividing line to the right of it helps separate the “left” from the “right”, which is the site listings.

    And the site listings themselves are straight forward, the stars represent the rating of each site. Easy to understand and easy to read.

  • Select the paintbrush with a large feathered (the soft circular brush near the top of the brush list).
  • Choose white as the foreground color and create a new layer and position it beneath the logo / awards / trophy layers.
  • Click once and it should turn out like the image above.
  • Select the line tool (left click and hold the square icon in the tools palette and drag to get the line tool.).
  • Select a darker foreground color.
  • Drag a vertical line about the length of the rectangular box.
  • Right click on the line layer and choose rasterize layer.
  • Select the eras or tool and a large feathered brush and click a few times on the top and bottom of the line to fade it.
  • Either manually create a star with the pen tool, or vector trace one from an image you find on the internet.
  • Double click the layer and go to stroke, set it to 1px and select a slightly darker yellow color.
  • Duplicate the layer several times as shown above.As seen here, I added two more text layers. “Featured sites seeking reviews”, which made most sense to me. It allows me to list either the latest sites added that need reviews, or “featured” sites that could perhaps pay for an upgraded listing to get on the front page, or list sites that are pending but have few reviews. Sticking it right in the middle of the page gives it good importance which is what I want.Then, I have “Browse Sites” aligned direction underneath the beige box above it. Notice how I align the beginning of the text, perfectly to the beginning of the box. This gives the layout structure and flow. It makes it very easy to understand and read. It also makes good sense to put it there to the right, because although it’s important, it’s not as important as any of the other 3 pieces of primary content to the left and above it.
  • Select the square marquee tool with a similar foreground color.
  • Draw it out.
  • Choose the eras or with the same brush as used at the top and create a similar effect as shown above.
  • Screenshot an image of a site in your browser.
  • Select the square marquee and draw it out inside of the box we created.
  • Go to “edit / paste into” then “edit / free transform”.
  • Hold shift and scale it down as shown above.
  • Right click on the layer and hit apply layer mask.
  • Select the eras or and choose a hard smaller sized brush (at the top) and round off the corners as shown above. I added 3 different text layers here.
    They’re all Arial with anti-alias none.You have two options to duplicate the box we just created. You could either select all the layers, and “New group from layers” on the layers pull out menu and simply duplicate them. Or use the square marquee tool, select around the whole box, and go to edit / copy merged. Then edit / paste paste 5 more times and you can situate them as such.I added the section to the right pretty quickly. I’m not going to cover this part step by step because it’s pretty self explanatory. The little triangular icons are created with the pen tool. Very easy to do, just three point and clicks and it’s done and you can duplicate them.

    Step 6 : Add a footer

    The footer is pretty simple. As you can see it’s a lot like the header – in fact, I duplicated one of the layers from the header along with the “rough” part of it at the bottom. Then I duplicated the text that served as the navigation and then added an extra navigation and right aligned it for a quick advertising / contact link.

    Complete

    And there you have it! A fully completed home page design from start to finish. It’s not all that difficult is it? Of course it’s a little daunting having to read over this entire tutorial, but really it doesn’t take all that long once you get the hang of it. But we’re not finished just yet. We still have several steps until it’s a ready to go, html’d site. So let’s venture on to the next section.

Comments (0)

Tags: , , , , ,

Design an Effective Homepage

Posted on 03 September 2011 by Moki

Your homepage is the first impression of your business or organization and this is where you must both catch the attention of the user and give them an understanding of what it is your organization offers. Most websites don’t understand that people visiting may not be as educated on the products or services that you offer. This is where the design is important.

You need to be sure that you have a clear description of your business or orginization on the homepage. This will allow prospective clients to fully understand who you are and what you have to offer. If a prospect visits your website and on your homepage they can’t figure out what service or product you have to offer them within a few seconds then they will likely leave. While returning clients and visitors may not benefit from the companies information about themselves it will not hurt either. You just have to create a balance of information for new visitors and returning visitors to make sure that they both can easily find what they need from your website.

An example of this at work is Mofiki WorldWides website. While you can’t tell what Mofiki WorldWide is by the name the first thing you see when going to the website is a slideshow about each service. As you scroll down you get more details on each so that you can make a decision and either go to the services page or click the links in the slides to go directly to the service you require.

Your websites design has the largest impact on keeping a visitor at your website, which of course is the first step to successful online marketing.

Comments (0)

Tags: , , , , , ,

Clean and Effective Website Design

Posted on 03 September 2011 by Moki

Website Design is definatly the most important part of the development process. This will in most cases be the first impression of your business or orginization. Online people want to be drawn into your website while easily finding the information that they came for.

Your website should be clean and simple, such as simple smooth graphics and easily read text. Make sure that all graphics on your website are high in quality but small in size (sometimes difficult to accomplish but definatly a must). Image backgrounds should be very light and work as a background as suggested. Many people have backgrounds that show through too much which causes not only a distraction from what you are trying to push accross to your readers but also as a deterent when people can’t read text on the site. All graphics should be clutter free and placed only where they will serve a purpose to your visitors. While floating graphics and multiple images may look flashy it creates an environment thats more difficult to navigate and decreases your chances of keeping a visitor past the homepage. What a web surfer sees is less important than the message they recieve from the website. Be sure to keep flashing graphics, ad banners, and sounds to a bare minimum. Also popups are a huge no no unless being used specifically for an event that there is no other alternative.

Your site while needing graphics should focus primarily on text as this is the meat of the website and the only thing that will get your point accross. Avoid using flash at all cost, while flash is pleasing to the eye it will in no way help with exposure. Search engines cannot see text in flash files or within images so content must be displayed properly as physical text. All images that need to be used within the sit must have an alt tag which can and will be indexed by search engines. At least half of each page of your website should be text that describes that page with at least 2 links to other pages within your website.

Most important is the loading time of your pages. While most people nowdays have broadband of one kind of another the time it takes to load your page will most certainly impact the time someone stays at your site if they get there at all. Make sure that all images within any one page of your website total no more than 2 megs otherwise your pages load time will be greatly reduced. Also any style that you have within your website should be contained within style sheets.

Please chack back with Mofiki WorldWide for more articles to help you create websites to be proud of.

Comments (0)