|
|
| Web design? |
| I am a l33t web design master/mistress! |
|
20% |
[ 5 ] |
| I'm not bad |
|
56% |
[ 14 ] |
| I'm a bit of a newbie ^^;; |
|
16% |
[ 4 ] |
| I don't do web design at all, but am curious about it |
|
8% |
[ 2 ] |
| I don't like web design, and don't want to do it |
|
0% |
[ 0 ] |
|
| Total Votes : 25 |
|
|
|
|
|
|
|
|
 Posted: Sat Jan 29, 2005 12:08 am
Alrighty, for the next issue of our guild e-zine, we're looking for your web design hints and tips! Everything from the inspiration and concept phase, to coding and css, standards, accessibility, hosting, domains... everything webpage related, we wanna hear it.
Please remember that you will be quoted directly for the article in the e-zine, so watch your spelling, and don't squash all your tips into a single sentence. 3nodding
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sun Jan 30, 2005 1:01 pm
So... post all my random tips here?
The main thing I always stress is to have as little scrolling as possible. CSS allows you to have independent scrolling areas, which are fine, but I avoid making the entire page scroll as best as I can.
Secondly, tables are intended for charts of data and that is how they should be used. domokun A table can take 50 lines of code where CSS can pull it off in 5. Also, to keep things compatible, div tags are better because text browsers display pages in the order that the code is in. A table converted to a text page will be in quite a jumble.
Splash screens are not necessary unless they serve at least some purpose. For example a choice between a site done in flash or html. I suppose they might be okay if they are displayed while the main page is loading, but otherwise don't use them *shakes finger*.
From a design standpoint, ugh, way too many things to say about that.
Don't use more than three text fonts or sizes. Web pages should be elegant, which means simple yet unique. Color styles should follow the color wheel, as in group adjacent or complementary colors.
Navigation is very important. All of your content should be categorized and placed in a new page or window if it doesn't fit anywhere else. This means that there may be a lot of pages to navigate through. Popular ways of navigation are sidebars that branch out, drop down menus, site maps, seach bars, breadcrumbs, and the like. I find breadcrumbs very useful and 90% of professional sites have them. An example of a breadcrumb is on gaia: Gaia Online Forum Index -> GAIA Online -> General Discussion. This helps if you have many subcategories and you want your user to be able to backtrack without using the back button a million times or starting back at the main page. However, if there are a large number of pages it will get tedious updating the links for every page unless it is automatically generated by server-side script (asp).
Short do nots:
Put a visitor counter
Have scrolling status bar messages
Have anything follow the cursor
Play large music files in the background
Tile complex images as the background
USE COOKIES!
Just ran out of steam. Hopefully I have the energy to post more after a hot shower.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sun Jan 30, 2005 2:44 pm
Well, I recently got talked into doing images for a site for my friend Mike, and I'll share a few things that worked really well for this one...  Just the top part there, the rest isn't done quite yet... First of all, pick a style and stick with it. I tried to keep it clean and light-looking, and I think it worked pretty well. Mike wanted me to put in this picture (careful, big) that I made of him, but it just didn't work with the rest. Even after changing the image to match the blue color gradient, the result still clashed. So, that's one thing. The second is to preserve contrast. The dark parts on the left and lower right tie it together and make the entire thing look better. Remember to use readable fonts... The font I used for the top bar and lower left text is pretty and stuff, but harder to read. I stuck with Courier New for the links and message bar. If people can't read the links, the site becomes pretty useless. Borders are nice, especially if small and not very noticeable... Using beveling and drop shadow in subtle ways can make the image a lot more exciting to look at and interact with. That's about all I can think of for now... I might post more later if things pop into my head.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Mon Jan 31, 2005 1:19 am
I semi-disagree on this point: Hizzahn The main thing I always stress is to have as little scrolling as possible. CSS allows you to have independent scrolling areas, which are fine, but I avoid making the entire page scroll as best as I can. Whole page scrolling is okay (and preferable in some cases), as long as the content isn't too long. Vertical scrolling isn't too bad, its the horizontal scrolling that annoys me. Definitely always makes sure that your webpages aren't too wide, so the user doesn't have to scroll two ways to see everything. I have seen some sucessful horizontal scrolling designs, but they have ONLY the horizontal scrolling, and the content is short and simple. My tips: If you're even slightly serious about web design, learn CSS and learn it well. It isn't hard, saves you a huge amount of time, and gives you much more control over the way that things look. Try to stay away from specifying colours as keywords (like 'red', 'blue', 'green'). You have much more flexibility specifying them using hex or rgb values, and have a much wider range of colours. Keep in mind what fonts you use in a website: not everyone has the same fonts that you do, and if you use one they don't have, it could end up looking pretty bad. By specifying fonts as 'font-family', if somebody doesn't have the first font, the browser will display the next one, and so on, which means you have a bit more control. Not everyone uses 1024x768 resolution. Stats show that a majority of people do, but do you really want to infuriate potential clients who have an 800x600 res on their laptop with horrible scrolly-ness? NO! So make sure that your site looks reasonable on at least the 3 most common resolutions: 800x600, 1024x768, and 1284x1024. In general, I like my sites to be less than 770px wide. Make sure your text is legible. Dark text on a light background is a popular choice for a reason. Light text on dark background can work, but is slightly harder to read, so should really be avoided for large bodies of text where possible. Same with italicised and bold text; it gets hard to read, so use them for emphasising words or headings only. Centered or right aligned text not only looks tacky, but it also makes it harder to read. The eyes have to return to a different point each time, which creates more work for the user (who already has a very short average attention span). Try to use them only for single line text, such as headins. Phew, more to come!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Mon Jan 31, 2005 5:14 pm
1. Don't overload on the flashy graphics. It hurts the eyes. Badly. eek
2. Try to conserve bandwidth with smaller file sizes and usuage of the same image for headers/navigation. It not only saves you money (if you'ree using a paid host), but it also keeps the attention of visitors with slower connections.
3. If your site is very graphics-heavy, it's best to warn viewers in a splash page. People with slow connestions won't always wait to find out, especially if it takes too long.
4. Please, please do not use clashing colors for foreground/background/text! This can sometimes hurt worse than blinking images. If you can't stare at it for a few minutes without a headache, neither can your visitors.
5. regarding visitor counters: They're fine for personal sites, but not for professional ones. If you absolutely must have one, keep it as unobtrusive as possible.
6. Try to stay away from the "high-contrast" color schemes. Black and red may look cool at first, but it's really overused. (and hard to read).
7. Make sure your text is readable! You may be able to concentrate on small text, but not all your visitors can. I myself, my eyes aren't the greatest, and I tend to close out sites like that.
8. When using an image not of your own creation in a layout; always ask permission! Anime/cartoon/movie art and screenshots are hard to get permission for, so I suppose it's all right . . . but never, ever use fanart/original artwork without permission! Many artists treat this as art theft, even if credit is given. (avoiding "official art" and using your own is best).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Feb 04, 2005 7:52 pm
Kitsunehime 8. When using an image not of your own creation in a layout; always ask permission! Anime/cartoon/movie art and screenshots are hard to get permission for, so I suppose it's all right . . . but never, ever use fanart/original artwork without permission! Many artists treat this as art theft, even if credit is given. (avoiding "official art" and using your own is best). Totally. Technically its illegal to use anime/cartoon/movie art and screenshots are illegal, same as any other artwork or photography created by someone other than yourself. The chances of the creator suing you for using it on your blog are low (but possible! There was something about disney suing a nursery for having Disney paintings on the walls...), but when doing commercial work, definitely use original stuff, or buy or get free stock photos from http://www.sxc.hu/. Always make sure you're not going against any copyright laws.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Mon Feb 14, 2005 12:09 am
well... I have noticed lately... more people like the dark kinda goth colors... like dark reds blacks blues and even some purples... or all pink... stay away from yellows and oranges... a little is ok though... just don't make the background real bright... 3nodding
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Mon Feb 14, 2005 3:57 am
A good tip for beginners in web page design is to have a test page (or designate it as "test.html") to test out how your page is going to come out. I've seen way too many pages that have errors that have been overlooked.
Lots of people like using fancy HTML programs such as DreamWeaver, InDesign or TacoEdit (Mac). These programs may be a lot of help to most people, but it's best to stick to the basics first and learn how to use the notepad (or "Textedit" for the mac users). Once you get used to it, then move ahead.
HTML coding can be a pain to most people because there is a lot of typing involved (and a lot of strain on the typist). Remember that you can always copy and paste text to cut your time in half. Mac users with the one button mouse can right click with the control button and click on the mouse button...shortcut keys are your friend in any application !
Javascript is a tricky thing if you're just starting out in web design and one typo can easily frustrate you. There are tons of websites that allow you to copy and paste their scripts to your webpage provided that you keep the script as it is.
Make sure that your website is compatible with a variety of browsers. (FireFox, Safari, Opera, Explorer, Netscape, etc.)
Do not...
1) Make a website that does not give any viewer control of audio. Flash sites and other sites with media players that have no volume control
will turn of anyone in a heartbeat.
2) Tile a small picture as your background. A repeating backgound is bad on your eyes.
3) Animated gifs...A few is okay, but having a ton on your page is a big no-no.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Mar 11, 2005 12:09 am
More tips guys! Please! Frames are not a good idea for a text heavy site. Why? 1) the information within a frame will not come up in a search engine and 2) you can't bookmark the specific info inside a frame
Flash is a fantastic tool, but is not appropriate for many situations. Keep in mind your websites aim and target audience when considering Flash. As with frames, text in a Flash site will not appear on a search engine, and many people don't have or dislike Flash based or Flash heavy sites due to the loading times. In general, Flash should really only be used for image based sites (such as a portfolio), or sites for large companies that don't need to care about people who can't access their site.
If you're making a site for someone else, don't forget to include a link back to your site or portfolio in the footer or somewhere else appropriate.
After you've finished a design, relax your eyes and pay attention to where they drift on it. Its a subtle thing, but if your viewer's eyes keep wandering to your neon green background when reading your content, they're likely to not be paying a huge amount of attention. I find header -> navigation -> content -> footer a good order to go in, so try to make the elements of your sites guide the eyes in roughly that order.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Mar 18, 2005 11:22 am
Current standard site size is( as noted by my college anyway): 760 X 420
Do no shift elements!
Navigation should be in clear view/ side or top.
Test in I.E., Safari, Netscape etc.
Limited/ Good graphic download time. Use HTML tables for alignment as it will make your site appear much neater and professional.
Frames seem to no longer be desired by some people. Use navigation bars instead of them, they look much neater.
Make sure body text is easy to read and does not clash with the background image or color.
Try to have a consistant theme/ layout throught the whole site.
Scrolling pages are annoying. If they scroll to the bottom have a scroll link back to the top.
Make the scroll bars easy to see, no white/white or black/black for exmaple.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Wed Mar 23, 2005 7:45 pm
`Always pre-code and pre-make your Layout and information beforehand so that there are not "dead links" and a really boring navigation.
`Make font and whatever BG you have contrast enough so that people can read it.
`Experiment your layout on both common screen resolutions.
`Don't go effing crazy with fancy java/flash/whatevers. Keep in mind that some people are browsing on 56k. wink
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Reply
