Site Design Best Practices
Here we have all the details you will need regarding your site design. If you hit any walls or can't figure something out, let us know and we'll help you get on your feet.
Table of Contents
Your website is on a responsive framework, meaning that the logo will change in size depending on what device and what size window/device the user is browsing on.
You'll need 1 large version of your logo saved out with the template provided below (fig 01a). Try to fit your logo as big as you can in the attached template, and save as a png. Remember, this is your logo at twice the size it will actually display on the website. It’s twice as big here to accommodate for retina displays.
Specs: 106 px high and no wider than 400px
Step 1: Download the newly resized .PSD Template. This will make it scale to fit the nav header placement or anywhere else on your new site.
Step 2: Upload the logo to the Images tab in Radmin under "Logo URL"
This logo fits better with responsive resizing. If you don't input a mobile logo, your site will simply keep the regular logo and it will resize
Specs: We recommend the same height as your current logo but square, so 106x106.
Setup: Upload the logo to the Images tab in Radmin under "Mobile Logo URL"
These are the different sized versions for different locations where your logo appears.
Step 1: Upload these in your assets
Step 2: Input the links in the comment section of the corresponding Asana Design task so that we can upload those for you
Our color palette breaks down into two core groups: base and accent (fig 02a) in order to delineate between page/content hierarchy and points of user interaction (navigation, call to action, etc)
The example base palette (fig. 02b) has a balance of dark and light shades of grey. If you browse the demo site, you'll see that
Header/Footer areas are always dark grey background
Main content areas are light grey background
This is a deliberate design decision to help the user clearly orient themselves within the different sections of each template. While the base colors themselves can change, the contrast between the two sections cannot. Any variation that doesn't have a very obvious contrast between the two sides will result in a less intuitive hierarchy and a lack of organization for the site (fig 2c.i.).
And, if you would like the darker base to be a navy blue, make sure the navy blue is around the same level of darkness as the grey (fig. 02c.ii.)
Lastly, you'll notice the base color palette also contains white, and not as one of the two dark and light base colors. We use this often on hover interactions, to put sidebar modules on, and for grouping information (fig. 02d). Why bring this up? Because we want you to use something other than white as your light base color :)
Enough base talk, lets talk accent colors-- the fun stuff. These colors are sprinkled throughout the design system to identify and group together specific types of interactions, calls to action, and general content separation and detailing. By grouping and arranging colors we are introducing some clear cognitive hooks for users.
You’ll need to choose at least three accent colors for three different types of interaction around the site. As you can see in our example palette above (fig 02f) we have 6 colors. You can too! Below, we break down some of the places where you see accent colors.
01. Navigation & Function
Global and functional navigation around the platform (fig. 02g). Think search, view toggle, dropdowns, add to MyXXX, etc.
02. Call to Action / Site Activity
This grouping covers things like the Win or RSVP buttons, and visual elements around user activity like listening to music, following a band, or committing to a show. (fig. 02h)
03. Offsite Linking
An edge case, but there will be more in the future. This grouping is to articulate any activity done on the DoXXX platform that will send a user elsewhere on the web to help get them to an event. Right now this is only the Buy Tickets button (fig. 02i)
States: Static/Inactive, Hover/Tap, Active/Focus
Note that in the first view of our color palette, each accent color has 3 states to it. To make life easier, we’ve handled both the static/inactive state and the active/focus states in code. This means you should pick your accent colors carefully in their brightest state. (fig. 02f)
To best determine base and accent colors here is how it would look like in the Colors tab in Radmin:
Fields you can edit:
Base colors! Choose your palette of dark, light, and white.
Accent colors (the confetti) with all locations clearly designated. For more guidance, see this screenshot and note that the 4th accent color is not yet included.
NOTE: You'll want to use your new CSS editing capability VERY sparingly and ONLY for colors. Making layout or positioning changes (like you could with your old site) will make it impossible for us to keep your new site updated as we make changes to improve it once rolled out.
Choosing your core font(s) is a very important decision. Take your time, have a designer explore options, and chat with our team as you go through the process. The default Open Sans and Open Sans Condensed.
Headlines, navigation and functional buttons all use the condensed version of the font (fig. 03a). By keeping all these elements in a condensed font, it allows the platform to be much more flexible with different screen sizes and devices.
In the example we’ve made all headlines (event titles) in all caps to gain some consistency and make the site easier to browse.
We use the non-condensed version of the font for all body copy or text that isn’t ‘functional’ or ‘headliney’(fig. 03b) because we have more room to work with in these areas and the text is meant for reading rather than skimming
Step 1: Choose a font family wisely. Your options aren’t unlimited, you’ve got to use a web-enabled font family. You can pick fonts from services like google fonts and typekit to avoid expensive licensing costs.
Step 2: Have your designer play with fonts you might want when testing the colors, and once you pick a web-ready font-- link it up!
Step 3: Include the font link.
Step 4: Include the Regular Font Family and Condensed Font Family (both fields must be filled).
EX. Font Family 'Open Sans', sans-serif
EX. Condensed Font Family: 'Open Sans Condensed', sans-serif
If you have purchased a custom font, the top field is where you enter the full path to the font that you should have received. Otherwise, you can leave blank.
The regular and condensed font family must be entered. The family can be found easily in either the Google or Typekit font CSS info.
04 Header Image
The header across the top of your site behind your logo and Latest/MyXXX/Search navigation should be a customized image that reflects your city and scene.
Setup: Upload the file to the Images tab in Radmin under "Header"
05 Default Images
The Cover Image is the image that shows at the top of your event, artist, venue, and user/list pages. It is a big space to better showcase quality images. When an image is not uploaded relevant to the page, a default image you assign will appear in that space.
A default image is assigned to an artist, venue, or user/list page if none has been selected through a media search or manually uploaded. It also shows at the top of your "Latest" and "Search Results" pages.
What You Need To Do:
Select a default image or group of default images that fit with your city/scene design theme.
Setup: Upload the file to the Images tab in Radmin under "Default Hero"
06 Image Mask Texture
You can choose a texture overlayed on top of images to give the nice background effect you see on other Do sites (fig. 06a). The example is a simple duo-tone style overlay that subdues contrast and gives a euphoric look to the background imagery. Yours could be some simple film grain or noise, some scratchy effects, etc. We advise keeping it simple or going with nothing at all.
*1000px by 1000px
Step 1: Have your designer explore in your design comps and once you’ve arrived at a decision, have ‘em save save it out at 100% opacity, as a .png, and pop it into the site.
Step 2: Upload the file to the Images tab in Radmin under "Background Texture URL"