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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.