dorien blue website guide


Additional Resources


Cargo has a wide repository of tutorial videos that go more into the nit and grit of designing and editing a Cargo site. What we provided above is more of an overview of the main things you need to know in order to upkeep your site.

You can find the Cargo Tutorials here.
















General Notes


Your website is formatted like a Google document. Without any formatting, lines of text will go across the whole page and you use enter to create vertical space.



Typography


The typeface used throughout the site is Minion-3. There are roughly 3 typography size distinctions that we use throughout the site. They are labeled as H1, H2, and body copy. You can see the relationship between these type sizes below and in action on the About page. There’s one more type on the site that’s only used on the Archive page. It’s represented with an “s” for small.

These settings automatically apply to the typography throughout the site, but you have the ability to directly change the typography on each page without impacting other parts of the site. You can refer to this Cargo tutorial to learn how to edit the typography.



Imagery and Videos


Your site primarily uses two image ratios, 2:3 and 9:16. All videos are formatted to a 9:16 ratio.

When possible try to keep images sizes to 1MB or below in order to reduce the time it takes for the images to load.












Big Titles

H1

Subtitles and Text Callouts

H2

Paragraphs and sentences
Body copy

Archive page links
small copy





Work Page


We described the layout of your work page as a waterfall. It consists of interspersed words, images, and gifs separated with generous negative space. To achieve this formatting, we used the Overlay and Irregular gallery styles built into Cargo.

The Overlay gallery style gives you the freedom to scale and place elements however you wish. We didn’t use a single Overlay gallery to create the work page because sometimes the gallery glitches the messes with the placement of your images, and there’s no single instance undo in Cargo. You can only undo back to the previously saved version of the page.

The Irregular gallery style provides a grid structure for consistent image placement and the opportunity for layout variation and image scale control.



Adding Text Callouts and Images


While they look like typed text. Callouts on the Work page and throughout the site are actually images.

  1. Write the text you want as the Callout in a graphic editor like Canva, Figma, Photoshop, or Illustrator. Export the text as PNG with a transparent background.

  2. Upload the image into Cargo.  

  3. Drag the image from the side docket into the website workspace. Highlight the image, click the gallery button at the bottom of the side docket, and select the Overlay gallery option.  

  4. Drag the text image to where you’d like it.



Scaling Images and Adding Captions


Use the image feature tool to change the scale of an image and add a caption. Scaling the size of the callout to match the other callots on the site is an approximate science. Larger callouts are typically around 50 and shorter, square callouts are around 30.

  1. Add new images to an existing image by dragging the image over the gallery until you see a dashed rectangle appear then release your cursor.



Creating an Image Overlay


To create an image overlay, you have to combine the Irregular and Overlay gallery together.

  1. Start by creating an Irregular gallery using the image you want as the background. Follow the steps for creating an Overlay only when you click the gallery button, then select the Irregular gallery option. With the Irregular gallery, you can align the images to the center, top, sides, bottom, or corners. For your site, we align the images to the right, left, or center. 

  2. Scale your image to the size that you want.

  3. Drag in the images you want to overlay into the workspace above the Irregular gallery.

  4. Highlight the images and turn them into an Overlay gallery.

  5. The Overlay gallery allows you to place images wherever you want but it has a starting point that’s identified by a blue dotted line. You can see this line when you hover over one of the images in the gallery.

  6. Using the crossed arrow symbols drag the dotted line down until it is two lines above the Overlay gallery. You can also use the enter and backspace keys to remove spacing between the Overlay and Irregular galleries.

  7. Drag and place the overlaid images where you would like them



Removing Existing Elements


To remove an element simply highlight it and hit backspace/delete.



Overlay Gallery Layouts



Irregular Gallery Layouts



Adding Images



Make Overlay Gallery



Scaling Images and Adding Captions



Make Image Overlay







Project Pages


To organize and display projects, there are five main types of content pages:
  1. text and images for long-form writing 
  2. only text for writing fragments 
  3. video and text for music and motion work 
  4. alternative text and image layout for music and mixes that don’t have video 
  5. only images for photo galleries

Currently, all of these project pages are in use on the site. If you ever need to make a new type of project page, start by duplicating the existing project page type that you need and editing the copy. Listed below are current projects that use each of the page types.

a million holy pieces — video and text
Homebodies — text and image
push and pull — only text
nostalgia ultra (alive mix) — alternative text and image
portraits — only images



Duplicating Project Pages


Make sure you’re on the website homepage. The right sidebar should say Content and Design at the top, and there should be a list of all the pages on your site.

  1. Find the project page type that you wish to duplicate.

  2. Hover over the project name and an arrow pointing downward should appear to the right of the project name.

  3. Click this arrow and in the dropdown menu that appears select duplicate.

  4. Rename the project page.




Duplication Project Pages





 
Running on Cargo