HARDAGE + HARDAGE

We build shopify sites for the finest small businesses in the world

In Austin, TX, and everywhere.

Preparing for your project start date


 

We have a content-first design philosophy.

Even though many parts of your site will be built to be editable by you, collecting real content to use in the design mockups inspires me to design sites that are more interesting, meaningful, and better tailored to your brand voice and products.

 
Designing a website before determining a company’s essential content is a misstep that can offset strategy and waste time and money. As described by Rian van der Merwe, ‘If we design before we have content, we effectively create the packaging before we know what’s going to go in it. And if the content doesn’t fit the package, there are only two options: start from scratch, or try to jam the content into the existing package. We don’t want that.’ Instead of forcing content into a pretty design, the design should be created around the content to highlight the most important information in a meaningful way.
— Chris Johnson, Circle Studio
 

Still, since so many parts of the site will be changing frequently, why is it so important that we begin the design process with launch-ready text and photos? Why not just save time and use placeholders?

 
Why do we use Lorem Ipsum… in our wireframes and prototypes? Because it quickly plugs the gaps in our emerging designs and lets us crack on with the next feature or page template. We’ve all done it. The problem with Lorem Ipsum is it conveniently fills the available space like an expanding gas. Unfortunately, it is inert, meaningless and lacks context, revealing very little about the relationship between the design and the content.
— gathercontent.com
 

Using placeholder content is the reason some sites with the most gorgeous mockups can end up looking like an overworked mess by launch day!

 
  See how nice and tidy the box on the left looks with simple placeholder text? When real content is applied (box on the right), it naturally reveals spacing problem with the design. This issue could have been an easy fix during the design stage, but using placeholder content in mockups masked the problem.

 

See how nice and tidy the box on the left looks with simple placeholder text? When real content is applied (box on the right), it naturally reveals spacing problem with the design. This issue could have been an easy fix during the design stage, but using placeholder content in mockups masked the problem.

 

Important: this doesn't mean that the content you send has to be perfect, just "launch-ready." To me, launch-ready means that if we made it public, everything would be acceptable/correct.

 

After lots of rounds of revision and careful approvals, we plugged in the real content into the live site and saw quickly that everything looked too floaty and weird.

Without the straight edges tinted backgrounds provide, there was no structure.

Adding a border after the fact made everything look super busy. The text looked off-center without the bounding line of the photo’s edge, and the status badges (like "new" and "sold out") looked broken without the photo borders to interact with.

All fixable, except it ended up costing a lot of extra time. Using the real stuff just takes care of all these fiddly issues painlessly!

Photo size and dimensions.

Good question! I can work with whatever type of content is the easiest for you to create consistently and looks the best with your products. If you're not sure or don't have a preference, go with square around 800 x 800 pixels. Easy!

Using old photos as placeholders.

"I'm in the process of redoing all of my photos!" We hear that a ton! Since it always seems to take more time than expected to gather photography, we get lots of requests to proceed using old photos temporarily. Just as with text, though, using placeholders has a way of backfiring and killing our timeline! 

An example: I agreed to use old photos on a recent project because the new ones were expected to be almost exactly the same in style. But, that changed when the photographer came back with even cuter options!

I had designed around photos with an off-white background, which have a visible edge that provided a natural division next to the other kinds of content on the page.

Photos with a visible edge require fewer dividing lines and call for a different, less structured design than those where products "float" on a pure white field. 


 

Content Checklist: the Great Eight!

  1. Your logo and other branding assets like a secondary mark, spot illustrations, or patterns. In vector format, so everything will look nice and sharp on retina screens. (.AI or .EPS is great.)

  2. Launch-ready photos for the hero images or slideshow images you're envisioning for the home page, with optional captions or a few words of description. (I may or may not use those depending on the look and feel we want, but they're still helpful to have.) No need to crop or worry about specific sizing, though horizontal orientation for this space is the most useful. Reference inspiration sites to get a feel for proportions you like and that are realistic for you to produce.

  3. A working list of your information pages. (e.g. About, Contact, FAQ)

  4. A working list of product collections (and subcollections, if applicable). If you're envisioning a layout with top-navigation rather than sidebar navigation for your product categories, a good rule of thumb is have no more than 7 categories. (Though you don't have to decide this detail right now.) Keeping joined names like "bath + body," or "desk + stationery" to a minimum is a good idea. Clear, single word or single phrase collection names are usually the best.

  5. Complete product listings for 2-4 products. That means: product name, price, description, options/variants, and all photos. One or two simple items and one or two complex items are ideal, if you have varied products. 

  6. Copy and photos for info pages that are in scope. If you opted to include custom design of information pages like "About" -- please send launch-ready content for those pages. These should be outlined in your Bidsketch proposal.

  7. Any special copy for your contact page, if you'd like info there beyond a simple name/email/subject/message form.

  8. Copy for essential info pages that are not outlined in scope. Even if we aren't slated to do the design work for your info pages, it's useful to see what content will need to appear on the site before launch. We'll likely help set up a page or two just to make sure the default info pages are working correctly and nicely formatted.
 

 

My content is ready for you to design with! How do I send it to you?

There are a few options! Please be on the lookout for an invitation to a Basecamp project management site we'll be setting up for your project. You'll get a link to a special message thread named "CONTENT" where you can stash all of your text and photos for me. Please note, this is JUST for the content requested in the list above (the great eight!). The rest of your products and site content will be added directly to Shopify.

If you have an existing site that already shows launch-ready content, you can send me a combination of assets and links to your existing site.

Prefer dropbox? That works, too! You can invite me using the email address: laurenhardage@gmail.com. Please make sure to label the content according to the list above so I'm not digging through tons of folders. ;) 

thank you! xo

 

Lauren

  

H & H

     

Zak