Improve your Qwilr Page by following these design tips from the Qwilr Digital Design Team!
Tip #1: Hero Block
Hero block is the very first block that your customer will see when they open your Qwilr page. Make sure your page title and additional information are easy to read and does not overlap with similar colors as your texts.
Instead of this:
Splash image is colorful which makes the texts difficult to read
Do this:
Add a bit of dark tint to the splash block to help the texts pop out and easier to read.
An additional tip is to set the spacing to Full so the block expands to your screen height.
If you don't want your whole block tinted, you can also use our background card feature. This only covers the text area instead of the whole block as shown below.
If your design is on the right side, you can use our 2 column feature so your texts stay on the left side and won't overlap with your design.
You can also leave your texts left aligned as shown below, instead of moving them to the center.
Tip #2: Splash Blocks
(Image)
1. Splash Image Adjustment
Splash images adjust from the center / middle, moving outward. Make sure faces or elements are in the center / middle, so they won’t get cut off.
In the mobile view, the center area is the part that is always captured. Its width will adjust depending on the mobile screen size.
2. Content
A splash block will slowly extend from Landscape to Portrait, depending on the content that will be added to the block (e.g. a lot of texts, combination of texts and images or videos, several accordions, etc.). There's a chance the landscape size background image will zoom out and pixelate if used on blocks with a lot of content.
Solution: If the Block has a lot of content, use portrait background images to accommodate the vertical layout. If the block is landscape, use landscape background images.
Qwilr designers often use the 1920 x 1080 px (or higher) image size, then adjusts the height to become portrait version, depending on how it looks in the Qwilr Page they are working on.
In below example:
The landscape block work well with landscape background image for full or 1/2 spacing.
The portrait block will ignore the full or 1/2 spacing once it extends beyond the height of your screen.
3. Background with Texts
Do not use images with texts as splash backgrounds, there’s a high chance it will be cut off depending on the screen size (e.g. mobile, tablet/iPad, smaller or bigger sized monitors).
You can use the background in the splash block, then add the texts and additional image by using the 2 column feature. This design will be responsive to mobile version as the 2 column will re-adjust to top (left column) and bottom (right column) layout.
You can also use the background with the people in the splash background, then add the texts by using the 2 columns. Leave the right column blank so it won't overlap with the people.
This design will be responsive to mobile version as the 2 column will re-adjust to top (left column) and bottom (right column) layout, HOWEVER, the splash background will only show the center area of the background image.
In addition:
If you want to achieve below look for the web version but doesn't want it to show in the mobile version as cropped, you can adjust the image (people) more to the right to occupy only 1/3 of the background (gradient) width. This way, it won't get captured in mobile version.
Tip #3: Splash Blocks
(Video)
1. Splash Video Adjustment
Splash videos adjust from the top - center / middle, moving outward.
Full or 1/2 Spacing - the video will adjust the same as Splash Image. See example below.
NOTE: In the mobile view, the center area is the part that is always captured just like the Splash Image, however the video will stop playing, and instead will show the video thumbnail.
2. Background with Texts
Like in splash images, do not use your explanatory videos with texts as splash video backgrounds, it will be cut off depending on the screen size (e.g. mobile, tablet/iPad, smaller or bigger sized monitors).
If you want to add your videos, you can use our Video Block or Inline Video feature. Here's how.
Tip #4: Colors
Placing contrasting colors as background and texts
Check our chart below to see some good and bad examples of background and text color combinations.
Tip #5: Text Hierarchy and Readability
Visual hierarchy is crucial for any design –
when done right, it makes the design stronger and more effective. In today’s article, I’ll review the concept of text hierarchy, the best practices, and explain its impact on the reader. So, let’s hop to it.
In short, text hierarchy helps us present the content in an organized way so the audience can have a seamless and intuitive experience with it.
Here is the basic classification of the text hierarchy:
Heading
Subheading
Text body
There are several factors that help establish visual text hierarchy: size, weight, style, color, position, type, and spacing. Two or more of these factors are usually combined. Let’s review each of them.
Size is the most natural marker of creating the hierarchy. Bigger texts means it is more noticeable and more important. Headlines are usually displayed in 65px or bigger and lead before subheadings and paragraph body text. The latter normally gets about 40-20px as a size.
Font weight also organically creates a text hierarchy. Heavier fonts have a stronger presence. That is why they are usually used in the headlines, while regular and thin fonts have a more neutral and elegant appearance. Their thinner strokes don’t draw as much attention, so they are perfect for body text.
When you take advantage of different font styles, you can also create a good hierarchy for your text. For example, an All caps style tends to look stronger and more noticeable which makes it suitable for a headline. This can follow by Italic style for the subheading and regular style for the paragraph.
Color can also organize your text. The choice of color matters too and it has a lot to do with the psychology behind colors. On one hand, warm colors are more attention-grabbing than cool colors. On the other hand, the use of brand colors could help you create stronger brand awareness.
The position of the text itself can also speak a lot about the text hierarchy. Think of the CV layouts. The headlines and main bullet points position themselves on the left, which allows the reader to scan the content easier. Descriptions and text paragraphs stay conveniently on the right, right across its corresponding title.
A strong display font as a headline with a neutral easy-going thin font for the body text? Absolutely. Such a duo definitely creates high contrast and a hierarchy that’s immediately recognizable. When you use different typefaces in one design, always choose complementing types that maintain that high contrast.
Always leave a space after images. You can do this by pressing “enter” for both Mac and PC. Leaving a space will have a cleaner and more pleasant look. Here’s what they look like side-by-side:
This also applies to images:
Tip #7: Seamless Background
One amazing way to design your page is by making a background that continuously flows through the blocks. What does that mean? An example below shows the dark background flowing straight to the light background without the usual straight gray line that is present between blocks. This tip works perfectly if you want a smooth flow on your page.
Here’s how you can do this:
Make the background in Canva/Photoshop. Make a slanted rectangle (or whatever shape you desire) then stretch it across the whole canvas and choose your desired color (your brand colors are recommended). It should look something like this:
Add a splash block and upload your background.
Match the color of the next block with the previous block. It would look something like this:
You can continue with the continuous effect by making another background but this time, reverse the colors used.
Make sure to use another splash block after the first one, as you will upload your second background. The blocks will look like this:
There are a number of ways you can enumerate your items through Qwilr’s design capabilities. Here are some examples and how you can do them:
Accordions
The best way to enumerate text heavy categories is with Qwilr’s accordion feature. All you need to do is click the “+” to add a line item, then choose accordion. You can play around with the accordion’s settings to satisfaction.
Two Column
There are a number of ways you can use the two column feature. Here are some examples:
The first style suits best for icons/headshots. To be able to do this, insert a two column, then drag the divider all the way to the left. Then insert your icon/headshot in the left part of the column, then the text on the other.
The next style is best with images. To be able to do this, insert a two column, then insert your desired image on one side and the text on the other. When following up with another two column with an image, it’s best to alternate their placements to give the elements space to breathe. It would look something like this:
You can play around with these features. Here are some variations:
Tip #9: Splash Breaks
Putting some headers (splash blocks) or creating splash blocks that serve as white spaces or document breaks for the eyes to rest.
Thank You!
If you need more tips, we are working on additional guides to assist you. Stay tuned for more!
