Configuration only design approach

Explore the possibilities of our design tools

Swift 2 contains a predefined design you can use for your website, however, you can also create your own unique designs. When creating your design you have the flexibility to configure the style tools. This will help you get the desired feel and look on your website relatively easy and fast, but the design is restricted to the limitations of our design tools and default website implementation - it will consequently not be able to do everything.

In this article we will cover how to go from mood board to actual design with a configuration design approach using our tools:

• Color schemes
• Typography
• Buttons
• Logo and images

Create a mood board

A well-crafted mood board not only helps align the visual identity of the website but also acts as a guide throughout the design process. It ensures that decisions about layouts, visuals and graphics remains consistent.

The process to create a mood board could be:

1. Begin with deciding on the colors and typography. They serve as the foundation for the overall design, as they are not merely decorative elements; colors and typography play a critical role in conveying the brand's emotional tone.
2. Next, figure out how the buttons on your website should look. Buttons are one of the most interactive parts of a site, so their design needs to strike the right balance between function and style
3. The logo in a mood board serves as the visual cornerstone of the brand's identity. It encapsulates the essence of the brand in a simple, memorable design
4. Icons are another element to consider when building your mood board. They help users navigate and understand the site.
5. Beyond colors, fonts and buttons, imagery can add depth and richness to the website

Once you've gathered these elements, arrange them on the mood board to see how they interact, the goal is for the elements to feel cohesive. Digital tools like Canva or Figma can be used to organize everything.

An example of a mood board could look like this, where different elements have been defined:

From mood board to configuration

Now let's go from mood board to a website design. That requires the following steps:

1. Use the style tools to create the different design elements
2. Uploading the image and logo files
3. Organize it all an create content in our Visual Editor

The different tools presented here are used to configure the final website design based on the mood board example.

Color schemes

Create the right colorful visual by using the Color schemes tool. You need to define a Color scheme collection in which you create Color schemes. The Color scheme collection is then defined on the website, which makes the connected Color schemes available for pages, rows and paragraphs.

To use the tool go to Settings > Content > Styles > Color Schemes, now click New Color scheme collection, provide a Name and ID and save it. Afterwards create Color schemes that matches the colors of the mood board, you can create as many schemes as needed.

Read more about Color schemes here

Typography

Use the Typography tool to create a typography definition that matches your mood board and can be used across the website on headers, paragraphs, and buttons.

Create a new typography in Settings > Content > Styles > Typography. Click New typography and from here you have five sections to configure: Settings, Base font size & scale, Headings, Paragraphs and Buttons.

Read more about Typography here

Buttons

Buttons is the tool to define how the buttons on the site should look.

New buttons are created in Settings > Content > Styles > Buttons. Here select Add button style and configure the button style with shape, outline and padding. You can also preview your changes in a primary button, secondary button and link.

Read more about Buttons here

Connect Styles tools to the website layout

The color schemes, typography and button created from your mood board need to be defined in the website settings to be connected to the specific website. Head to the website settings of your website, and select the different styles in the Layout tab.

Now your website has the chosen typography and button styling, alongside a default color scheme. The other color schemes in the color scheme collection are also available when editing pages, rows and certain paragraphs. This makes it easy to adjust if content should look different from the default color scheme you have chosen, e.g. if you want to have a section with a contrasting color background.

Logo and images

Create and find the images you want to display on your website, and create a logo that fits the visual identity of the brand. Use the Assets manager to upload your files quick and easy.

Favicon

A favicon help users quickly recognize your website in browser tabs, bookmarks, and shortcuts. To add a favicon, navigate to Content and scroll down to the Design section. Under Favicon, you have two options:

• Browse to select from your files
• Upload new image

Tip: For the best results, use a high-quality, square image (32x32px or 48x48px) in .ICO, .PNG, or .SVG format.

Configuring in Visual Editor

The final step is to put all the design elements together in our Visual Editor and create the website layout imagined from the mood board.

Potential steps:

• Create a header and footer with the correct colors, logos and images
• Get creative and create content for the page with rows and paragraphs that are already available with Swift 2
• Use the images you have uploaded and make use of different color schemes to make your site visually interesting

Based on the example mood board, I have created this design using only our configuration design approach with the presented tools:

Next steps

This article has demonstrated what is possible using only the configurable tools provided by DynamicWeb 10 and Swift 2 when creating a website design.

While the design process is straightforward and produces a great result, it's worth noting that there are limitations to the default website implementation, meaning the design may not be perfect for all needs. Nonetheless, it's a powerful starting point for building an appealing and functional website efficiently.

The next steps could be to take a look at our Pixel perfect design approach where we introduce customization examples which can be incorporated into a website design.