Technology News
Digiato make a new design system
- Date: September 15, 2021
- Platforms: Web
INTRODUCTION
Who is the Digiato?
Digiato is one of Iranian popular websites in technology; due to its independence and lightning-fast broadcasting it has been able to obtain a huge community of loyal fans for itself and as a result now the website is an influential player in Iran’s market. In addition to national and international news coverage in IT sector, it also covers articles in various fields including Science, Automobile and business and has more than 10 million visits per month.
In addition to covering both national and international developments in the IT sector, Digiato also features in-depth articles on science, automobiles, startups, and business trends. With over 10 million monthly visits, it plays a significant role in shaping public opinion and providing valuable insights to tech enthusiasts and professionals across the country.
- Duration: 72 Days (2.5 Months)
- Industry: Technology News
- Services: Design System
Digiato Design system
What was the challenge?
The Digiato project came with its set of challenges. These challenges involved in-depth analysis of user data, including user behavior and preferences, along with conducting interviews with various stakeholders and users to gather essential feedback. Crafting relevant and effective survey questions and selecting the most suitable methodology for advancing the UX process were among the primary hurdles. Additionally, aligning the UX improvements with the unique requirements and high standards of a renowned tech news brand like Digiato added complexity to the project.
SOLUTION
What did we do to fix the problem?
To address the challenges in the Digiato project, we implemented a multi-faceted strategy. Firstly, we invested significant time in crafting well-structured interview questions for stakeholders and users to ensure we obtained valuable insights. Our choice of the Double Diamond design thinking method was instrumental in propelling the project forward, enabling us to thoroughly explore, define, develop, and deliver effective UX improvements. The decision to use the Double Diamond method was due to its suitability for dealing with complex problems and its structured approach for in-depth user-centered design. Additionally, we conducted extensive data analysis, making the results readily accessible for review at the end of this case study. This approach allowed us to address the challenges effectively and provide an optimized user experience for Digiato.
Tech and Tools
-
Type:
Default
-
Leading icon:
-
Label:
-
Hint text:
-
Help icon:
-
Destructive:
-
Size:
Filled
Logo
While we haven't redesigned the Digiato logo, we introduced subtle modifications to enhance its visual appeal. These modifications included incorporating a new shade of blue, known as "Azure Blue," into the logo's color palette. These small yet impactful changes contributed to a refreshed and more modern look for the Digiato brand, aligning it with contemporary design trends while maintaining the essence of the original logo.
Color Palette
In our project, the color palette played a pivotal role in conveying the desired aesthetics and brand identity. Our palette consisted of four primary colors: Navy Blue, Azure Blue, Outrageous Orange, and Solitude. While Navy Blue and Azure Blue were selected to evoke a sense of trust, professionalism, and technology, Outrageous Orange was introduced to inject vibrancy and energy into the design. However, the addition of Azure Blue was a strategic choice. This shade of blue not only harmonized with the existing color scheme but also symbolized stability and reliability. Its inclusion aimed to reinforce the brand's commitment to delivering trustworthy and cutting-edge content to its tech-savvy audience.
- black
- 03050C
- 04060F
- 050713
- 060918
- 070B1E
- 090E25
- 0B112E
- 0E153A
- 121A49
- 16205B
- 454D7C
- 6A7196
- 888DAB
- A0A4BC
- B3B6C9
- C2C5D4
- CED1DD
- D8DAE4
- E0E1E9
- white
- black
- 000F1E
- 001326
- 001830
- 001E3C
- 00264B
- 00305E
- 003C76
- 004B94
- 005EB9
- 0075E7
- 3391EC
- 5CA7F0
- 7DB9F3
- 97C7F5
- ACD2F7
- BDDBF9
- CAE2FA
- D5E8FB
- DDEDFC
- white
- black
- 200C06
- 280F07
- 321309
- 3E180B
- 4E1E0E
- 622511
- 7B2E15
- 9A391A
- C14720
- F15928
- F47A53
- F69575
- F8AA91
- F9BBA7
- FAC9B9
- FBD4C7
- FCDDD2
- FDE4DB
- FDE9E2
- white
- black
- 161718
- 2D2E31
- 43464A
- 5A5D63
- 70747C
- 878C95
- 9DA3AE
- B4BBC7
- CAD2E0
- E1EAF9
- E7EEFA
- ECF1FB
- F0F4FC
- F3F6FD
- F5F8FD
- F7F9FD
- F9FAFD
- FAFBFD
- FBFCFD
- white
Color Accessibility
In this project, we diligently conducted accessibility testing for all colors used, ensuring compliance with WCAG 2.1 guidelines. This commitment to color accessibility aimed to guarantee an inclusive and user-friendly experience for all website visitors, including those with various visual impairments, and align with best practices for web design and usability.
Typography
In the Digiato project, we employed the "IranSans" (variable version) font, known for its excellent legibility in both text and numerical content. This font choice was made to ensure clear and readable typography throughout the website, enhancing the overall user experience and readability of the content.
- Regular
- semibold
- bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
‘?’?!(%)[#]@<&>-_-=+~!
Font size & Line hight
Given our font choice of "Iran Sans" and the paramount importance of readability in the Digiato project, we meticulously selected appropriate font sizes and line heights. The goal was to strike a balance between legibility and aesthetics, ensuring that text remained comfortably readable across various device sizes and screen resolutions. The chosen font sizes and line heights were tailored to create a visually pleasing and user-friendly reading experience, catering to the diverse needs of our audience while maintaining a consistent and professional typographic style.
- بنچمارک پردازنده مخصوص لپتاپ اینتل آلدر لیک Core i7-12700H در پایگاه
- داده گیگبنچ فاش شده و نتایج آن نشان میدهد که این پردازنده تا ۳۵ درصد از
- سری AMD رایزن ۵۰۰۰H سریعتر است.
Grids And Spacing
We meticulously crafted a responsive grid system that played a pivotal role in shaping the layout of the website. This grid system was designed to accommodate a maximum container width of 1600 pixels, along with 12 columns, 16-pixel gutters, and 24-pixel margins. The significance of this grid system lay in its ability to provide a consistent and harmonious structure across all screen sizes, from large desktop displays to mobile and tablet devices. By ensuring that content scaled seamlessly and maintained readability on various screens, this responsive grid system not only enhanced the user experience but also contributed to the overall aesthetics and usability of the Digiato website.
We adopted a consistent and systematic approach to spacing by using an eight-pixel baseline grid. This approach ensured that all elements, from text blocks to images and buttons, maintained a harmonious and structured alignment throughout the website. Such attention to spacing not only enhanced visual clarity but also contributed to a polished and professional appearance, reinforcing the commitment to quality and precision in design.
- 8PX
- 16PX
- 24PX
- 32PX
- 40PX
- 48PX
- 56PX
- 64PX
- 72PX
- 80PX
Forms list
Inputs are a crucial element in any user interface, and in the Digiato project, we recognized their paramount importance. We meticulously designed and defined various input and forms types, including text fields, textareas, dropdowns, group buttons, radio buttons, checkboxes, switches, ranges, and tooltips, each with attention to detail. Beyond their visual appeal, these inputs were designed to cover a multitude of scenarios, such as error states, disabled states, hover effects, and validation feedback. This comprehensive approach not only ensured a polished and cohesive user interface but also significantly enhanced user interaction and usability.
Table
Tables play a pivotal role in the Digiato project, given their significance in presenting data and information effectively. In a project of this nature, where technology-related content and data are central, well-designed tables are crucial for organizing and displaying information in a structured and comprehensible manner.
| نام تلفن همراه | مشخصات پردازنده | مشخصات باتری | قیمت |
|---|---|---|---|
| ردمی نوت 8 شیائومی | کولکام اسنپدراگون 665 | 4000 میلیآمپر ساعت | ۴٬۴۴۹٬۰۰۰ تومان |
| گلکسی A21s سامسونگ | اکسینوس 850 | 5000 میلیآمپر ساعت | ۴٬۳۹۲٬۰۰۰ تومان |
| آیفون 11 پرو مکس اپل | اپل بایونیک A13 | 3969 میلیآمپر ساعت | ۲۹٬۷۰۰٬۰۰۰ تومان |
Ensuring that tables are responsive for mobile and tablet devices underscores our commitment to delivering a seamless user experience across various screen sizes, further enhancing the accessibility and usability of the Digiato website.
- صفحه نمایش ۶٫۳ اینچ
- دوربین اصلی ۱۳ مگاپیکسل
- پردازنده اصلی اسنپدراگون ۶۶۵ کوالکام
- مشخصات باتری ۴۰۰۰ میلیآمپر ساعت
Other Components
In the Digiato design system, we've introduced a variety of essential components to enhance user interaction and content presentation. These components include tabs for organized content navigation, accordion menus for space-efficient content display, tooltips for providing additional context, versatile media players for multimedia playback, and cards for effective information organization. With the expansive scope of the Digiato project, these components have been instrumental in ensuring a seamless and engaging user experience, catering to a diverse range of content and user interaction needs.
dotline has been an essential partner in developing our brand and building out our website. We think of them as an extension of our team.
kamran Khorsandi
CEO, Digiato