Consistency

Consistency in Design Systems

The Importance of UI/UX Consistency in Design Systems for Front-end Developers

Companies around the world have come to realize the significance of user experience (UX) and user interface (UI) design in the success of their digital products. Web and app development have become more than just functional elements; they now need to be visually pleasing, reflecting care and attention to detail and keeping up with evolving standards. With this in mind, design systems have become an essential part of most successful product development. In this blog post, we'll dive into why front-end developers need to focus on UI/UX consistency in design systems.

1. Maintain brand identity: Consistency across the application aids in maintaining the brand identity of a product. A well-developed design system should be free of inconsistencies across all aspects such as color palettes, typography, stylesheets, and user interface assets. Establishing a design system improves the effectiveness of marketing and brand communication with customers.
2. Facilitates code consistency: Consistent design patterns will ensure a smoother and more consistent design process. Design systems help developers plan and implement reusable components and patterns, resulting in better efficiency. Ensuring code consistency also aids in making the application easier to manage, which is more critical as the complexity of the product grows.
3. Cost and time efficiency: Building and maintaining an application requires a considerable amount of time, effort, and money. You can streamline the process by making use of design systems. Developers who use a design system eliminate the need to develop and code from scratch, reducing the time required for implementation. The more consistent the design system, the more efficient the workflow.
4. Enhances User Experience: One of the reasons for user frustration while browsing websites or apps is when the user interface is lacking in consistency, leading to confusion. As a developer, incorporating a consistent design system not only ensures cohesion but also aids in improving the user experience and user satisfaction levels, keeping them engaged in the product.
5. Easier Collaboration: Design systems are an essential tool that promotes better collaboration across development teams. Team members can efficiently communicate and work on common principles and guidelines, ensuring everyone understands the overall product. This way, everyone involved in development can contribute to the brand identity and application's consistency in the long run.

Conclusion:

front-end roadmap

By focusing on UI/UX consistency in design systems, front-end developers can ensure that the application maintains the brand identity, is efficient in development, cost-effective, and reliable in usage for the end-user's satisfaction. It aids developers in ensuring the consistency of the design process throughout the development of a product. Thus making the design process more efficient, collaboration more accessible, and the end result is an application that delivers a superior user experience. We hope this blog post has been enlightening in helping you understand the importance of focusing on UI/UX consistency in design systems as a front-end developer.

Specific cases

1. Using Styled Component in React Native

• The power of this is to be able to give meaning to the components that are being styled

• const Title = styled.Text`
    color: blue;
    background-color: red;
  `
  

2. Installation and Using

• yarn add styled-components
  

• import styled from styled-components/native
  

3. Making style more meaningful

4. Two ways of styling

• styled.View``
• styled(Card.Cover)``
  • By using the parentheses, we can give it an external components(e.g: 'react-native-paper') that can style as well.

5. Styled Component

• Styled Component also supports more complex sytled (like transform), which would normally be an array, and shorthands (e.g. for margin) thanks to css-to-react-native
• this css-to-react-native converts CSS text to a React Native stylesheet object.

6. Template string

• conditional usage of css-to-react-native

• import styled from 'styled-components/native'
  
  const SafeArea = styled(SafeAreaView)`
    flex: 1;
    ${StatusBar.currentHeight &&
    `margin-top: 
    ${StatusBar.currentHeight}px`}
  `
  

• The reason for this is because in IOS safe-area-view has not been included in Android so that currentHeight property only available in Android better UI
• <SafeAreaView> is a special component in react-native that trying to avoid and dodge --> means by default, there is a white bar in the bottom line of the App
• remove flex: 1 so that the default white bar will be removed

7. Theming

• By using react contextAPI

8. React-Native-Paper theme

• Using styled-component/native

• import {ThemeProvider} from styled-component/native
  import { theme } from "./src/infrastructure/theme";
  
  export default function App() {
    return (
      <>
        <ThemeProvider theme={theme}>
          <EventsScreen />
        </ThemeProvider>
        <ExpoStatusBar style="auto" />
      </>
    );
  }
  

• const EventCard = styled(Card)`
    background-color: ${(props) => props.theme.colors.bg.primary};
  `
  
  const EventCardCover = styled(Card.Cover)`
    padding: ${(props) => props.theme.space[3]};
    background-color: ${(props) => props.theme.colors.bg.primary};
  `
  
  const Title = styled.Text`
    padding: ${(props) => props.theme.space[3]};
    color: ${(props) => props.theme.colors.ui.primary};
  `
  

9. Expo-Google-Fonts

• npx expo install expo-font
  npx expo install @expo-google-fonts/inter
  

• inter means the specific google font you want to install in your app (e.g: oswald, lato ...)
• expo google fonts latest

• import { useFonts as useOswald, Oswald_400Regular } from '@expo-google-fonts/Oswald'
  
  // load in App
  const [oswaldLoaded] = useOswald({ Oswald_400Regular })
  

• Use google font in components

• const Title = styled.Text`
    font-family: ${(props) => props.theme.fonts.body};
    padding: ${(props) => props.theme.space[3]};
    color: ${(props) => props.theme.colors.ui.primary};
  `
  

10. SVG and rating

• SVG stands for scalable vector graphic (it's going to scale based on screen size)
• React Native SVG (standalone library that can be used to render out SVG)

• npx expo install react-native-svg
  

• import { SvgXml } from 'react-native-svg'
  import star from '../../../../assets/star'
  ;<Rating>
    {ratingArray.map(() => (
      <SvgXml xml={star} width={20} height={20} />
    ))}
  </Rating>
  

11. more+