EDITS.WS

Tag: Useful Tips

  • How to Create Timelines in Web Design: Use Cases and a Tutorial

    Timelines are a popular design element in web design that enable designers to display a sequence of events or information in a visually appealing way.

    Using timelines in web design is a structured way to present content, thus making it easier for users to digest information. In this article, we’ll present various types of timeline designs, best practices, and a step-by-step tutorial on how to create your own timeline layout on WordPress.

    Types of Timeline Designs and Examples

    There are several types of timeline designs to choose from, each suited to different content and design preferences. Here are some popular options:

    Simple Vertical Timeline

    Vertical timelines are ideal for presenting a series of events in chronological order. They work well for historical timelines, project progress tracking, and personal histories.

    Like the example above, it shows a timeline of social networking sites and their years of establishment.

    Interactive Timeline

    Interactive timelines engage users by allowing them to click or scroll through events for more details. This format is excellent for storytelling, as it encourages user interaction and exploration.

    In the example, the timeline shows a very brief history of a company with image boxes that provide a button for users to click.

    Chronological Timeline

    Chronological timelines strictly adhere to a linear sequence, making them suitable for historical events, biographies, highlighting milestones, and other content where the order of events is crucial.

    Step-Based Timeline

    Step-based timelines break down processes or workflows into manageable steps. They are commonly used for tutorials, instructions, and project workflows.

    Best Practices for Using Timeline Designs in Web Design

    If you are thinking of adding a timeline to your website, it’s easy to make some mistakes and miss the opportunity to engage your website visitors. To make the most of timeline designs in your web projects, follow these best practices:

    1. Use Clear and Concise Labels

    Ensure that event labels and descriptions are clear and concise. Use descriptive titles and provide additional information when necessary to maintain clarity.

    2. Keep it Simple

    Simplicity is key. Avoid cluttering your timeline with too many events or details. Focus on the most important information to maintain a clean and engaging design.

    3. Ensure Responsiveness

    Make sure your timeline is responsive, meaning it looks and functions well on both desktop and mobile devices. Test your design across various screen sizes to ensure a seamless user experience.

    4. Incorporate Visual Elements

    Visual elements like icons, images, and color coding can enhance the visual appeal of your timeline and help users quickly identify different types of events or milestones.

    5. Maintain Consistency

    Consistency in design and layout throughout your timeline helps users navigate with ease. Ensure uniform spacing, fonts, and colors for a polished look.

    How to Create a Timeline Layout

    Creating a timeline layout for your website doesn’t have to be a daunting task. There are various tools and plugins available to simplify the process. If you’re using WordPress for your website, you can easily add timeline functionality with plugins like “Timeline Express” or “Cool Timeline.” These plugins offer customizable features and a user-friendly interface for creating and managing timelines.

    However, if you’re looking for a more all-around solution, then you might want to consider Stackable! Stackable is a versatile plugin for WordPress that offers a plugin library and multiple features that extends the WordPress Block Editor’s functionality.

    With Stackable’s Timeline block, you can create stylish and responsive timelines with ease and we’ll show you just how to do that!

    Install and Activate Stackable

    From your WordPress dashboard, navigate to Plugins > Add New. Search for Stackable in the search bar and it should show up as the first result. Click the Install button and then click Activate.

    Create Or Open A Page/Post

    From the dashboard, hover over Page or Post and select Add New. First we have to name the page, in this case, we’re naming it “A Year in Review”.

    Next, we’ll start adding some details for our page. We added the Columns block and selected the 50 / 50 layout. In the first column, we’ll add our text and it’ll be the same as our page’s title. For the text, we selected a dark blue color. Additionally, we have to make some adjustments on the column’s layout to make it look more seamless. Selecting the first inner column, we headed to Layout > Block Size & Spacing and set the Max Content Width to 330. On the right column, we’ll add some text and adjusted the Max Content Width of its inner column as well; this time, we set it to 250.

    After that, let’s select the whole Columns block and navigate to Layout > Layout and locate the flexbox controls. We’ll select the Center option for both Column Justify and Column Alignment. Then we’ll set the yellow bottom margin to 100 to give ample space from this block and the next block we’ll add below this.

    Now let’s add a new Text block and here we’ll input the text “Scroll down to see more”. Afterwards, let’s add the Icon block and select a downward facing arrow. We also changed the color of this icon to dark blue. We removed the yellow bottom margin for the text, then selected both blocks and merged it inside a Columns block. We also aligned it to center. Then going to the Advanced Tab, we’ll navigate to the Motion Effects panel to add some animation to this block group.

    Selecting Entrance Animation will give this block an effect of appearing once the page is loaded. We set the Vertical Position to 100. and added a 1 second entrance animation delay.

    Save our changes and let’s preview our design so far!

    Adding Our First Timeline Point

    Now let’s add our first timeline point. Add the Timeline block by typing in “/timeline” in the content area. Then we’ll make some typography changes by heading to Style > Typography. Click on the Typography icon and here we can change the Timeline’s font. In this tutorial, we’ll use the Yeseva One font which is a Google font. We also adjusted the size to 20 pixels to make it larger.

    Next, we’ll just adjust the Timeline’s colors, specifically, the line that connects the different points of our timeline. For the Timeline background color, we selected a dark blue color, and for its accent, we selected a lighter or muted teal. Now all that’s left is adding our content. On one side, we’ll add the month and description, and on another, we’ll add a picture.

    Let’s hit save and preview how that looks in the frontend.

    That’s looking great! Now we’ll move on to adding more points for our timeline.

    Adding More Points to Our Timeline

    To make additional timeline points, we’re going to duplicate the first block that we made and replace the content with the appropriate text and image.

    We’ll keep doing this until we’re done for the rest of the points.

    And that’s it! Now we’ll just make some finishing touches to our page.

    Conclusion

    Timelines are a valuable addition to web design, offering numerous benefits for enhancing user experience and storytelling. By choosing the right timeline design, adhering to best practices, and using user-friendly tools like WordPress plugins or Stackable, you can create captivating timelines that captivate your website visitors and effectively convey your message.

    Start experimenting with timelines in your web design projects today, and watch as your content comes to life with engaging visual storytelling.

    Remember, timelines are not just a way to present information; they are a journey through time that can leave a lasting impression on your audience.

  • How to Use Tabs in Web Design (When to Use and Best Practices)

    One of the most effective tools for organizing content and enhancing user experience in web design is using tabs.

    Tabs provide a user-friendly way to present information while saving screen space. In this article, we will delve into the world of tabs, explore their benefits, showcase various use cases, discuss best practices, and even provide a step-by-step guide to creating tabs for a WordPress website.

    When should you use Tabs in web design?

    Tabs are a valuable design element, but they are not always the best choice for every situation. Using tabs ineffectively can easily ruin the experience on your website. That’s why it’s essential to consider the specific context and objectives of your website when deciding whether to use tabs. Here are some factors to consider when deciding to use tabs:

    1. Content Organization: If you have related content that can be neatly divided into categories, tabs can be useful. They allow users to quickly switch between related sets of information without scrolling or navigating to another page.
    2. Volume of Content: Tabs are especially helpful when there’s a large amount of information that can be grouped into separate sections. If the content for each tab is minimal, it might not justify the use of tabs.
    3. Navigation Simplification: For websites with straightforward structures, like personal blogs or portfolio sites, tabs can serve as the primary navigation menu. Each tab corresponds to a key section of the site, making it easy for visitors to find what they’re looking for.
    4. Limited Screen Space: Tabs shine in responsive web design, where space is limited, and you want to optimize the use of available screen real estate. Tabs allow you to hide content behind tabs until users choose to access it, ensuring a clean and uncluttered interface.

    Types of Tabs

    Pricing Tab

    Businesses offering various plans or packages can effectively utilize pricing tabs to display the features and costs associated with each option. This layout empowers users to compare offerings and make informed decisions.

    Category Tabs

    E-commerce websites often implement category tabs to simplify the browsing process. Users can effortlessly switch between product categories, enhancing their shopping experience.

    Product Info Tabs

    When presenting detailed information about a product or service, using tabs for sections like “Overview,” “Features,” “Specifications,” and “Reviews” helps users quickly access the information most relevant to them.

    Navigation Tabs

    Navigation tabs act as a gateway to different sections of a website. They are commonly used for sections such as “Home,” “About Us,” “Services,” and “Contact,” ensuring easy access to vital content.

    Best Practices for Using Tabs

    Keep Labels Short and Clear

    Tab labels should be concise and descriptive. Users should be able to understand the content behind each tab without confusion.

    Highlight the Active Tab

    Visual cues like changing the tab’s color or applying a border can help users easily identify which tab is currently active.

    Quick Tab-switching

    Ensure that tab-switching is smooth and seamless. Users should be able to switch between tabs without any lag or delay.

    Use Consistent Styling

    Maintain a consistent design style throughout your tabs. This fosters a cohesive look and feel, contributing to a more polished user experience.

    Ensure Accessibility

    Tabs should be accessible to all users, including those with disabilities. Proper coding and adherence to accessibility guidelines are crucial.

    Keep Tab Labels in a Single Row

    If possible, keep all tab labels in a single row to prevent overcrowding and confusion. Consider alternative designs if space becomes an issue.

    How To Create Tabs for a WordPress Website

    Creating tabs for a WordPress website isn’t as complicated as you might think. One method you can consider is to use Stackable, a free plugin that offers the Tabs block and intuitive design controls for customizing the Tabs block’s appearance. We’ll teach you how to recreate the tabs in this example:

    1. Install and activate the Stackable plugin

    From your WordPress dashboard, navigate to Plugins > Add New. Search for Stackable in the search bar and it should show up as the first result. Click the Install button and then click Activate.

    2. Create or open a page/post and add the Tabs block

    You can add the Tabs block from the Inserter. Just type in “Tabs” and it should appear. From here, we can start setting up the Tabs block.

    First, let’s change the tab number to 2, since we will only need two tabs for this example. Then let’s adjust the block width to Align Full, and the content width to Align Wide.

    Next, we’ll start customizing the Tab labels. Select the Tab labels, and in the Style tab, select the Centered Pills option. Then we’ll customize the button colors. For button color, we’re selecting Transparent, and for text color, we’ll select a dark gray. Click the Hover State button and change it to “Hovered State”.

    Third, let’s navigate to the Tab Active State panel, change back the hover state to “Normal State”, and select the teal color for the button color and black for the text color.

    Finally, let’s just input the names of the tab labels. For the first one, it’s “Monthly” and for the second tab, it’s “Yearly”.

    3. Customize the tabs’ content

    Now we’ll add our content. Let’s go to the Monthly tab and add the Columns block, select the one column layout. First, add the Image block. Navigate to Style > Borders & Shadows, and change the Border Radius to 8.

    Next, let’s add the Price block – for this example, we’ll change it to “$69 / month”. Then we added the Text block and added the text “Up to 1 single user. Perfect plan for freelancers and individual contributors.” Next, we also added a Divider and the Icon List block to display what this pricing tier includes.

    Lastly, let’s add the Button block. We named the button “Get Started” and headed to Style > Button Colors to change its color to black, and the text color to white. Next, we opened up the Button Size & Spacing panel and turned on the Full Width toggle; then, opening up the Button Borders & Shadows panel, we adjusted the border radius to 8.

    As a last minute addition, we selected the Icon List and set it to a different check icon. We also change the icon size to 2 to enlarge it.

    4. Adjust styling, colors, and other design elements using Stackable’s settings.

    First, select the Inner Column containing our content. Navigate to Style > Borders & Shadows and select the solid border. We’ll select a gray color for this and set the border radius to 16. Let’s see how that looks.

    Now that we’re done with the border colors, let’s start duplicating this column for the rest of the pricing tiers. Selecting the Column block, we’ll go to Layout Tab > Layout panel and setting the columns to 3. Doing this will multiply our columns and copy the contents of the first inner column. Next, we set the Column Gap to 10 to add space between the columns.

    Finally, here, we’re just changing the content of each column accordingly. The middle one is Advanced, while the third column is Professional. We want to put emphasis on a tier that we will recommend so let’s make some additional adjustments to the design of this column. Selecting the third inner column, we navigated to Style > Borders & Shadows. We selected the purple color for the border color. Then, selecting the Button block, we also selected purple for its color.

    5. Adding the content to the second tab

    This part is fairly easy. Since we just need the same Columns block in the second tab, we’ll just copy the Columns block. To do this, go to the List View and select the Columns block. Click the Settings button (︙) to its right and click Copy. Click on the second tab (Yearly) and paste it by pressing Command/Control + V.

    Now, all we have to do is change the pricing for each tier, since this is for the yearly pricing scheme.

    Don’t forget to hit Save to save all your changes.

    6. Preview your tabs in action

    Now we’re done with building this pricing table, all that’s left to do is check how it looks in the frontend!

    Now we’ve built a pricing table with two pricing schemes, each with three different tiers.

    Conclusion

    In the realm of web design, tabs stand as a versatile and powerful tool for organizing content, optimizing space, improving navigation, and enhancing user experiences. By implementing best practices and utilizing the right tools, designers can create seamless and engaging tabbed interfaces that captivate users and simplify their online interactions. Whether you’re building an e-commerce platform, a blog, or a corporate website, incorporating well-designed tabs can truly elevate your web design game.

  • How to Use Carousel Layouts in Web Design: Best Practices and Examples

    Carousel layouts are a popular design element used on many websites, especially for showcasing images, products, or other types of content.

    Whether you’re a photographer showcasing a portfolio, creating an e-commerce site promoting its top deals, or a blogger sharing snippets of your latest posts, the carousel has become a staple in modern web design.

    However, carousels need the right balance to be effective; they should be captivating, but not overwhelming; informative, but not cluttered. With an array of options at your fingertips, it can be a daunting task to figure out how to implement an effective carousel layout.

    In this article, we’ll take you on a ride through the benefits of carousel layouts in web design, tips for creating an effective carousel, and what mistakes to avoid to create sliders that not only look good but also improve the user experience.

    Benefits of using carousel layouts

    • Space-saving: Carousels enable you to display multiple pieces of content within a limited space. This is especially useful for websites that want to showcase a variety of information without making the homepage or landing page appear cluttered.
    • Visual Appeal: Carousels add dynamism and visual interest to WordPress sites. With their sliding or rotating animation, they can make a webpage look more engaging compared to static images.
    • Increased engagement: Carousels allow for the incorporation of interactive elements such as buttons and links within the slides. This can be used for calls-to-action, leading visitors to take specific actions like signing up for a newsletter or checking out a product.
    • Flexibility: Carousel layouts can be used for about anything, whether it is for a portfolio, a promotion of various events, or a product showcase. You can easily modify it to choose from different transition effects, configure the display settings, and personalize the design to match the aesthetics of your website.

    Examples of Carousel Layouts

    Testimonial Carousel

    Testimonial carousels help build trust and credibility, as potential customers can see real-life reviews. A testimonial carousel is an engaging way to showcase customer feedback and reviews on your website. By employing a carousel layout, you can highlight a collection of positive testimonials that rotate automatically or through user interaction. In our example, each slide includes the client’s name, photo, and a brief description of their experience.

    Services Carousel

    The services carousel allows you to present your range of services or products in an interactive manner. You can feature each service on a separate slide, complete with the service name, a concise description, and relevant visuals; in the example below, we used icons. This approach enables visitors to easily navigate through your services and obtain a quick overview of what your business provides. You can also include buttons or links to guide users to take action or explore more about the services that interest them.

    Social Proof Carousel

    The Social Proof Carousel, featuring logos of trusted organizations, is a dynamic showcase that enhances your brand’s credibility. Through a rotating carousel layout, it highlights logos of esteemed partners, collaborations, and endorsements, providing a visual testament to your business’s reputation and fostering trust among potential clients.

    Tips for designing effective carousel layouts

    Designing an effective carousel layout can be an effective way to showcase multiple pieces of content within a limited space. However, it’s important to remember that carousels should be used with purpose, and be designed in a way that enhances the user experience. Here are some tips for designing effective carousel layouts:

    Embrace Simplicity

    Avoid overwhelming users with too much information. Use clean layouts, concise text, and focused images. A great way to do this is to first define your purpose. Is it to showcase products, display testimonials, or highlight recent blog posts? Once you have a goal in mind, you can then focus on what content and design would help achieve it.

    Make it Responsive

    Ensure that your carousel is responsive and works well on all devices, including mobile phones and tablets. The layout, text size, and navigation should adapt to different screen sizes. Also make sure that your carousel works well with swipe and drag gestures to make navigation easy for mobile phones and touch devices.

    Use High-Quality Images

    The visuals are a crucial part of a carousel. Use high-resolution images that are visually appealing and relevant to the content.

    Include Clear Navigation

    Allow users to either manually cycle through the carousel or let it rotate automatically. If you’re going to use autoplay, ensure the automatic rotation is not too fast, giving users enough time to digest the content.

    However, if the content in the carousel is critical, consider not using automatic rotation at all. Users might miss important information if slides are moving too fast.

    Provide Context

    Use brief, but descriptive captions to give context to the images. This is particularly important if the images themselves aren’t self-explanatory.

    Common mistakes to avoid when using carousel layouts

    We’ve discussed some tips for creating carousel layouts, however, when creating carousel layouts, you could also make some mistakes that make the experience worse than better. Here are mistakes you should steer clear from in order to keep your carousel effective for your web design goals:

    Too Fast Auto-Rotation

    When the slides rotate too quickly, users don’t have enough time to absorb the content, leading to frustration and missed information.

    Overloading Slides with Content

    Cluttering slides with excessive text or images can overwhelm users, making the message unclear and reducing readability.

    Inconsistent Design Elements

    Inconsistent fonts, colors, or image sizes across slides can look unprofessional. Maintain design consistency to create a cohesive visual experience.

    Adding Very Important Content inside Carousels

    Carousels take time to rotate, so take care and do not put important things that you do not want your visitors to miss out of deep inside carousels – they might miss it.

    Conclusion

    In wrapping things up, carousel layouts bring a real punch to web design, adding that extra oomph to engage visitors and get your message across with style. We’ve seen how testimonial sliders, services sliders, and social proof carousels can jazz up your site, telling stories, showcasing what you offer, and waving the credibility flag with those logo badges.

    So there you have it, an insider’s take on carousels – your ticket to crafting web experiences that’ll stick with your visitors like peanut butter on bread.

  • The Differences Between CSS Units in Web Design

    As web design continues to evolve, it’s important to understand the different CSS units at your disposal. CSS units are essential to create effective, responsive, and accessible web designs.

    In this article, we’ll dive deep into the various CSS units available, their characteristics, and guidelines on how to choose the right unit for various design needs.

    Introduction to CSS Units

    In web design, CSS units are measurements used to define various properties such as width, height, font size, margins, paddings, and more. There are two main categories of CSS units: absolute units and relative units.

    Absolute Units

    Absolute units in web design refer to measurement units that have a fixed value and do not change based on the dimensions of another element, the viewport, or user settings. In web design, there are two main units that are used:

    Pixels (px)

    Pixels are the most commonly used absolute units. In digital displays, a pixel is the smallest controllable element. Using pixels gives you precise control over the size and positioning of elements. However, it lacks flexibility on different display sizes and resolutions.

    Points (pt)

    Points are typically used in print media, where 1 point is equal to 1/72 of an inch. In web design, it’s generally recommended to avoid using points, as they don’t scale well on different devices.

    Inches (in), Centimeters (cm), Millimeters (mm)

    These are real-world measurements and are not practical for web design, as they can vary greatly depending on the screen size and resolution.

    Relative Units

    Relative Units are dynamic and are calculated based on the dimensions of another element or the viewport.

    Em

    The ‘em’ unit is relative to the font-size of its cosest parent element. For instance, if the parent element has a font size of 20px, then ‘1em’ is equal to ‘20px’. Ems are great for scaling typography and maintaining proportional spacing and sizing.

    Rem

    Similar to ‘em’, ‘rem’ stands for “root em”. It is relative to the font-size of the root element, usually the ‘<html>’ element. This unit is very useful in building responsive designs, as changing the font size of the root element will proportionally affect all elements defined in rems.

    Percentage (%)

    Percentage values are relative to the parent element. For example, if a child element has a width of ’50%’, it will take up half the width of its parent. This is extremely useful for creating fluid layouts that adapt to different screen sizes.

    Viewport Units: vw, vh, vmin, vmax

    Viewport units are relative to the viewport size.

    • ‘vw’ (viewport width) is equal to 1% of the viewport’s width
    • ‘vh’ (viewport height) is equal to 1% of the viewport’s height.
    • ‘vmin’ is equal to 1% of the viewport’s smaller dimension (width or height).
    • ‘vmax’ is equal to 1% of the viewport’s larger dimension (width or height).

    These units are especially powerful for creating responsive designs that adapt to the viewport size.

    Choosing the Right Unit

    In choosing a CSS unit for the content on a website, you must first define your goal.

    Each unit has its own set of properties and behaviors that can be advantageous and disadvantageous depending on the context. Here are reasons why one should use different CSS units for different types of content:

    Precision

    Sometimes, designers might need to use precise measurements for elements like borders, shadows, or fixed-size components. In such cases, using pixels is the best option as it allows for fine-tuned control over the element’s size.

    Suppose you want images on a webpage to have a border around it. Here’s an example of a CSS code that you will add to your CSS stylesheet:

    img {
   border: 5px solid #ddd;
   border-radius: 20px;
   width: 300px;
}

    Now whenever an image is added to your website, it will look like this:

    Responsive Design

    Relative units like percentages, em, rem, vw, and vh allow the content to adjust based on the screen size or font settings. This is particularly useful for text content, layout containers, and images, as it ensures that they scale appropriately on different devices.

    For example, we’ll use the em unit to determine the sizing of our headings. Here’s how the CSS codes would look like:

    html {
   font-size: 16px;
}

