Design Production Workflow Overview

To maintain design productivity and quality, key points and important considerations are outlined.

info

• The listed content is just an example. Please refer to it based on your project requirements and schedule.
• Assumption: The following scenarios are anticipated. Implementing these points will help ensure the overall progress of the project runs smoothly.
  • Project:
    • In the case of large-scale projects
    • In the case of projects that anticipate long-term operation and maintenance
  • Structure: When multiple companies or individuals are involved, dividing and sharing tasks

Introduction

In CMS design, it is important to design with a reusable component design philosophy and to create prototypes properly.

Prototypes allow you to align the final recognition of the site, including screen transitions, in the design stage, making it easier to progress the project smoothly.

Example of Componentization

• Header
• Footer
• Headings
• Buttons
• List of articles
• Card UI for listing
• Pagination and more

Document Verification

Please check the following in advance:

• Page list (sitemap)
• Screen design document, wireframes

Checkpoints

From the page list, confirm whether it is a "dynamic page to be templated in CMS" or a "static page".

Page-level verification

• Confirm the "items to be output in CMS" and "those that are not".
• In particular, items to be output in CMS (items to be output in HTML) require consideration for operation, as mentioned later.
• For items to be output in CMS, also check how the display will be affected by "pattern differences" or "presence/absence of elements".

1. Basic Points

Images	Ensure that the image cropping range is clear. Especially when there are images with text or overlays, make it easy for the coding team to collaborate. Group layers and give them clear names for easy understanding. In Adobe XD, set the export target.
Others	If the display varies by pattern on pages to be templated, include all patterns in one image.

2. Creating Prototypes

Include the following in the prototype.

Link Settings	Set the destination of the link so that it is clear where it will navigate to (internal or external links). Ensure that the clickable area is clearly defined.
State Management	Design for changes in state management, transitions, animations, etc., to make the design and behavior clear when they change. Design for hover state Design for disabled state Design for overlays (e.g., hamburger menu on mobile, modals, pop-ups) Design for on/off toggles (checkboxes/radio buttons)
Other Elements with Motion	Behavior of sliders Parallax effects etc.
Forms	Display for errors Display for confirmation screens Display after submission

Share the created prototype with the client and the project team for review. Depending on the sharing settings and tools, feedback and revisions can be efficiently done using the comment feature.

3. Creating Design Guidelines

Create design guidelines and collaborate with the coding team. Summarize them in the design artboards or create separate documents.

The following are examples of the contents:

Design Rules	Font Information List Font Size Rules including Headings Font Family For Web Fonts: Specify the URL and license of the fonts used If not using Web Fonts: List device fonts for Win/Mac Color Scheme (List of Colors Used) Layout Patterns and Rules Rules for Spacing, Margins and Padding Image Material License Other Style Guide Information etc.
Component List	Summary of Commonly Used UI Components within the Site Page Titles Headings Buttons Lists (such as News Lists) Card-style UI Pagination Various Parts Used within Articles (Content Detail Pages) etc.
Supported Devices	Supported Devices: Smartphones, PCs, Tablets, etc. Rules for Display Differentiation by Device Breakpoints

4. Other Considerations

Common design process revisions and additional requests should be confirmed in advance.

Checkpoints

• Designing 404 pages and loading screens
• Creating favicons
• List displays: How to handle cases with zero items
• Component units: Whether to consider patterns without elements (such as images or descriptions)
• Images: Whether to display the same image on both PCs and smartphones or use images with different ratios
• Whether to create designs for WYSIWYG editors