Qwilr Page Design Tips
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.
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).
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.
Tip #6: Image Spacing
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:
Tip #8: Enumeration
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:
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!
- The Qwilr Digital Design Team