Working with Images and Copy

Now that you have setup the kit’s demo pages, you can start updating the site with your own content. Black Onyx design kit has several customizable elements, where you need to add your images. In the folders you've received they are named as 'Covers', while in Squarespace you would need to update them in areas dedicated for 'Banners' or "Thumbnail media'.  You will need Photoshop to add your own images to the covers. We have prepared a video where we cover the principles of working with these files in Photoshop and saving your own covers. 

But before that, there are several things to remember when Working with Images for digital use: 

    1.    Resize your Images

Make sure to resize all of your images before uploading them to the site. For horizontal images we recommend width at least 1920pixels (if the image should be used for full width then resize to at least 2400pixels wide), and for vertical ones: width at least 1280pixels. This sizing is big enough to keep the images crisp, while also not slowing down your site’s load time.  

    2.    Save for Web

When you finalize resizing your images, choose the option Export -> Save for Web, instead of Save As. This will remove all proprietary data from the file and will result in smaller file size. 

    3.    Save as JPEG

Save all your images as JPEG, as this ensures that the browsers will render them in good quality. Unless a visual element needs to be on a transparent background, then you should save it as PNG.  

    4.    Optimize your Images

We use JPEGmini to optimize the images. You can download their trial and optimize up to 200 images before being asked to buy one of their plans. There are also other tools that you can use, i.e. https://tinypng.com

Note: Please note that some of the graphics, specifically images on section 1 and section 2 from Homepage, that are described in the video below are not relevant any longer since these can be edited through Site Styles tab and CSS code (check article Updates).

PASSCODE: blackonyx

Preparing Written Content

Good job at uploading your own images to the site! You are one step away before you have all your content ready. Now it's time to work on your copy. We recommend the following process for preparing your written content:

1. Copy/paste the demo's text into a separate text document (i.e. you can use Evernote, WordDocument, Mac's Text document, etc.).

2. Estimate the number of characters for each section. There's a lot of online resources that count characters, while you can also view the character and word count in most text documents. Identify those sections that would allow lengthier text, such as About page. Other than that try to  stick to character count 

3. Establish your content strategy, replying to the following 4 main questions: Who is your Target Audience? How much written content you plan to have on the site and how often you plan to update it? (be realistic here about your time resources) If you were to break down your content to one message, which one would that be? What is your final Call to Action?

4. Start writing your own content instead based around your Content Strategy. 

5. If it's a new site, have at least 3 blogposts ready for launch. The first one can be an announcement about your new site's launch, while the next one can dive a bit more about yourself and then about your work. Don't overcomplicate it, and remember that sometimes Less is More. 

6.  When you're done, have a friend, relative, or industry peer, proofread your Content for mistakes, but also don't hesitate to ask them for feedback and impressions on the actual message of the content. Make adjustments if necessary! 

Congrats on adding your content and images to the site. Check out our next article with a comprehensive checklist to prepare your site for launch.