BRIEF NOTE: If you are working on a page within a sidebar navigation scheme (left-hand side), the horizontal space you have to work in will be shorter than a page that doesn’t sit in a navigation scheme.
SINGLE IMAGE DISPLAYS
Basic image (cropped in online image editor, to act as a visually pleasing banner, can animate)
IMAGE POSTER (can use online image editor, can animate, add a title / subtitle, and button)
CHOOSE WHAT DISPLAY TYPE…
…best fits your content. The key to using design effectively with your information is to describe as much as possible in as few words as possible. Catch their eye and catch their attention! If you show too much here, a viewer may gloss over the info like a paragraph.
IMAGE OVERLAP (can use online image editor, can animate, add a title / subtitle, and button)
good germs vs. bad germs
Using witty or attention-getting titles and subtitles will work wonders at telling your story and sharing your culture… be creative!
IMAGE CARD (can use online image editor, can animate, add a title / subtitle, and button)
IMAGE CARD TITLE
This is used on the homepage currently as your highlight sections. I would make sure you crop each image you use in this design to the same ratio in the image editor (or similar without cutting out important parts!) so all the cards appear the same size-wise. If you use an image card display in a page with the left-hand navigation, your text here will likely appear pretty small! There isn’t really a way around this. I would recommend since we’ve reserved this particular style for the homepage, that you primarily use it there unless you don’t have much text here!
COLLAGE (can use online image editor, can animate, add a title / subtitle, and button)
KEEP PLAYING WITH DIFFERENT STYLES
You don’t always need a subtitle or a button. If your content isn’t looking right, try rethinking what goes in the heading, subtitle, or paragraph details! How can you word things so your viewer will interact to learn more? Click through to more pages? Scroll down the page?
INLINE IMAGE (can use online image editor, can animate, add details and text links)
STACK (can use online image editor, can animate, add title, subtitle and button)
If walls could talk…
We certainly wouldn’t want them to whisper. Otherwise we would look so silly all pressed up to the edges of a room!
Don’t be afraid to use large images and bold headings! The more you use them throughout your site, the more normal it will feel. Also, awesome imagery is key. A picture is worth a thousand words and all that… Not all of your pictures will be stunning, but it’s worth it to take the time to find some that are! You can certainly use images displayed smaller like this, in a sort-of column setup. Each story you tell will likely need to be displayed a little differently, depending on the number and quality of images, the amount of detail, the amount of pages it could be split into if needed, the length of content, or even just the different “chunks” of content. You can display each “chunk” differently and make the aesthetic interesting, but it does require creativity and an eye for design as well!
