Lecture 1: The Rise of Design Systems PDF

DESIGN SYSTEMS LECTURE 1: THE RISE OF DESIGN SYSTEMS AGENDA Topic one Topic two Topic three Topic four Topic five By: Dr. Hanan M Hayat INTRODUCTION TO DESIGN SYSTEMS THE DESIGNER: YOU HAVE A SYSTEM FOR HOUSING DESIGN FILES THE FRONT-END ENGINEER: MUCH OF YOUR TIME IS SPENT ON DEVELOPING T...

DESIGN SYSTEMS LECTURE 1: THE RISE OF DESIGN SYSTEMS AGENDA Topic one Topic two Topic three Topic four Topic five By: Dr. Hanan M Hayat INTRODUCTION TO DESIGN SYSTEMS THE DESIGNER: YOU HAVE A SYSTEM FOR HOUSING DESIGN FILES THE FRONT-END ENGINEER: MUCH OF YOUR TIME IS SPENT ON DEVELOPING THE SAME CODE SOLUTIONS WITHIN DIFFERENT CONTEXTS THE PRODUCT MANAGER: THERE IS A LOT OF PRESSURE FROM USERS AND OTHER STAKEHOLDERS TO DELIVER SOMEHOW, AMID ALL OF THIS CHAOS, YOU NEED TO PROVIDE USERS WITH A TOP- NOTCH USER EXPERIENCE Design systems are a collection of shared principles and practices that help to inform the work of designers, product managers, and engineers, as well as sales and marketing. Design systems are the natural evolution of the graphic standards manual for today’s organizations. These systems do more than merely convey design guidelines such as typeface, logo, or color standards. They unite designers, developers, and product managers along a set of core principles while enabling their work through reusable components. By: Dr. Hanan M Hayat THE RISE OF DESIGN SYSTEMS WHY Designers are not only stylists Consistent design will improve the user experience. Establish guidelines and usability patterns will enhance communication between team members and simplify the interface for end users. Automating and documenting routine tasks, designers have more time for thinking and exploration. By: Dr. Hanan M Hayat A HISTORY OF SYSTEMS IN DESIGN: HTTPS://BOOTCA MP.UXDESIGN.CC/ THE-HISTORY-OF- DESIGN- SYSTEMS- 158141B94609 Article 1 Article 2 What Is a Design System | Design The History of Design Systems. Systems 101 | Figma Blog Introduction | by Kapil Moon | Bootcamp (uxdesign.cc) By: Dr. Hanan M Hayat THE RISE OF THE WEB HTML only HTML and CSS https://youtu.be/BANChTkxYYY By: Dr. Hanan M Hayat  WHO’S VISION! who should control how a page would be viewed. On the one side, many felt that authors should determine the final presentation, ensuring that it matched their intention and vision. On the other side, some believed that users should have the ability to decide how they would like to view a page (think in terms of things such as preferred font size). These debates spurred the creation of the World Wide Web Consortium (W3C), to help work out standards and best practices for the Web, and, ultimately, HTML and CSS. By: Dr. Hanan M Hayat  Component based JavaScript helped to change the way we approach building websites allowing developers to build components rather than entire Table based pages To... By: Dr. Hanan M Hayat THE INFLUENCE OF TECHNOLOGY ON BUSINESS Computers were no longer a luxury; they were a necessity Hence, urgency to build bigger, better websites and software products as quickly as possible. By: Dr. Hanan M Hayat THE MOVE TO AGILE The traditional waterfall method of software development was built on heavy process and long lead times. It could take years to get from idea to distribution. Once locked into a concept, organizations using the waterfall process were In 2001, frustrated with the lack of unable to easily change course if they found that progress, thought leaders gathered to something simply wouldn’t work. This was find a more efficient way to develop because a waterfall process approached product technology products.5 This was the birth development in a sequential fashion. of Agile, a fast-delivery approach to Requirements would be handed down to building software. It allowed designers, and designs would be handed down to organizations to deliver their products developers, leaving little room for collaboration quickly, with full knowledge that they may not have gotten it right the first among teams. Without this collaboration in place, time. They could then gather user it was extremely difficult to shift directions when feedback and make improvements in problems arose later in the process rapid succession. Agile focuses on the people building and using the software and not the process or tools it takes to make that software. By: Dr. Hanan M Hayat IN CONCLUSION The rise of component-based architectures and the move to Agile software development has created a need for design systems. With so much of our design work focused on small pieces of the product, it is easy to lose sight of the whole. Design systems provide a necessary overview of the product, its goals, and driving vision. It details the language used to build and design, enabling your team to work faster and more confidently. Additionally, design systems provide an iterative snapshot of your interface and are an essential wayfinding tool for engineering, product, and design By: Dr. Hanan M Hayat READ Design Systems 101 (nngroup.com) What are Design Systems? — updated 2024 | IxDF (interaction-design.org) By: Dr. Hanan M Hayat