Introduction
Get started with designing your Swift solution
Swift is a ready-made storefront theme for Dynamicweb 10, offering a flexible foundation for building an ecommerce solution. Swift is a full implementation and comes with pre-built navigation, headers, footers, product listing pages (PLP), product detail pages (PDP), cart, checkout pages, a customer center and various content elements. This means you can launch a fully functional ecommerce site quickly, while still having room to tailor the design to your brand identity.
The default Swift design can be used as is, or you can get creative and start configuring and/or customizing the website to your liking.
The customization options in Swift focus on styling and layout. You have design tools available in Dynamicweb to work with logos, images, typography, buttons and colors - all can be configured in a number of ways. That said, the depth and complexity of your design changes can vary depending on your goals.
In this article, we’ll explore two main approaches to working with Swift’s design and layout:
- Adapting Swift to match a brand identity using configuration only (not necessarily pixel-perfect).
- Creating a 'pixel-perfect' match with a provided design or mockup.
Both approaches have different considerations and possibilities and also comes with different consequences. Understanding these options will help you choose the right path for your project.
Note
When it comes to designing the Swift solution, we are aware that most scenarios consist of a combination of configuring the default design alongside customized details. See this distinction as a way to explore the possibilities and limitations of the Swift 2 design.
Approach 1: Configuration only
In this approach, you use Swift’s out-of-the-box styling tools to approximate your brand’s Corporate Visual Identity (CVI) without aiming for a pixel-perfect replication. You’ll configure Swift’s design options—colors, fonts, button styles, image guidelines, and so on — to create a strong resemblance to your existing website or style guide.
Using this approach your website design will get the right look and feel as your identity and at the same time minimize cost and complexity.
When to use this approach
- Speed matters: You want to launch quickly and do not require a one-to-one copy of an existing layout.
- Budget constraints: You want to minimize implementation and development costs by relying on built-in Swift design and configuration features.
- Flexible brand requirements: Your brand’s guidelines can be adapted without requiring every pixel to match an external mockup.
Steps
- Analyze brand assets: Collect your brand guidelines, colors, typography specifications, imagery and any existing design references.
- Configure Swift: In the Dynamicweb backend, set up color schemes, typography, and button styling. Adjust layout and content of header, footer, setup navigation and basic layout options to align with your brand identity.
- Test and iterate: Preview your Swift solution on different devices. Make small adjustments (e.g., spacing, button styles) as needed.
Pros and Cons
| Pros | Cons |
|---|---|
| Quick to set up and deploy | Less precise control over the final design |
| Low development overhead | Might deviate from brand guidelines in subtle ways |
| Takes advantage of Swift’s built-in flexibility | Potential creative limitations for highly detailed UIs |
Approach 2: 'Pixel-perfect'
If you have a detailed design mockup — perhaps from a design agency or an existing website — and you want Swift to exactly match that look, you’ll need additional steps. While Swift’s core styling tools and layout options can get you partway there, you’ll likely need to:
- Add or override CSS rules.
- Employ layout and content elements more strategically.
- Customize templates to achieve the exact layout.
- Customize content elements to support specific content requirements
When to use this approach
- Strict design requirements: You have a highly detailed mockup or an existing site that must be replicated exactly.
- Strong brand consistency: You need complete alignment with corporate design standards across all pages.
- Sufficient budget and timeline: You have the resources to handle the extra customization and testing.
Steps
- Review the design: Ensure you have a comprehensive design guide or mockup specifying layouts, spacing, breakpoints, and hover states.
- Plan custom content elements: Identify where Swift’s default layout might need custom content elements, templates or CSS overrides (for content, headers, footers, product grid, etc.).
- Extend CSS: Write custom CSS or inline styles to achieve the pixel-perfect look—this may include advanced usage of Dynamicweb’s tools (like templates or additional styling sections).
- Iterate and test: Validate each change across different devices and browsers, especially when working with detailed or complex layouts.
Pros and Cons
| Pros | Cons |
|---|---|
| Maximum control over your store’s appearance | Higher complexity and development time |
| Perfect alignment with a strict brand or creative vision | Requires more technical expertise and ongoing maintenance |
| Clear differentiation from “out-of-the-box” designs | Potentially longer time to market |
Comparing the Two Approaches
When deciding between a quick CVI-based adaptation or a pixel-perfect implementation, consider the following factors:
Time to Market
- CVI Adaptation: Faster setup and fewer technical steps, suitable for tight deadlines.
- Pixel-Perfect: More time required for planning, coding, and testing.
Budget
- CVI Adaptation: Lower cost due to minimal custom code.
- Pixel-Perfect: Higher cost due to extra development and design work.
Flexibility vs. Specificity
- CVI Adaptation: Accepts slight deviations from a design concept for quicker results.
- Pixel-Perfect: Demands precise compliance with a design standard.
Maintenance
- CVI Adaptation: Easier to update or evolve because you mainly rely on Swift’s built-in tools.
- Pixel-Perfect: Updates might require revisiting custom templates or CSS overrides, leading to ongoing overhead.
Conclusion
Swift provides a powerful foundation for building an e-commerce site quickly on DynamicWeb 10. Its flexibility allows you to configure visual elements to suit your brand, all while relying on standard, pre-built ecommerce components. Deciding between adapting Swift to your brand (Approach 1) or achieving a pixel-perfect match (Approach 2) depends on your design requirements, budget, timeline, and brand guidelines.
- If you need a speedy, cost-effective solution and can live with small compromises in layout precision, configuring Swift to match your CVI (Approach 1) is the way to go.
- If your brand or client requires an exact replica of an existing design or mockup, be prepared to invest in more extensive customizations through CSS overrides, custom templates, and layout changes (Approach 2).
In the end, both approaches leverage Swift’s out-of-the-box functionality while addressing different levels of design precision. By choosing the right method for your project, you can deliver a user-friendly storefront that aligns with your brand vision.
Look more into the two design approaches to learn the possibilities and limitations in Swift 2’s design process. In the Configuration article we will cover how to go from a moodboard to a website design by configuring our design tools; typography, colors, buttons, logos and images. Our Pixel perfect article introduces 10 customization examples which illustrate what is necessary in terms of time and expertise to get a picture-perfect result.