Tig's Place

Shop Design Tips

by Grace Sylvan

On the Neopets site, folks can customize their shops. It's fun to decorate, and a fun way to express oneself. Hobbies, favorite items, pets, holidays, and more can be themes of the shop.

Still, not everyone is a web designer, or even knows basic html. This will take you through some of the html you need and, more importantly, basic design issues.

HTML
Html is a special set of instructions for how to display your page. Most of the things we'll be dealing with here are very simple. Html commands start with a < and they end with a > Some html commands have two parts, the command to start the change, and then to end it; for example, to mark when to start bold text and when to stop bold and go back to normal text. Some of the common html commands are:

line break (go to the next line)
paragraph (make a blank line)
make the TEXT bold
begin centering text/graphics
end centering text/graphics
puts a graphic (image) in
puts a link to another page
<br>
<p>
<b>TEXT</b>
<center>
</center>
<img src="http://url">
<a href="http://url">Text_for_link</a>

and have a graphic (button, banner) with a link to another web page:
<a href="http://url_to_go_to_if_clicked"><img src="http://imageurl" border=0></a>

There is a great guide to html at the site Lissa Explains It All that can guide you through more of the basics there.

Basic Text
Text is pretty easy. You can use basic formatting commands like the ones above. More importantly, decide what you want to say, and keep it relatively short and simple. If you only say a few things, then your visitors will be more likely to read it.

Graphics
First thing to know is that all graphics for a web page are stored on a web server somewhere. The url (starts with http://....) describes the location of the machine, directory and file to access. The neopets graphics are on the neopets web servers. If you want to add other graphics, you'll need to put them on a web server. You might have some web space from your service provider. Or you might use a site like www.liquid2k.com, which seems to still allow linking from other sites. Some sites like Angelfire do not allow linking to graphics from neopets pages. Ask other people who have customized their shops and petpages for tips as to where you might put your graphics.

Hunting for Graphics
Unless you're building all your graphics from scratch, you'll likely be looking through clip art sites for them. So, here we start with some guidelines. If you follow these, you'll get good results.

At first you'll probably just collect a bunch of graphics that look nice to you, something from here, something from there. Just save them all into a directory, or save the urls, so that you can look at them all later. Think about themes, and think about the colors you're going to want on the page. You can use a search engine to search for graphics, using strings like "free flower clip art".

Backgrounds
Usually one of the first things a person adds is a background. I recommend using a background that is very pale, so that the text can be easily read. You can also use one that has brightly colored graphics, as long as they're along the edge of the document. Neopets has a fixed width display area, so it is possible to determine where to put things to make them located along the edges.

Some examples:
Shops with a bright border/pale center background: Clothing Gallery or Chia Gallery
Shops with an all over pale background pattern: Usuki Gallery, Purple Shop, Kathy's Shop

Note that only one of these shops (Kathy's) has an animated background. While animation can be fun, it is very important to not overwhelm the page with animation. The background is a little added decoration, it should not 'take over' the page such that the items and text on the page are hard to see.

Colors - I strongly recommended a pale background with black text. It is possible to change text color, but if your background fails to load, the page will be white, and so you should have dark text.

To put a background in your shop, use this code. I usually make that the first thing I put in, so it's easy to find:
<body background="http://www.restofurl">

Choosing Graphics
This is the hard part, you've found fifty cool things! DO NOT put them all onto your shop page. You'd probably run out of html space first, but it's important to pick only a few graphics, ones that are most meaningful. You can change them again next month, if you want to show off other finds.

Below I have some graphics I've collected for Valentines. They're of different graphical styles. In this case, a picture is worth a thousand words, so here are some pictures:

heart

I've grouped the graphics above in their most similar styles - some have black outlines, some are 3-D style, and some are photos. Now, this is a design rule that you can choose to follow (or not). The rule of thumb is to use the SAME STYLE graphics on the whole page. Picking two pictures that go together is usually better than having four that don't match.

Color and Size
Another thing designers consider is color. You might not be able to change the color of the clip art you find, but you can still think of what colors you will use - will the focus be on bright colors, pastels or a particular color set, like a blue or pink page. If you use a clip art service, you might have the freedom to change some colors in your graphics so that you can better tie the graphics together. For instance, the Club Digi website primarily uses 3 colors in all the graphics.

Also consider the size of your graphics, and if you can resize them. Some free clip art from the web has restrictions on use or editing of the graphics, and might also require credit on your page. When I get clip art from some services, it is very large, and I can re-color it and scale it down as I see fit.

Tip: If you are going to change some colors in a graphic AND scale it down, change the colors FIRST. Also, if you are scaling the graphic down, be sure to fill the background with a color that will blend with you page background before you scale it.

Page Design/Layout
Now that you have a few special graphics, maybe even a guild banner, and you've decided what you'd like to say, it's time to arrange the page.

First, keep your text short and simple, especially for a shop! People are there to shop, and will probably skip over anything that's too long to read. A gallery has more freedom, but still, the shorter and clearer you can say things, the more likely it will be read.

Look at the shop page layout. The shopkeeper graphic is located in the center, right below the market graphic on the navigation bar. Below, your items are in 4 neat columns.

A simple way to keep things looking neat is to keep things symmetrical (centered, balanced, even), and include white space (blank space) between items. Graphics and text jammed against each other are just not very nice to look at.

The easiest way to keep things even is to use the <CENTER> command, and then put paragraph markers between your graphics and text blocks. Use graphics of similar size next to each other, and put spaces between them. The various shops throughout this article have pretty good layouts along with interesting backgrounds.

Here is an example of a shop with a flower theme and guild banner - MommyTig's Shop

Now go for it
This tutorial covers only the basics of shop design, but should be enough to get you started customizing your special shop space. Experiment, try a different theme each month, and have fun!

Back to My Portfolio

You can visit Neopets!