Design Tips For Building Team Sections that Rock

By Chen Ben Ami

Sections are everywhere. Go ahead and look at some of your favorite websites. You’ll see that almost every one of them is made up of sections. These sections are built from rows, and designed to convey a specific theme or message. They break content into digestible sizes and contain focused information so website visitors don’t get lost.

Most websites are built from sections

Look at your favorite websites, and you’ll see they are built from sections.

Duda’s pre-designed sections make it easy for you to build well-designed, engaging websites quickly. These sections can be added to your websites in a click and then customized with your own images and text.

In addition to having more than 100 pre-designed sections in your platform, Duda’s new Team Sections enables you to build and save sections of your own, as well as copy and save sections from existing sites. This new functionality – unique to Duda – enables you to save a row, rows, and entire pages, share them with your teammates and clients, and use them over and over again. For more about how to build sections, see this support article.

Two ways to create sections

There are two ways to create sections.

Tips for building great sections

Global Design

Sections automatically take on a site’s Global Design settings, so the fonts and colors change according to the site to which they are added. This means sections easily fit into any site, minimizing the amount of customization you need to do when you add one to a site.

Font types & sizes

While sections automatically take on Global Design settings, you can override these settings so that a specific font or color stays the same on every website. This is handy, for example, if you’ve incorporated a stylized signature and want it to stay as is, regardless of the Global Design settings of the site to which it is added.

Override settings you want to keep

Override settings that you want to keep in every website.

Buttons

You’ll want to override buttons in cases when the background is dark and the button should be white, for example. Don’t forget to override the border color and hover border color, too. However, try not to override rounded corners, so that the button shape remains consistent throughout the site.

Try to make the buttons flexible.

Don’t override button shape, so that these stay consistent throughout the website.

Responsive & motion design

Entrance animations, parallax & hover

Entrance animations are a great way of keeping a site in motion. Parallax is another good way of doing this. Remember to use these techniques when building sections, as they add vitality to the section, and to the site. Don’t forget to change the order of animations if you remove or reorganize columns in a section.  

Devices

Remember that your sections will be viewed on multiple devices, so review them on each device. As with everything you design in Duda, you can adjust how a section appears on a specific device so that it looks perfect everywhere.  

Styling & images

Real images & text

It’s better to use real images as placeholders rather than blank images. This helps you and your teammates better understand where and how to use the section. The same applies to text – using real text is better than using lorem ipsum, as it gives you a sense of what type of message can be written in a given area.

Stick to real images and text.

Use real images and text to give a real sense of what can be conveyed in a section.

Specific colors & styling

Try to use styling that suits a variety of websites. While you can use different font and button colors in your sections, remember that when the section is added to a new website, these settings will be replaced by Global Design settings (unless you override them). An easier option is using background or overlay background colors, which are easily replaced in new websites.

Keep styling solid

Try to use styling that suits a variety of websites.

Content

Don’t go overboard when it comes to the amount of text in your sections. You want there to be enough room for relevant messaging, but you don’t want to have so much text that visitors don’t read it. Keeping things short and sweet is a golden rule of internet design, and applies to creating great sections, too.

What kind of sections should you create?

Anything that will be helpful

If you have a well-designed section or page and want to use it again, just save the section (or page) and it will be ready the next time you need it. Also, if you’re in the middle of building a site and remember that there’s a section in another site that would be perfect for this site, just go to the site where that section is, save it as a section, and use it in your current site. When designing a section from scratch, think about how you could use it in several different types of sites.

Full pages (a.k.a. copy pages between sites)

You can design sections for any pages that you feel you may want to use over and over again. This applies to both general pages as well as pages that have a unique structure or purpose, such as Contact Us pages, Team pages, etc. You can also move pages from one site to another using this technique. Simply save the page from one site as a section, open the other site, click Team Sections and add the section you saved from the first site to the second one.

Easily altered

You can design sections that are easily altered by adding or removing columns or rows. This is a great way of customizing sections with minimal effort. For example, a 3-column section can easily accomodate a bit of additional information by adding another column. It can accommodate a lot of additional information by duplicating it into a 6-subject table. A small change in such sections is an easy way to create a totally different section.

Some sections are easy to adapt

Create sections that are easy to adapt.

Adapting sections to perfection

Keep these points in mind as you use and adapt sections:

How to choose the right section

There are two ways to go about choosing sections: by category (for example, Info, Team, etc.) or by layout. For example:

You can take a Restaurant section and adapt it for Team members.

From Restaurant Menu to Team

Use a Menu section to build a Team section.

Or you can take a Contact Form and adapt it for an About Us page.    

Contact Us to About Us

Use a Contact Us section to build an About Us section.

Keep the amount of text similar

When replacing text in a section, try to use the same amount of words. Adding too many (or too few) words can make it hard to read, or make the design unbalanced.

Number of sections per site and page  

There’s no magic number of sections that make a perfect page or site, but here are some things to keep in mind.

  • For one-page websites that have several sections, use anchors to make it easy for users to navigate between sections.
  • For websites with multiple pages, don’t go overboard on each page. If there are too many sections, users won’t keep scrolling.
  • If a page has a lot of text, try breaking up the text with something that is more visual, like a Contact Us section with a button.
  • For pages with sections that contain several different ideas, try alternating between sections that have darker and lighter backgrounds. If an entire page conveys a single idea, you may want to have the same type of background for every section.

Do & Don’ts

List of Do's and Don'ts

Here’s a short list of things to do, and things to avoid.

Just the beginning…

Sections are a completely new way of building websites, enabling you to create a library of sections, saved in categories to help you and your teammates build more, higher quality websites, in less time.

It’s just one of several tools we’re working on in here at Duda to increase collaboration possibilities for you and your team. Stay tuned, because many more will follow!

ProTip: Bookmark this post, so you can refer to these tips quickly every time you build sections.

,

About Chen Ben Ami

Chen is a UX/UI designer at Duda who has experience in many design areas. Chen has studied and worked in the field of industrial design, designing furniture, baby toys & even cars. You can still found products she has designed selling all over the world! Chen went from designing in 3D to 2D, and loves it! As a Gemini, Chen is interested in many fields, including sport and dancing.
Blog Comment Policy