Design Converter
- Technologies
Flutter
React
Shopify
Flutter
React
Shopify
- Resource
Discord
Discord
Design Converter
Flutter
React
Shopify
Flutter
React
Shopify
Discord
Discord
Education
Last updated on Sep 28, 2024
Last updated on Feb 24, 2024
Design guidelines ensure consistency and cohesiveness in the design of a product, making it easier for users to understand and navigate through the app. The design guideline also helps to maintain a consistent brand image across the various devices.
In this article we will discuss the DhiWise UI Kit and the app design guidelines provided by the platform to improve the overall user experience, making the product highly efficient and effective.
However, before proceeding further let's first understand what DhiWise is.
It is an advanced programming platform that supports multiple technologies for web and mobile application development and offers a range of features such as design to code generation, UI customization, logic generation, API integration, and so on to speed up the development process.
Besides that, The app development platform offers prebuilt UI templates and screen libraries. Also, it streamlines monotonous tasks, freeing up developers to delve into more complex, critical, and imaginative work that requires specialized skills, creativity, and undivided attention.
Therefore to make your app development smoother and more efficient start using DhiWise today!
DhiWise UI Kit is a user interface kit for designers and developers, offering a collection of pre-designed UI elements such as buttons, forms, icons, typography, etc. The kit is recommended for building apps via DhiWise.
But, how do developers and designers benefit from UI kit?
The purpose of the kit is to provide a starting point for creating a consistent and polished user interface, potentially saving time and effort in the overall design process.
Moreover, your app design must follow standard industry design guidelines to achieve the highest accuracy in design-to-code conversion with DhiWise's Mobile technologies. Ensuring precision in design will minimize corrections on the DhiWise platform, resulting in faster code generation.
The use of this UI kit will lead to more accurate conversion, fewer corrections, and faster app development on DhiWise.
These guidelines help designers and developers by providing a set of standards, best practices, and principles to follow during the design and development process. They ensure consistency, accuracy, and coherence in the overall design improving the usability and accessibility of the UI design. Also, it provides a reference for making design decisions.
By following these guidelines, designers, and developers can create high-quality, user-friendly products that meet the needs and expectations of their target audience. Additionally, design guidelines can help streamline the design process and minimize the need for revisions, leading to more efficient and cost-effective development.
The DhiWise’s UI design guideline is divided into the following categories:
Note: For Quality Guidelines refer DhiWise user Documentation quality guideline section .
Let’s look into each of them one by one.
These general guidelines will help you to build DhiWise- friendly designs for the application.
DhiWise supports Figma screens designed only on a Frame . Figma refers to the frame as the root component of a screen, as it allows you to create a container for your desired viewport size. This also helps you in creating complex designs like Auto Layout, Constraints, Layout grids, and Prototyping.
While designing a screen create a screen on Figma canvas using the Frame tool or choose your relevant viewport from the Frame present in the Properties Panel .
It is recommended to manage all the vector images and paths inside a single group. Grouping elements together create a clean design hierarchy and makes it easier to manage and identify specific elements.
Without grouping, vectors for an image are downloaded individually, leading to improper images during design-to-code in DhiWise.
Give your design an identity by naming each layer. Neglecting to do so leads to a messy design hierarchy, making it difficult to identify specific layers when necessary.
In DhiWise, all your screens, files, and components will be named based on the names assigned to the screens and components in Figma. Therefore it is important to give a name to the application’s screen and all the components in it.
For getting your components identified correctly on the DhiWise follow the below guidelines.
These are used in the app’s user interface to take user inputs.
1. TextFields: These must be designed using Frames. Manage proper layering and hierarchy while designing the TextField.
2. Floating TextField: They must be designed using Frames. The Floating TextField designed with an outline must have the main text included within the outline and the hint text inside the outline.
Also, a filled FloatingTextField must display a filled rectangle containing two texts, with rounded top corners and straight bottom corners, and an outline at the bottom.
3. SearchView: The root element for the SearchView must be a Frame, with its child element inside it, or a Group containing a search icon and related text.
a. Root element as Frame
b. Root element as Group
4. Radio: Use a Frame as a root element to design a radio, and the circular shape for the design must be designed using an ellipse only. The ellipse and the text must be in the same group and if multiple ellipses exist place all of them in one group for a better design hierarchy.
5. Checkbox: Use Frame as a Root element for designing Checkbox and it must be designed using a rectangle. The checkbox and its text must be in one group.
a. Switch/ Toggle: Use a Frame as a root element for designing a Switch. The button for switching the thumb slider should lie in the inner area of the background.
However, if the button for the switch in the thumb slider is designed bigger than the background area, it should lie on the area of the rectangular background.
6. OTP View: The OTP View should have 4 or 6 views to enter the values for the OTP code. The views must be aligned with each other.
The input view can also be designed using Line for all the input values, they should be aligned with each other and placed inside the single group.
7. DropDown: Always create a dropdown with the main text, the hint text, and the arrow on the right, keep all inside the single group.
8. TextArea: TextArea is used to get a text input with multi-line. It uses Rectangle and Text inside it as hint text for easy identification.
9. Country Picker: A country picker is used to select a country from the list of countries or country codes for a phone number. While designing, Country Picker keeps inner components inside a Group. Use the country flag, and ISO code of the country with the bottom-facing arrow as shown below.
They are used to display the results related to data, they give information such as progress, display lists, images, etc. Follow the guidelines below to get them correctly identified on DhiWise.
1. Lists: The lists should be designed as the leading Frames or Group containing list items inside them. The components for the list items should look common in the design and be used on the screen.
2. Grid: The design should have a main frame or group that holds all the grid items, with each grid item contained in its own similar-looking frame or group. Additionally, all the components for each grid item should have a consistent design and appear uniformly on the screen.
3. Staggered Grid: Place the images inside the Staggered Grid inside one Group or Frame. Keep the same design for all staggered cells.
4. Chip View: All the chip elements must be placed inside the one Group and each Group must-have text with or without an icon on its left or right. Every chip element should have the same alignment vertically, and the text width inside must be based on the text wrap as per the text size.
5. Expandable List: All the List Items should be placed in the proper Group. And for an Expandable List, the design must include icons in collapsed or expanded mode. The Expand item can be placed anywhere on the screen but not on the extreme bottom.
6. Table: The table component allows you to display the data in an organized manner using rows and columns in a tabular format. Here, the first child object should be the Table header, and the second object should be table data containing all the child objects or cell objects which have similar views.
7. Progress Bar: Use Frame and Rectangle to design a normal progress bar, and use Ellipse for designing the circular progress bar using the Arc tool.
a. Normal progress bar
b. Circular progress bar
8. Seek Bar: It allows users to select a value from the continuous or the discrete range just by moving a slider thumb. It is commonly used for adjusting volume, brightness, or other similar settings. While designing the Seek Bar it should have a thumb and a Rectangular sliding bar.
9. Range Seek Bar: It is a custom SeekBar with two thumbs allowing you to set the range. While designing add two thumbs in the design using Ellipse and a proper Rectangle.
10 Text View: The Text elements must be auto-width while designing it to keep it flexible.
12. Circle Image View: To design Circle Image View use Vectors, Rectangles, or Ellipse. For icons use only vectors.
Implement navigation controls to facilitate user interaction within the app. These controls allow users to navigate through the various sections of the app. When designing in Figma, consult the component guidelines to ensure accurate identification in DhiWise.
1. Button: It helps to communicate throughout the application. They are used to navigate across the app, trigger an event, and more. Keep the Button Text exactly in the center, and use frames to design button.
2. Floating Action Button: It is used to trigger simple events. The Floating Action button is placed mostly on the bottom of the screen UI and it should be designed using the Ellipse, Image, and Background.
The Floating Action Button in the Bottom Bar should be grouped inside the particular bottom bar Group, as shown below.
3. Icon Button: IconButton is one with the icon image. The button must be designed using Ellipse, Image, and background.
4. App Bar: The App Bar should be placed on the top of the screen, and it should cover the screen full width. Always use Frame while designing the inner child of the AppBar as shown below.
5. Bottom Bar: All the inner components of the bottom bar must be placed inside a single Group. The tabs of the Bottom Bar are auto-identified and attached with their related tabs.
6. Header: It is the top element of the web page, its width should be at least 60% of the page’s actual width.
7. Footer: It is located at the bottom of the page. There should be three Texts inside the Footer content and every footer on different app pages should have the same design.
8. TabBar: It is used to navigate between Groups of content that are related at the same level of hierarchy. The Text and its selection line must be aligned together in the Tab Group in the Frame. Also, the Tab must have two similar screens, and the attached pager must be designed according to its background and alignment.
9. Pager: All the elements of the pager should be Grouped inside a single Group. If the screen UI has a BottomBar below the pager area then the Group for Pager and the BottomBar should be separate and not grouped into one.
10. SideBar: It is used to navigate the app pages' different sections. It should be designed using Rectangle or a Frame. All the elements designed inside the SideBar Frame must be in a column in the proper alignment.
These are the controls that are collections of other UI components and are used to set the UI hierarchy for the app screen.
So here are the specific component guidelines-
1. ScrollView: For the scrollable screen all the content between AppBar and the BottomBar should be grouped in a single group to get identified as a ScrollView.
2. RadioGroup: Radio Group should have multiple Radio buttons vertically or horizontally with a similar design for all the Radio buttons.
3. Row: The component should be placed side by side horizontally with one another and have a similar design.
4. Column: The component must be vertically placed one below the other. Also, it should lie under its overlay. And if there are multiple components one below the other vertically, they should have similar designs.
5. Stack: The components are placed on one another to form a stack. While designing a stack the components should overlay each other otherwise they will be identified as a column or a Row.
Follow the below design practices to get your Dialog or Drawer or BottomSheet design correctly identified by the DhiWise.
DhiWise auto-identifies all your screen components and generates codes for the same. However if sometimes the components are not identified due to design changes in such a case changes the view of the misidentified component for correct design.
Some complex components like Calendar and Maps are not identified easily. So, DhiWise offers functionality to change the view of the components for easy component identification.
Here you can find the supported view by DhiWise.
1. Google Map: The component is not identified in the DhiWise auto-identification, so to identify it in the design, change the component view to GoogleMap.
2. Calendar: It is a complex component, if not identified change the component view to Calendar.
3. AutoCompleteTextfield: The AutoCompleteTextfield is similar to the TextField with additional functionality. DhiWise AutoCompleteTextfield as a Textfield, so to make it correctly identify change the view to AutoCompleteTextfield.
4. WebView: For WebView to get correctly identified in DhiWise change the component view to WebView.
5. Fragment:
A Fragment can be used for a sliding drawer, tabbed content, a page in a Pager, or just a normal screen. To make a component identified as a Fragment, change its view to the Fragment type.
In the article, we have discussed the DhiWise UI Kit and the design guidelines. Following these guidelines helps you to build a user-friendly and scalable app in the minimum time.
Then what are you waiting for? Start using DhiWise and make your app work perfectly on every device with the DhiWise design guidelines.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
