Visual Design for GE&T | Storefront Navigation

[Tippercommon]

HOME | GENERAL DESIGN TIPS | DIRECTORY FORMATTING | BEST PRACTICES

Greetings! This is part of a new series of guides on Visual Design for Global Economics & Trade. This first installment is on storefront navigation; an essential part of the user experience of your storefront.

What is storefront navigation? It's how your prospective customers get around your storefront. It is not just a nice thing to have. In some cases, it is absolutely essential to producing a clean and easy-to-use experience. Below are design and navigation tips, as well as practical templates that you can use to step up your storefront's UI.

I. GENERAL DESIGN TIPS

---

1. Use a free third-party site that doesn't limit bandwidth. Photobucket often displays an annoying thumbnail if you aren't paying for a premium account and you hotlink one of your images. I'd recommend using Imgur or DeviantArt to host your images. You can get the image link you need from Imgur by copying the text in the BBCode field after you upload. You can do the same on DeviantArt by right-clicking your image and opening the image in a new tab. This will open your image in an isolated window with a URL that you can use for linking.
2. Use a free image editor. Using custom images and graphics outside of just BBCode can really be an asset for the overall look of your storefront. Programs you could use are GIMP (raster), Inkscape (vector), or paint.NET. It doesn't really matter so long as you get one and stick with it. If you have access to premium programs, such as Adobe Photoshop, Illustrator or InDesign, then more power to you. This series of guides will focus primarily on GIMP because (1) it is free and (2) it is what I use most outside of the Adobe programs.
3. The maximum image size on NationStates is 1800x1800px. If you post an image that is in the upper range of limit, your image will be automatically scaled to span the entire width of the post depending on the person's screen. You can use this to good effect if you want something to span the entire width of your post (like maybe a full-width header or something like that). However, I would not approach this limit height wise. You don't want people scrolling for days to see what your image is (they won't be able to see the entire thing at once anyways). So, if you are considering having larger images, I'd recommend going with longer width and shorter height.
4. Develop a brand identity and stick with it. That means making a logo, using fonts consistently throughout your posts and using consistent colors. For fonts, Google Fonts and DaFont have tons of free fonts you can choose from. I recommend finding one good serif and one good sans serif font, and picking ones with fonts of variations (bold, italic, light, heavy, etc.) so you can be really versatile with you design. Typewolf has lots of good resources like font pairings (having two fonts that compliment each other can be a good asset) and free font lists, but not everything on that site is free. As for color, pick a color you like and tools like Paletton can help you find complimentary and supplementary colors that can help you pick colors to accent your main color.
5. Bumping can look trashy - give your bumps some substance! Sometimes you need that bump to get attention if your thread has fallen to the bottom of the board. However, just posting "bump" can look a bit meh and doesn't add anything to the storefront. If anything, it takes people out of the experience. So, give your bumps substance. Use them as an opportunity to make company-wide announcements, offer new deals, add some backstory, etc. If you have to, a nifty trick that you can do if you have the most recent post on the thread is copy the post, delete the post, and then repost the copied material. This means you don't have to add an additional bump post and nothing is lost.
6. Make use of the elements that are needed, but nothing more. The point of the storefront - hopefully - is not to bombard people with images and information.
   It is to elegantly present information and create a pleasant experience for your customers. Do not use so many images that it overwhelms your reader. Don't create walls of text without adequate tables of contents and section headers to break things up and make it more readable. Remember, your product and details about your product are the bread and butter, and graphical and coding elements are supplements that make your storefront more appealing and that information more easy to digest.

Ia. USEFUL LINKS

---

• I recommend you read Maltropia's Formatting Guide and the BB Code Guide for a basic understanding of formatting and BBCode.
• The Global Economics and Trade Help Desk and Q&A is a hub for GE&T guides and a place where you can ask questions about your storefront or GE&T.

[Tippercommon]

DIRECTORY FORMATTING | NAVIGATION BAR | VERTICAL DIRECTORY | ANCHORS | RETURN TO THE TOP

II. DIRECTORY FORMATTING

---

An easy to navigate table of contents or navigation bar is one of the most crucial design elements in your storefront. Often times the first post of a storefront will focus on what the storefront is about, backstory, history, and other things that add to the flavor and depth of the business. These things are encouraged and can really add to your storefront, but at the end of the day your storefront is really about one thing: your products.

Your objective as a storefront manager is to make the navigation throughout your storefront easy and make it as easy as possible for customers to get to specifically what they want. In comes formatting a table of contents.

1. Navigation Bar Formatting

---

The navigation bar is a sleek design that mimics the horizontal navigation bars on most websites. The advantages of the navigation bar are:

1. It is more sleek and minimal than a vertical table of contents that will be taught next.
2. It can serve as a natural divider between your storefront's main banner and the content.

Here is an breakdown of what the coding for your navigation bar will look like:

Code: Select all

[align=center][blocktext][box][color=#939393]ABOUT US[/color] | [url=URL LINK][color=#MAIN COLOR]ITEM ONE[/color] | [url=URL LINK][color=#MAIN COLOR]ITEM TWO[/color][/url][/box][/blocktext][/align]

Here is an the coding for an example of a navigation bar:

Code: Select all

[align=center][blocktext][box][color=#6f6f6f]DIRECTORY FORMATTING[/color] | [url=https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#navbar][color=#275b80]NAVIGATION BAR[/color][/url] | [url=https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#toc][color=#275b80]VERTICAL DIRECTORY[/color][/url] | [url=https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#anchors][color=#275b80]ANCHORS[/color][/url][/box][/blocktext][/align]

And here is what that example looks like:

DIRECTORY FORMATTING | NAVIGATION BAR | VERTICAL DIRECTORY | ANCHORS

2. Vertical Directory Formatting

---

The vertical directory is a style more similar to the table of contents boxes in Wikipedia articles and was originally taught in Maltropia's Formatting Your Storefront guide. Advantages to this type of directory are:

1. You can order things. For instance, you can put subcategories to make certain things subordinate to others and make use of the list functionality to number the sections automatically.
2. More information/sections can be stored in the vertical directory than in the horizontal navigation bar.

Here is an breakdown of what the coding for your navigation bar will look like:

Code: Select all

[floatright][box][size=115][color=#MAIN COLOR][b]Contents[/b][/color][/size][hr][/hr][list=1][*][url=URL LINK]Item 1[/url]
[*][url=URL LINK]Item 2[/color][/url]
[*][url=URL LINK]Item 3[/url][/list][/box][/floatright]

Here is what the code for an example vertical directory looks like:

Code: Select all

[floatright][box][size=115][color=#275b80][b]Contents[/b][/color][/size][hr][/hr][list=1][*][url=https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#navbar]Navigation Bar[/url]
[*][url=https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#toc]Vertical Directory[/url]
[*][url=https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#anchors]Anchors[/url][/list][/box][/floatright]

Here is what the example looks like:

Contents

---

1. Navigation Bar
2. Vertical Directory
3. Anchors

3. Anchors

---

The Anchor command is useful for linking to multiple products that are all on the same page. You put an anchor on a certain part of the post and then you link that URL in your table of contents. The link will lead to wherever you left the tag. These tags can only be added after you have added the post so that you can know the URL. Below is how you use the anchor and how to link to it:

Code: Select all

Post URL: https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#p15922147

Anchor tag: [anchor=title][/anchor]

Resulting URL: https://forum.nationstates.net/viewtopic.php?f=6&t=255862&p=15922147#title

4. Return to Top

---

Do you have a really long post? Like, really long. Like, you've spent the past 3 years making a product page? You may want to incorporate a "Return to Top" function that allows customers to return to the navigation bar. The breakdown of the coding looks something like this:

Code: Select all

[floatright][size=70][url=POST URL]↑ Return to Top ↑[/url][/size][/floatright]

And here's what that example looks like when we add a post URL:

↑ Return to Top ↑

You can use these throughout your posts if you have a really long post, or put them at the top of every post in your thread to allow your customers to return to the first post home page. It's all up to you and your personal taste.

[Tippercommon]

III. BEST PRACTICES

---

• Always have some sort of table of contents. Your customers need some means of finding their way around your storefront. Forcing them to scroll through things that may or may not be relevant to them is not the way.
• It is all about the experience. Ever notice that the only CGI (computer generated imagery) you notice in movies is bad CGI that forces you out of the experience? You're not selling fancy graphics with your storefront, you're selling your product and trying to get people to post. Huge graphics that, while visually stunning, can take away from the experience and make your storefront harder to navigate. You're trying to create an experience, where people are naturally drawn to your storefront because of (1) interesting products and (2) a visually attractive and easy to use interface.
• Don't overwhelm your audience with information and imagery. This plays into the bit about creating an experience. Don't overwhelm your audience will walls upon walls of text. Use section headers, color, imagery, and graphics to segregate your posts, make them easier to read and make them more visually appealing. At the same time, don't overload your audience with images of your products or branding. Images and graphics are supplements; use them strategically and they will really pop when you do.
• Always try to innovate. Don't settle for basic things like tables of contents and what not. If you have ideas or draw inspiration from other websites for how you can step up the visuals and interface of your storefront within the confines of BBCode, go for it!

[Reino do Brazil]

How can I pu text in front of a picture, not underneath or above. Thanks

[Aurora Confederacy]

if you mean using the picture of a background, I dont think you can do that here, you will need to do the entire thing in a photo editing program

[Reino do Brazil]

if you mean using the picture of a background, I dont think you can do that here, you will need to do the entire thing in a photo editing program

nop just writing in front of an image then the text, the text usually appears under the pic.

[Aurora Confederacy]

or do you mean like this?

---

or this

[Tippercommon]

How can I pu text in front of a picture, not underneath or above. Thanks

If you're talking text overlayed [i]over[i] an image, you can't do that with BB Code.

[Reino do Brazil]

How can I pu text in front of a picture, not underneath or above. Thanks

If you're talking text overlayed [i]over[i] an image, you can't do that with BB Code.

Thanks both of you, will try.

[Ceni]

But you can do that in a photo editor, and you can upload the image and post that.

[Czechovelkov]

Check out my storefront, I sort of had to improvise because my PC broke, and I had to make the content on my mums laptop, which I couldn't use all the time.

[Insui]

Can I use a picture as a substitute for the text on a spoiler? Thx in advance.

[Maltropia]

Can I use a picture as a substitute for the text on a spoiler? Thx in advance.

Cool though it would be, you can't. Spoilers won't even accept apostrophes, for crying out loud.

[Insui]

Can I use a picture as a substitute for the text on a spoiler? Thx in advance.

Cool though it would be, you can't. Spoilers won't even accept apostrophes, for crying out loud.

Aww

[Insui]

When refreshing a storefront, is there a way to delete others posts?

[Ceni]

When refreshing a storefront, is there a way to delete others posts?

No.

[Aurora Confederacy]

When refreshing a storefront, is there a way to delete others posts?

you can ask a mod to do it if they are feeling helpful.

[Insui]

When refreshing a storefront, is there a way to delete others posts?

you can ask a mod to do it if they are feeling helpful.

OK thanks!

[Jenassa]

Thank you so much for such a well-done guide;

STILL, i don't understand a thing:

When talking in the section of BB Codes, i don't get how exactly i take the url to place inside its BB code and make it works for a lower part of the same post.

For example, i own this Storefront, and i want to add in the upper section the Race selection, and then make it redirect down, where the races and prices resides.

viewtopic.php?f=6&t=266815

Can... can i have an help, please?

[Insui]

Thank you so much for such a well-done guide;

STILL, i don't understand a thing:

When talking in the section of BB Codes, i don't get how exactly i take the url to place inside its BB code and make it works for a lower part of the same post.

For example, i own this Storefront, and i want to add in the upper section the Race selection, and then make it redirect down, where the races and prices resides.

viewtopic.php?f=6&t=266815

Can... can i have an help, please?

Can I take this one? Huh? Ok?

Im assuming you mean you want to add a url that jumps to another post?
If so what I do is I right click on the numbers at the top of the post near the "Quote" and "Edit" buttons and click copy url ( or something like that) and then put that url in the "URL" tags.([url][/url])
I then conjure up some random link that has to do with that post. For example, When I reformatted my Storefront(which is in WIP once again and has no customers yet) I wanted to add a table of contents. The products button makes the page redirect you to a lower post on the page. If you want some hands on go to my storefront and quote my first post. You can then see how and what I did.

I'm pretty sure someone else can make this easier on you.

LINK: www.ETC.com/en-us/Home.html

[Maltropia]

I think this might be the relevant section of this guide to explain how to link to sections within a post.

[Jenassa]

Oh my...

How in the world i've not seen it? :I

Thank you and sorry for the disturb.

[Aurora Confederacy]

can someone tell me why I am getting a large gap above tables please and how to prevent it please, as when I started to add the field data into the tables I suddenly end up with 9 lines worth of unusable space above the table.

[Ceni]

You're probably having a space between actual content and the table tags, or entering after a new row. Run everything together with table tags.

[Aurora Confederacy]

aaah.
unfortunately I needed to have several lines in one cell.

Done things *slightly* differently by listing the destinations instead.

Thanks anyway.