h2 {
   font-size: 2em;
}

h3 {
   font-size: 1.5em;
}

    Now here’s how the text would look like on a webpage.

    User Customization and Accessibility

    Some users might have their browsers set to display text at a larger size for readability. Using relative units such as em and rem for typography ensures that your website respects the user’s settings and remains accessible.

    For example, we’ll use the em unit to determine the sizing of our headings. Here’s how the CSS codes would look like:

    html {
   font-size:16px;
}

h2 {
   font-size: 2em;
}

h3 {
font-size: 1.5em;
}

    Here’s how the text would look like on a webpage.

    But when this is viewed from a mobile phone with larger text size configurations, it adjusts accordingly.

    Maintaining Aspect Ratios

    When dealing with media content like images and videos, it’s often important to maintain aspect rations. Using percentages for widths and auto for heights can help maintain the aspect ratios regardless of the screen size.

    Below is an example of the img selector with width set to 50%: 

    img {
   max-width: 50%;
   height: auto;
   float: right;
}

    Now when you display this on a webpage it should look like this:

    When viewed on a mobile or tablet device, it still just follows that it will only occupy 50% of the space and should look like this:

    There are so many things that you need to take account of in choosing the right CSS unit, so which one should be used?

    There is actually no right or wrong answer. There is also no one answer. It all depends on the needs you are prioritizing for the website you’re building. You can actually mix the CSS units to cater to your website’s needs. To help you, here’s a guide on what CSS units for the different elements of a website:

    Typography

    For typography, using relative units like ‘em’ or ‘rem’ is recommended. This ensures that the text scales well on different devices. ‘Rem’ is especially useful for consistent scaling, as it’s always relative to the base font size.

    Layout and Spacing

    For layout and spacing, a combination of units can be effective.

    • Use ‘percentage’ for fluid grids where elements should adjust according to the parent container.
    • Use ‘viewport units’ for sections that should scale based on the viewport size.
    • Use ‘pixels’ for fixed dimensions, where scaling is not desired. Scalable Elements

    For scalable elements like icons or responsive images, using ‘em’ or ‘rem’ can be effective. This ensures that these elements scale in proportion to the text.

    Media Queries

    For media queries, it’s often best to use ‘em’ units. This is because they are based on the font-size, and can adapt if the user has custom browser settings for font size.

    Conclusion

    The selection of CSS units is a fundamental aspect of web design that can greatly influence the responsiveness and accessibility of a website. While there is no one-size-fits-all approach, understanding the differences between these units is essential in making informed decisions that best suit the design goals and user experience. As a rule of thumb, lean towards relative units for a more scalable and responsive design, while employing absolute units for precise control where necessary.

  • How to Create a Horizontal Layout on WordPress

    Did you come across a website that scrolls left to right instead of the usual top to bottom? That’s called a horizontal layout.

    In web design, it refers to a website where the whole content is laid out horizontally. Horizontal layouts are great options for catalogs, portfolios, or brochure websites. Vertical scrolling layouts have been the norm for the past decade, and using horizontal layouts are very out of the box.

    Here’s a cool example of a website with a horizontal layout:

    We created the example above on WordPress using Stackable, a free plugin that comes with powerful yet lightweight custom blocks that will allow you to create any type of website that you want without writing a line of code! If you want to create a website similar to the example above, then keep reading! We’ll show you step-by-step how to build this scrolling horizontal website on WordPress.

    How to Create a Horizontal Layout Design on WordPress using Stackable

    Our Horizontal Scroller block has controls and design options that allow you to create anything from sliders to full horizontal layouts. It comes with our free plugin that you can download here.

    Once you have Stackable installed on your website, you can now start building your horizontal website!

    First, let’s add our horizontal scroller block by typing /horizontal scroller.

    Make the alignment of your horizontal scroller “full width” so that it covers the whole website. You can do this by clicking the Align icon in the Toolbar and selecting the Full width option.

    Let’s now add or reduce the number of columns of our horizontal scroller by simply typing our desired number in the text box of the Columns control under the Layout panel of the Layout tab. Or you can also use the slider beside it.

    After that, let’s increase the Item Width setting of our horizontal scroller to 800px so we have more space to work on. You will also find this in the Layout panel of the Layout tab.

    Now, we’ll increase our Column Inner Spacing value to 30px so we can have a margin for each of our columns inside the horizontal scroller.

    horizontal 7.png

    Now that we’re done with setting up the layout of our Horizontal Scroller block, we’ll move on to designing each inner column.

    Let’s start by adding an Image block inside the first inner column and a Columns / Container block below it. Select the 33 / 33 / 33 variation in the layout picker.

    This 3-column container is where we will be putting our text. Now, select each inner column one by one, and set the Column Spacing to 0px in the Layout panel.

    Let’s add our image and text. Make sure that the text on the leftmost inner column is aligned left and your text in the rightmost inner column is aligned right.

    Now, select the rightmost inner column, and in the Layout tab, you will find the Size & Spacing panel. Select this and locate the Content Vertical Alignment control. Select the third option which is Bottom.

    Now let’s style it! Let’s change the typography settings of our text by selecting the text in the leftmost column. In the Styles tab, you will find the Typography panel.

    Click the pencil icon beside the Typography controls. For this first Text block, we used the Playfair Display font, changed the Font Weight to 700, and the Font Size to 80px.

    Now, in the Text Color control, we’re typing in a custom hex code for a grayish tone.

    Next, let’s design the typography for the text in the right column. Select the Text block, and click the Typography controls again. For this text, we’ve set the typography settings to the Poppins font family, 300 for the font weight, and 40px for the font size. We’ve also decreased the line-height to 0.8 and changed the color to the same grayish tone.

    Finally, we’re adjusting the sizes of each column to make the first text more readable.

    Let’s now proceed to the 2nd slide. Let’s add in a 2-column container first. Then on the right container, let’s add another 2 column container. This is so that if we duplicate the 2 column container inside the right container, it will duplicate downwards. With that being said, let’s duplicate these 2 columns 3 times. After that, insert 2-column containers inside the last 2 Column / Container blocks. These containers are where we’ll be putting additional text.

    Don’t forget to set all column spacings to 0. You can do this quickly by copying the styles and pasting them to each container.

    Next, let’s put in our image and texts. Let’s adjust the alignment of some texts as well. See in the video below which specific containers we’ve added the text to.

    After that, let’s change the typography settings of our text in the Styles tab. Let’s make some adjustments to the layout of the image and columns as well. Let’s also put a spacer at the top of the image to prevent it from moving up.

    First, let’s select the Portfolio text. For this, here are the typography and layout settings – Font Family: Playfair Display, Weight: 700, Size: 60px, Bottom Margin: -106px, Top Margin: -30px.

    Second, for the Pringles text, here are the typography settings – Font Family: Playfair Display, Weight: 700, Size: 30px.

    Third, for the 3D text, here are the typography settings – Font Family: Poppins, Weight: 300, Size: 30px.

    Fourth, for the additional text below, here are the typography settings – Font Family: Poppins, Weight: 300, Size: 15px, Line-height: 1px, Text Alignment: Alight Left.

    Finally, for the image, set the Height to 400px.

    For the 3rd column, let’s duplicate the 2nd column of the horizontal scroller since their layouts are similar. After that, let’s remove some texts and images that will not be needed for this column. Next, let’s rearrange and adjust some containers. Then, let’s add in our new images and texts. It’s that easy!

    Now, let’s move on to the 4th column. Since the contacts section has a similar layout with the 2nd column, let’s duplicate the the 2nd column again. Then, let’s move the duplicate to the right most part of the horizontal scroller. Now, let’s rearrange, remove, or add our containers. Next is to add our new texts and images. After that, make some adjustments to your texts by tweaking the typography settings. You can also copy the styles of other texts like what I did in the example below. Finally, make some micro adjustments to the alignment of your texts to make the overall layout look cleaner.

    Finally, let’s add a background for our horizontal scroller to make our website look even better. Let’s also remove any unnecessary items in our website such as excess columns in our horizontal scroller.

    Finally, why don’t we preview and check out how our website looks?

    Wasn’t that easy? Now we have a horizontal scrolling website that’s visually appealing and

    Conclusion

    Creating a horizontal layout on WordPress can be a great way to enhance the design of your website! By following the steps in our tutorial, you can easily create a unique horizontal scrolling website with Stackable! Now you can make your website stand out and keep visitors engaged.

  • How to Use Countdown Timers for Marketing Campaigns

    Every website has a goal–whether it’s to create more leads or generate sales. To achieve these goals, websites often implement marketing campaigns. One tactic that marketers use for these marketing campaigns is creating countdown timers.

    Countdown timers in web design are digital timers that display the remaining time until a particular event or deadline. In this article, we’ll discuss how you can use countdown timers to boost your marketing campaigns.

    Why use countdown timers in my campaigns?

    Countdown timers are a great tool for marketing campaigns if used properly. Research has shown that using a countdown timer can increase conversion rates. Here are some reasons why countdown timers can make your marketing campaigns more effective:

    Sense of Urgency

    Having a countdown timer encourages website visitors to take action before time runs out. It will give them motivation to fulfill a goal you’ve set for your website, whether it is to sign up for a newsletter, make a purchase, or completing an action that will be beneficial to the website visitor and your business.

    Increase Engagement

    Countdown timers can also help to increase engagement with your marketing campaign by creating a sense of excitement and anticipation. You can do this by promising a valuable opportunity by the end of a countdown. As an example, when you have a timer counting down until the launch of a product or a sale, it may have your website visitors eagerly waiting for the countdown to reach zero. This may cause them to explore your website more while waiting for the end of the countdown.

    Increase Conversion

    By leveraging scarcity, countdown timers can ultimately lead to an increase in your website’s conversion rates. Customers will more likely take action when they feel that they must act quickly to avoid missing out on a valuable opportunity. When you create a sense of exclusivity, it will encourage customers to make the desired action before a timer runs out.

    What type of marketing campaigns can i use countdown timers for?

    There are a variety of marketing campaigns that you can use countdown timers for. However, it’s important to make sure that the timer is relevant to the promotion or event and that it is not overused, as customers may get used to the sense of urgency it creates. Here are some types of marketing campaigns in which countdown timers can be effective:

    Limited-Time Promotions

    You can take advantage of countdown timers for limited-time promotions, flash sales, or seasonal offers, like say during a Black Friday or New Year’s Eve sale. By using countdown timers for limited-time promotions, you can increase the number of purchases made during the promotion period.

    Product Launches

    You can create a countdown timer for a product launch or even a website launch. By starting the countdown several days or weeks before the launch date, you can generate buzz and excitement, and encourage customers to sign up for email alerts or follow your social media channels for updates.

    Event Registrations

    Countdown timers can also be effective in promoting events and encouraging registrations. By highlighting the number of days or hours left until the event, you can create a sense of urgency and encourage customers to register before it’s too late.

    How to create a countdown timer?

    It’s important to choose the right countdown timer for your marketing campaign. There are many options available, especially when you’re a WordPress user–from free plugins to paid services, so it’s essential to choose a countdown timer that is easy to install and customize for your website.

    We suggest checking out Stackable (of course). It’s the ultimate block plugin for the WordPress editor. Our very own Countdown Block has a lot of design controls that make it easy for you to match it with your website. Let us show you how easy it is to add a countdown timer and customize it to fit the rest of your website.

    Here’s an example of a Pricing page without a countdown timer. It has all the typical sections of a Pricing page but if you notice in the video below, it’s currently having a sale. It’s not really obvious that it’s for a limited time only and a website visitor won’t have any information on when it will end.

    We should first set a clear goal. The goal could be to increase sales, gain more subscribers, or create brand awareness. But for this page, our goal is to increase sales, to do that, we must create a sense of urgency.

    We want to place the countdown timer strategically. An area where it is visible and obvious to customers but where it will not interfere with the customer’s shopping experience. Let’s place it at the top, right before the Pricing section.

    Let’s first add a Columns / Container block at the top of the Page Content.

    In the Layout picker, we’re choosing the 30 / 70 option where there will be one inner column that takes up 30% of the page width, and another taking up 70% of the page width.

    Now, let’s make the whole Columns / Container block full width.

    Now, we’ll add in some content on the leftmost column. These are added using Stackable’s Heading and Text blocks. For the copy, it’s important to use persuasive language to motivate your customers to act quickly. For example, “Don’t miss out!” or “Last chance to buy!”. So we made sure to include that in the copy of our countdown timer section to cause some sense of urgency.

    After that, on the rightmost column, let’s now add the Countdown block.

    Here is how it looks like so far! It looks pretty bland and doesn’t really match the website’s design and aesthetics yet. So we should customize it a bit more.

    First, let’s make the block’s content Align Wide by selecting the middle option of the Content Width. You can find this option in Style > General > Content Width.

    Now, let’s add a background to our block. While with the whole Columns / Container block selected, go to Block > Background and click the toggle to turn it on.

    Now, let’s add a color to this whole block using the Background Color control. We’ve selected this custom minty green in the color picker.

    Now, let’s customize the text inside the left inner column. We’ve used the Rubik font for the Font Family and set the Font Weight to 300.

    Once that’s done, let’s move on to designing the countdown block. Under the Style Tab, you will find various Settings panels, and the first one is the General panel. It is where you will be able to select what date you want the timer to end. Here, we’ve selected April 5, 2023 and the time to 12:00 am.

    Scrolling down the General panel, you will find the control where you can set the timezone the timer will follow. We’ve selected the Local Timezone option so that it follows the timezone that the user is on, wherever they are in the world. We’ve also set the Action on Expiration to Display Message Upon Expiration so that when the timer ends, we are able to display a message for the website visitor. We’ll add that message later on.

    The next panel in the Style tab of the Countdown block is the Digits panel where we will be able to customize the numbers in the countdown timer. We’ve set the Typography settings to Rubik font, and the weight to 700.

    The next panel is called Labels. It is where we will be able to design how the labels under each number will appear. In the image below, we’ve set the typography to the Radley font, Uppercase transform, and Italic font style.

    Next is the Container Background. We’ve clicked the toggle to turn it on and set the Background Color Opacity to 0.4. This will make the containers of each digit appear like the other containers in the page.

    Now, let’s add some borders to finish the complete look of the containers. We’ve selected the Solid option in the Borders control and set the Border Radius to 20.

    Finally, let’s add an expired message! We’ve added the text: “Sale finished! Thanks for participating!“

    Now we’re done with our very own countdown timer section for this pricing page. Let’s see how that looks in the frontend.

    That looks great! We’ve covered all bases–we’ve placed it strategically, aligned it with the page’s goal/objective, and created a sense of urgency. Now, all that’s left is to just wait and watch as conversions and sales increase.

    Conclusion

    In conclusion, countdown timers can be a powerful tool for marketing campaigns. By creating a sense of urgency and encouraging customers to take action before time runs out, countdown timers can increase engagement, drive conversions, and ultimately boost the success of your marketing campaigns.

    Whether you’re promoting a limited-time sale, a new product launch, or an upcoming event, a countdown timer can help to build anticipation and excitement, and encourage customers to act quickly. However, it’s important to use countdown timers strategically and sparingly, and to ensure that they are relevant to your campaign and your audience. When used effectively, countdown timers can be a valuable addition to your marketing toolkit, helping to drive results and grow your business.

    If you want to create your countdown timers with Stackable, check out our features page to learn more about what you can do with our plugin!

  • How to Use Micro-Interactions to Upgrade User Experience

    an essential part of web design. A website that provides a great user experience is more likely to retain visitors and convert them into customers. If you would like to improve your website’s user experience, one method that’s worth checking out is adding micro-interactions.

    What Are Micro-Interactions and Why Use Them?

    Micro-interactions refer to small, subtle interactions that occur when a user interacts with a website or application. These interactions can include things like button animations, color changes, transform & transition effects, or animations and they can be triggered by mouse hovers, clicks, or scrolling. These are great ways to provide feedback to the user or signal an intended action, making the website more engaging and interactive.

    Micro-interactions don’t have to be grand or bold, it could be just a simple action but it can create a very big impact to your website’s user experience. To demonstrate this, here’s a side-by-side of a button with just a small change when hovered over versus a static button.

    What Are The Purposes of Micro-Interactions?

    1. Use Micro-Interactions to Provide Feedback

    One of the main benefits of micro-interactions is that they provide feedback to the user. This feedback can be in the form of an animation, a sound effect, or a change in color. For example, when a user hovers over a button, the button can change color to let the user know that clicking it will complete an action.

    Below is a great example of using micro-interactions to provide feedback where the button required a user to select a size before being able to add it to the user’s cart. We also liked the addition of the website’s accent colors changing to the selected color 😉

    via Skims (https://skims.com/)

    2. Use Micro-Interactions to Simplify Navigation

    Micro-interactions can also be used to simplify navigation on a website. For example, when a user hovers over a navigation menu item, a drop-down menu can appear, providing more options for the user. This type of micro-interaction makes it easier for the user to find what they are looking for, improving the overall user experience.

    via Sephora (https://www.sephora.com/)

    The video example above was taken from Sephora’s website. In it, the section moves as you click the arrows but when you reach the end of the slide, the arrows disappear. It’s a very simple behavior that added intuitiveness and functionality to the website.

    3. Use Micro-Interactions to Add Personality

    Micro-interactions can also be used to add personality to a website. For example, when a user hovers over an image, the image can zoom in or a tooltip can appear with additional information. These types of micro-interactions add personality to the website, making it more memorable and engaging for the user.

    We particularly find this example below by Jonathan Morin really creative. It displays examples of the underlined text when it is hovered.

    How to Add Micro-Interactions to Your Website

    If you want to do micro-interactions to your website, the native blocks in WordPress do not offer much controls for animation and effects. You will most likely need the help of third-party blocks and plugins. We recommend Stackable (obviously).

    Stackable is a WordPress page builder with custom WordPress blocks that make it easy to create full websites. With Stackable’s feature-packed blocks, you have all the tools you need to create an effective user experience. Here’s how you can easily create micro-interactions with Stackable:

    Below, we’ll show you how we’ve added micro-interactions to this sample website section:

    What we first want to do is to add the hover effects to each card. Let’s first select the first column. In the Container Background panel, let’s select the Hover State icon for the Background Color.

    A screenshot of the editor with the hover state selected

    Let’s select the Hover option so we can design the hover state of this column.

    The cursor selecting the hover state

    Now, we’re choosing a new color–in this case, we’re selecting a Secondary color from the color palette.

    Selecting a new color for the background color

    Now let’s move on to the button. What we wanted to do is for it to lift when the cursor hovers over it. Now, let’s do that. Start by selecting the button first:

    Selecting the button

    Now, in the Scale option under the Transform & Transition panel in the Advanced Tab, set the value to .90.

    Changing the value of the scale

    Now, let’s proceed to the Hover state design of the button. Select the Hover option in the Hover State selection.

    Selecting the hover state for the transform settings

    In the Translate Y setting, set the value to -8. Leave the rest blank. This will give the button the slight lift when the cursor is hovering over it.

    Adding a value to the translate Y setting

    Now, let’s carry on to the last Hover State which is the Parent Hovered state for the button. When this is enabled, the action will be triggered when the cursor is on the parent container, and not the element itself–just like how the button became a bit larger in the previous video.

    Selecting the parent hovered state for the button

    Let’s set the Scale value to 1 since we set the Scale value to .9 in the Normal state. This will give the effect of the button slightly enlarging when the cursor is inside the container.

    Changing the Scale to 1 for the parent hovered state

    We’re done with adding the small micro-interactions to the first column. Now, let’s check how this looks like in the front end.

    That looks great! However, we still have to do the rest of the columns so that they are uniform. But don’t worry, when you use Stackable, you won’t have to redo all those steps to achieve the same result for the other columns. You can simply use Stackable’s smart copy and pasting. When you select a block, you will find the Palette icon. Select this and you will be able to copy the style of this particular block.

    Selecting the copy styles option

    Now, select the block that you want to paste the styles to. Select the Palette icon again, and click on Paint Styles. You will see that the second column has now inherited the styles of the first column. Just do the same for the last column and you will be done!

    Selecting the Paste Styles option

    Let’s look at the finished product. Now you have a section with simple micro-interactions that will give your website visitors a better experience!

    Conclusion

    Micro-interactions are a great way to upgrade user experience in web design. They provide feedback to the user, simplify navigation, and add personality to a website. When used correctly, micro-interactions can make a website more engaging and interactive, improving the overall user experience.

  • Top Web Design Trends to Watch Out for in 2023

    They say the only thing that’s constant in this world is change. It’s no different when it comes to web design. Web design is constantly evolving, and it’s crucial to stay up-to-date with the latest trends.

    Now that it’s 2023, it’s necessary to start thinking about what latest trends are in store when it comes to web design. In this post, let’s explore some trends that will soon dominate web design this year.

    3D Graphics

    via https://www.jetty.com/

    As technology continues to improve, we’re seeing more and more websites incorporate 3D graphics into their design. This trend is set to continue in 2023, with web designers finding new and innovative ways to use 3D graphics to enhance user experience. From interactive 3D models to fully immersive environments, 3D graphics can add an extra layer of depth and realism to a website. However, it’s important to note that this trend may not be suitable for all websites, as it can increase loading times and require more processing power.

    Interactive Content

    Interactive content is a trend that’s been gaining traction in recent years, and it’s set to become even more popular in 2023. Interactive content refers to elements on a website that users can engage with. It’s an excellent way to keep users engaged and entertained, making it an effective tool for driving traffic and increasing user retention. Lastly, interactive content can help build brand awareness and establish a connection between users and the website.

    Some examples of interactive content include:

    Animated Scrolling

    Animated scrolling is what you call when elements on a website transition or create motion when a user scrolls through a page. Scrolling effects are not just purely for aesthetic reasons, but could also create a dynamic user flow on your website. Additionally, scrolling animations could be used to emphasize certain elements of your website.

    Here’s an example of some simple scrolling animations you can add to a website using fade in and fade out effects:

    Animated scrolling may sound very complicated to make, but it’s actually pretty simple with the help of page builders. The above example is actually made using Stackable, a WordPress plugin that turns WordPress into a page builder. Each block has a setting called Motion Effects, where you can add scroll-based transitions without having to write any code.

    Discover a Whole New Experience of Web Design

    No matter who you are, blogger, entrepreneur, designer, developer, we guarantee you’ll want Stackable.

    FREE DOWNLOAD

    TRY PREMIUM

    Micro-Interactions

    Micro-interactions are necessary if you want to create an interactive website. These are small functional animations that guide the user while exploring your website by giving visual feedback. Micro-interactions are usually triggered by hovers or clicks on certain elements of your website. It could be as simple as color changes on buttons, or revealing text over images.

    The above example was also made using Stackable. We used hover effects for each card, and the content inside of it. We simply used color changes and it made all the difference. Here’s a quick

    Minimalism

    Minimalism has been a popular web design trend for a few years now, and it’s set to stay that way even in 2023. With users increasingly seeking simplicity and clarity when browsing the web, minimalism offers a clean and modern aesthetic that can help to focus the user’s attention on what’s most important–content. Making a minimalist website can be as easy as using simple typography, taking advantage of white space, and using limited color palettes.

    Here’s a great example of a minimalist website that takes advantage of white space and scrolling animations without sacrificing functionality:

    via https://www.axarb.com/

    If you’re a WordPress user, and you’re looking for templates, whether minimalist or dark, you might want to take a look at Stackable’s UI Kits. We have a library of ready-made designs that will give you the ability to create the website of your dreams in no time.

    Have a website ready with just a few clicks using ready-made UI Kits

    Speed up your design workflow and prototype websites faster.

    Learn More

    AI Generated Images

    AI Generated Image by Midjourney with prompt “airplane floating on Lake Brienz, Isetwald“

    AI Generated Images is the latest emerging trend in 2023. The trend refers to the increasing use of artificial intelligence algorithms to generate realistic images or illustrations, often for use in advertising, design, or other creative industries. If you need images quickly, AI generated images can be a good option. Thanks to advanced technology today, you can now just use tools like Midjourney to easily create assets for your website by typing just a few keywords. If you would like to try generating AI art or graphics, you could join Midjourney’s beta on Discord. Here’s an example of an AI Generated image we requested in their server.

    Although there are some debates online that AI-generated art has some ethical concerns such as using pre-existing art and images created by artists to generate the AI art, we still feel like this won’t stop companies and businesses from using AI to create graphics. It’s still new technology and there’s no doubt that AI developers will eventually address this issue.

    Conclusion

    Web design is an ever-changing landscape, and staying up to date with the latest trends is crucial for creating a successful website. In 2023, we can expect to see a continued focus on 3D graphics, minimalism, and usage of AI Generated Images. By incorporating these trends into your website design, you can create a modern and engaging user experience that will keep visitors coming back for more.

  • A Comprehensive Guide To Using Visual Hierarchy In Website Design

    Visual hierarchy is a concept related to visual perception. 

    In any given design layout, the way things are placed together and next to each other, help us understand how they relate to each other and to the design, based on their order of importance. 

    For example, if something is in the boldest, brightest color, it appears as the most prominent, and thus more important. Similarly, if something is larger than everything else on the screen, we consider it the most important. 

    On this website, the company logo takes up the most space, reiterating our subconscious understanding that this is the most important part of this section. 

    Then, the words ‘Personalized Aviation’ stand out, but in a smaller font. Telling us that this is important too, but we all know which is the hero text. 

    Understanding these relationships between different objects on the screen helps our brains understand and process information much more quickly and accurately. White space, a staple of minimal design, especially aids the process. 

    If there were no visual hierarchy, no order to how things are organized on the screen, we wouldn’t be able to comprehend much. 

    Either everything will look too similar, and the brain will be unable to latch on to anything of significance. 

    Or, everything will be too loud, overwhelming our processes and making us mentally check out of the experience. 

    Both these scenarios are bad for business, and design. 

    How Does Hierarchy Make The Design Better? 

    The fundamental job of any graphic design is to communicate. As simply and intuitively as possible. That’s why hierarchy and minimal design go hand-in-hand, whether you are creating a logo design or a web page. 

    Through visual organization, we help users look at the similarities and differences among design elements so users can understand the message behind the web page. 

    Here’s how hierarchy helps us achieve that:

    • Helps highlight the sequence of design elements, so we can understand their order of importance.
    • Makes the layout easy to scan. 
    • Guides the user attention.
    • Informs the user journey. 
    • Communicates the intent of each element and the overall web page. 

    Examples Of Visual Hierarchy, Both Good And Bad:

    Since human beings are visual learners and we are dealing with a visual design topic, it’s better to actually see some examples of hierarchy in action. To learn what to do, and what to steer clear of. 

    Let’s start with the horrible hierarchy first. 

    Examples of Bad Visual Hierarchy: 

    The site looks just like an index page. Nothing stands out and it seems like no special effort has been done to make the page look interesting or readable. 

    There’s a lot of mish mash of things going on. Where am I supposed to look first? What is the most important thing on this page? 

    Considering this is a site for a school of arts, it’s not doing much to inspire confidence in its artistic talent. If it weren’t Yale, would you even give it a second thought? 

    Branding-wise, the design raises questions on what the school can deliver. Hierarchy wise, it’s a confusing mess. 

    Except for the writer’s name, and the book cover in the middle, not much stands out. 

    The picture of the writer you see on the top-right corner, apparently there’s a rat in the picture, too. But you can’t see it. If the picture were larger, centered on the page, it would have made some impact. 

    Instead of a bestselling writer’s professional website, this looks like an amateur’s blog. 

    Now some nice websites with great visual organization. 

    Examples of Good Visual Hierarchy:

    Information is communicated through elements that are similarly sized and highlighted in similar colors. Under each picture thumbnail, you can see the Listen call-to-action highlighted in black while the tags are in green. 

    Even at a glance, you can spot these groupings and make sense of the objects. From here on, wherever you see white text with a black background, your mind will know it’s a CTA button. You’ll either focus on it or move quickly forward to find something else that you may be looking for. 

    Visual hierarchy makes minimal design that much more effective. 

    The homepage contains the company tagline in large, cap-sized letters. No way you can miss it. The text animation a bit lower on the page helps you understand the meaning behind the tagline. 

    Images are an important element to organize on site. Here, the rich, textured images of forestry are used as a background to highlight the bare-faced models and their lush skins. The contrast makes you appreciate the unblemished facial skin that much more, which is the entire purpose of this section. 

    Principles Of Visual Hierarchy

    Hierarchy comes with its own set of tools. We have some of the most common ones —- size, scale, color, and contrast. But, there are also textures, style, and repetition. 

    Let’s see how each helps organize our designs. 

    Size and Scale

    Image Source

    Size is one of the things we notice first. To draw attention to a website element, make it large. Headlines, for example, are alway the largest component on a site. Then, it’s usually call-to-action buttons. Both these elements require our attention and are so highlighted on the basis of scale. 

    The font size of the body copy, thus, is usually smaller. Subheadings are smaller than the main headings. And so on.

    Color and Contrast

    Image Source

    Color is another important element that not only draws attention but adds meaning too. Sites usually go with bright pops of brand colors in their CTAs, highlighting the color even more using white text. 

    Colors that are bright, and contrasts that are more striking attract us before muted and subdued shades. When designing your websites, keep the rich colors to highlight the elements and softer shades for background and stuff. 

    Even when your design element is smaller, like a CTA, bright colors help highlight its presence.

    Empty or White Space

    Image Source

    You want to make something noticeable, without resorting to size or color? Surround it with ample white space. 

    Remove everything else from its vicinity and let it shine alone, center-stage. 

    White space, or negative space, is the presence of empty space around an object. Just by being surrounded by all that nothingness, the object becomes prominent and impactful. 

    It’s important to note that white space does not literally have to be white. You can fill that space with a solid block of color and the effect will be the same, perhaps even more pronounced, if you play the contrast right. 

    The Rule of Thirds

    Image Source

    To draw the eye along a certain path on the web page, designers work with grids. Grids help organize things with more intention and purpose. According to the Rule of Thirds, the design section is divided into a grid of horizontal and vertical thirds. 

    The icon, image, or element that you want to draw the eye to, is placed either on points where the four lines meet (ideally) or on the lines themselves. The idea is to distribute the elements in a ratio of 2/3rd to 1/3rd, instead of dividing the space in half. 

    Placing important elements according to the Rule of Thirds not only improves the visual hierarchy but also makes the composition more breathable and interesting. 

    Alignment and Layout

    Image Source

    There are two major ways we create site layouts: symmetrical and asymmetrical. Both help us achieve a balance of web content. While the perfectly symmetrical pages look neat and ordered, it can become difficult to retain that perfect throughout the site. Especially when we are talking about things like logo designs. They always cannot be perfectly symmetrical.

    Asymmetrical layout makes the design appealing and balanced at the same time. Introducing an element of unpredictability, it helps keep user’s attention rooted to the design and communicates the brand message without weighing down the layout.

    Repetition of Elements

    Image Source

    Another way we communicate importance and organization is through repetition. When the brain sees the same or similar element spread throughout the website, it starts to group them together, assigning a common meaning to the group. 

    In the Spotify example above, we saw that repeating the color green across tags helps the user associate that color with tags exclusively. Whenever we see anything highlighted in that shade of green, we’ll have no trouble spotting them as different tags/genres of music. 

    Proximity and Similarity of Objects

    Image Source

    When things are placed together, we consider them part of the same group. 

    Think of a navigation menu. Each button on the menu leads to a different page but because they are next to each other on the navigation bar, we consider them part of the navbar – not individual buttons. 

    Anyone looking at those buttons understands them to be part of the group. 

    It’s the same thing with CTA buttons. On well-designed websites, the call-to-action buttons are all designed and sized similarly. So even if they aren’t close together, the design similarities help us connect them as being together. 

    The proximity and similarity of objects help make visual hierarchy more branded and sophisticated. 

    Textures and Style

    Image Source

    Things that are textured — such as prints and patterns —- seem more prominent than simple, solid backgrounds. 

    When organizing your website elements, you can also consider textures and styles to highlight stuff. 

    Not only highlight in the order of importance but also to make something appear more interesting, rich, and intriguing. 

    Conclusion

    While visual hierarchy is primarily an organizational tool, it’s usefulness doesn’t end there. It also makes the design framework more intuitive and organic. When you follow principles of hierarchy in visual design, you create design spaces that are interesting, clean, ordered, and purposeful — and never boring. 

    Effective visual organization always aids engagement and improves user journey. 

    To make it work for you even more, ask your non-designer friends when you do your first hierarchy sketch. Ask them what they see first, what leaps out to them, and what makes them confused about the layout. 

    That will not only tell you how critical hierarchy is to design but also how beautifully it hides in plain sight, consistently aiding the design objectives. 

  • How to Add Website Animations on Your WordPress Website: A Step-by-step Guide (2022)

    Adding website animations is the latest trend in web design that you could use to your advantage. It creates a dynamic and flowing user experience for your website visitors and at the same time, it adds to your website’s aesthetics. 

    There are different ways to set up website animations. It could be as simple as elements moving as the cursor moves, or it could be objects appearing as the website loads. However, it’s easy to get excited with adding this feature into your website and unknowingly make the experience of your audience overwhelming. Before learning how to add animations, we must first understand how to use animations strategically.

    What Are the Dos and Don’ts in Using Website Animations?

    Adding animations to your website carelessly can pull you away from your goals. Here are some tips to make the most out of website animations:

    Do test for responsiveness

    Checking whether your animations are working properly from different viewports is an essential step that most people overlook. Sure it looks great when accessed from a PC or a laptop, but does it look good from a tablet or mobile device? We can’t completely disregard people who use mobile devices because, in fact, about 92.1% of internet users accessed the internet through a mobile phone!

    Don’t go overboard

    Use website animations in moderation. Don’t just add them for the sake of it. Remember, adding website animations should improve functionality on your website. When you add too much, it might be bothersome for your website’s audience. This could cause them to exit your website without spending enough time on it.

    Do use animations for a specific purpose

    Only use animations when you can justify it with a defined purpose. As an example, you could use it to trigger behavior, like clicking a button or call to action; or you could shift your website visitors’ attention to an element on your website!

    So how can I add website animations on WordPress?

    Now that you know how to use website animations strategically, let’s move on to how to add website animations on WordPress! 

    By using Stackable, you won’t need to know how to code to add animations to your WordPress website. You could wow your website visitors with simple to complex animations with just a few clicks.

    One of the ways you can create animations with Stackable is through Motion Effects. Here, we have a simple hero section for a website (This is actually from our Speck UI Kit). What we can do is create an animation that might make loading your website more interesting. This is called an Entrance Animation. What we did is we selected the right column, and navigated to the Advanced Tab of the Inspector. In the Motion Effects panel, we selected the Entrance Animation option and put in these values:

    Note that we added the vertical position, this will give an effect like it’s entering from the sides of the screen. Now we’ll do the other column, but instead of adding the same value for horizontal position, we’ll put -50. These are just simple changes to the settings, but it elevates the design on the frontend by a lot. See how it looks:

    We could also add Scroll Animations which are simple effects that you can add to elements of your website so that they could appear or move as the user scrolls through your website. Here’s an example:

    To achieve this, all you will have to do is select the element that you want to blur and in the Motion Effects panel, instead of selecting Entrance Animation, select Scroll Animation. We achieved the above result by making the Blur setting 10 for the Entrance Animation and left everything as is.

    You could experiment with these Motion Effects controls so you could achieve a truly unique motion effect on your website!

    Next, we could use Stackable’s Transform & Transition to improve user experience. Here, we have three columns. What we’d like to do is to transform each column when the cursor is hovering over it. This will give your audience a visual motion of where they are navigating on your website.

    What we want to do is select one column at a time. Navigate to the Advanced tab of the Inspector, and there you will see the Transform & Transition panel. Just select this and you will see these design settings:

    Select the Hover State icon beside Transform, and select the Hover State option. In the Translate Y setting, input -20. Do that for the rest of the columns so that when you’re done, you get something like this: 

    There you have it! That’s how you could create website animations using Stackable. These are very simple and minute details but definitely elevate the design from just static elements on your website.