[vc_row full_width=”stretch_row” full_height=”yes” content_placement=”middle” parallax=”content-moving” show_overlay=”1″ pofo_overlay_opacity=”0.8″ show_down_section=”1″ pofo_down_section_style=”down-section-style-2″ pofo_down_section_preview_image=”down-section-style-2″ pofo_enable_responsive_css=”1″ pofo_hidden_markup_1507638387_2_81=”” pofo_hidden_markup_1507638067_2_46=”” pofo_row_overlay_color=”#000000″ pofo_target_id=”down-section” css=”.vc_custom_1688383605111{background-image: url(https://www.syedraheel.com/wp-content/uploads/2023/07/Design-System.png?id=22650) !important;}” pofo_down_section_target_id=”down-section” class=”mobile-height” responsive_css=”height_mobile:480px”][vc_column width=”1/1″ desktop_alignment=”text-center” alignment_setting=”1″][vc_column_text]

[/vc_column_text][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_title_font_weight=”700″ pofo_title_element_tag=”h1″ pofo_hidden_markup_1504858901_2_44=”” pofo_heading=”Design System” pofo_title_color=”#ffffff”][pofo_section_heading pofo_heading_type=”heading-style3″ pofo_text_transform=”text-none” pofo_enable_alternate_font=”0″ desktop_width=”60%” pofo_enable_responsive_css=”1″ pofo_hidden_markup_1507638157_2_77=”” pofo_hidden_markup_1505108355_2_25=”” pofo_hidden_markup_1504858901_2_44=”” pofo_heading=”A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications, and the need for them go hand in hand with the need for scale, efficiency, and consistency in Design.” responsive_css=”margin_bottom_mobile:0px|width_mobile:100%25″][/vc_column][/vc_row][vc_row initial_loading_animation=”fadeIn” id=”down-section” class=”big-section”][vc_column width=”1/1″ pofo_enable_responsive_css=”1″ responsive_css=”padding_right_tablet:20px|padding_left_tablet:20px|padding_right_mobile:15px|padding_left_mobile:15px”][vc_row_inner][vc_column_inner width=”1/1″ desktop_alignment=”text-center”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_title_font_weight=”500″ pofo_heading=”The Design System features a comprehensive collection of elements and principles housed within a centralized design library. This system facilitates design management, enables rapid iteration through the use of reusable components and patterns, and accommodates flexible timelines.” pofo_title_responsive_settings=”” pofo_title_font_size=”20px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″][pofo_lists pofo_list_style=”list-style-6″ pofo_list_preview_image=”list-style-6″ pofo_list_values=”%5B%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-extra-small%20text-uppercase%20text-black%20font-weight-500%20line-height-22%5C%22%3ERole%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22UX%20Design%22%7D%5D”][/vc_column_inner][vc_column_inner width=”1/4″][pofo_lists pofo_list_style=”list-style-6″ pofo_list_preview_image=”list-style-6″ pofo_list_values=”%5B%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-extra-small%20text-uppercase%20text-black%20font-weight-500%20line-height-22%5C%22%3ETools%20Used%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22Figma%22%7D%5D”][/vc_column_inner][vc_column_inner width=”1/4″][pofo_lists pofo_list_style=”list-style-6″ pofo_list_preview_image=”list-style-6″ pofo_list_values=”%5B%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-extra-small%20text-uppercase%20text-black%20font-weight-500%20line-height-22%5C%22%3EServices%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22UX%20Design%22%7D%5D”][/vc_column_inner][vc_column_inner width=”1/4″][pofo_lists pofo_list_style=”list-style-6″ pofo_list_preview_image=”list-style-6″ pofo_list_values=”%5B%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-extra-small%20text-uppercase%20text-black%20font-weight-500%20line-height-22%5C%22%3ETime%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%223%20Weeks%22%7D%5D”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row initial_loading_animation=”fadeIn” id=”down-section” class=”big-section”][vc_column width=”1/3″ pofo_enable_responsive_css=”1″ responsive_css=”padding_right_tablet:20px|padding_left_tablet:20px|padding_right_mobile:15px|padding_left_mobile:15px”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”The Challenge” pofo_title_font_size=”24px” pofo_title_responsive_settings=””][/vc_column][vc_column width=”2/3″][pofo_lists pofo_list_style=”list-style-3″ pofo_list_values=”%5B%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-medium%20text-defaultcase%20text-black%20font-weight-500%20line-height-22%5C%22%3ENo%20Standard%20to%20Follow%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-medium%20text-defaultcase%20text-black%20font-weight-500%20line-height-22%5C%22%3ECreative%20Difference%20on%20Diverse%20Briefs%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-medium%20text-defaultcase%20text-black%20font-weight-500%20line-height-22%5C%22%3EUndefined%20Components%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-medium%20text-defaultcase%20text-black%20font-weight-500%20line-height-22%5C%22%3EScattered%20and%20Dotted%20Assets%3C%2Fdiv%3E%22%7D%2C%7B%22pofo_list_value%22%3A%22%3Cdiv%20class%3D%5C%22text-medium%20text-defaultcase%20text-black%20font-weight-500%20line-height-22%5C%22%3ELack%20of%20Unity%20in%20UX%2FUI%3C%2Fdiv%3E%22%7D%5D”][/vc_column][/vc_row][vc_row initial_loading_animation=”fadeIn” id=”down-section” class=”big-section”][vc_column width=”1/3″ pofo_enable_responsive_css=”1″ responsive_css=”padding_right_tablet:20px|padding_left_tablet:20px|padding_right_mobile:15px|padding_left_mobile:15px”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”The Idea” pofo_title_font_size=”24px” pofo_title_responsive_settings=””][/vc_column][vc_column width=”2/3″][pofo_section_heading pofo_heading_type=”heading-style3″ heading_preview_image=”heading-style3″ pofo_heading=”To enhance cross-functional teamwork and eliminate barriers between design, development, and quality assurance teams.
Add product design thinking to constantly improve the system, in order to get ongoing feedback from all teams.” pofo_title_responsive_settings=””][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” initial_loading_animation=”fadeIn” pofo_hidden_markup_1507639926_2_27=”” css=”.vc_custom_1507639945542{padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_column pofo_column_animation_style=”fadeInUp” width=”1/1″ offset=”vc_col-md-6″ class=”single-img-full”][vc_single_image image=”22548″ img_size=”full” alignment=”center” el_class=”no-margin-bottom”][/vc_column][vc_column pofo_column_animation_style=”fadeInUp” width=”1/1″ offset=”vc_col-md-6″ class=”single-img-full”][vc_single_image image=”22550″ img_size=”full” alignment=”center” el_class=”no-margin-bottom”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” initial_loading_animation=”fadeIn”][vc_column pofo_column_animation_style=”fadeInUp” width=”1/2″ offset=”vc_col-md-offset-1 vc_col-md-5″ pofo_column_animation_delay=”200″ class=”line-height-28″][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”The Grid” pofo_title_font_size=”20px”][vc_column_text]You don’t start building a house without its foundation so the same thing applies to design systems. You just don’t use concrete. The foundation of a design system is your spacing and grid system. I feel like spacing and grids are some of the most overlooked elements when it come to visual design but they can make a huge difference in the look and feel of a design. The reason why I went with an 8pt system is to help the design system be more responsive because all of the top screen sizes are divisible by 8.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”22555″ img_size=”full”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” initial_loading_animation=”fadeIn”][vc_column pofo_column_animation_style=”fadeInUp” width=”1/2″ offset=”vc_col-md-offset-1 vc_col-md-5″ pofo_column_animation_delay=”200″ class=”line-height-28″][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”The Components” pofo_title_font_size=”20px”][vc_column_text]Design Systems are like living organisms due to their inherent complexity and continuous evolution. Just as living organisms adapt and grow in response to their environment, Design Systems also require ongoing refinement and improvement to remain effective. As new technologies emerge, user preferences shift, and design trends evolve, a Design System must actively evolve alongside these changes to stay relevant and impactful.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”22558″ img_size=”full”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” initial_loading_animation=”fadeIn” pofo_hidden_markup_1507639959_2_71=”” css=”.vc_custom_1507640019168{padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_column width=”1/1″][pofo_slider slider_premade_style=”pofo-slider6″ slider_preview_image=”pofo-slider6″ show_pagination=”0″ show_cursor_color_style=”white-move” pofo_image_slides_style_seven=”%5B%7B%22pofo_image%22%3A%2222552%22%2C%22pofo_image_srcset%22%3A%22full%22%2C%22pofo_image_link_target%22%3A%22_self%22%7D%2C%7B%22pofo_image%22%3A%2220265%22%2C%22pofo_image_srcset%22%3A%22full%22%2C%22pofo_image_link_target%22%3A%22_self%22%7D%2C%7B%22pofo_image%22%3A%2220265%22%2C%22pofo_image_srcset%22%3A%22full%22%2C%22pofo_image_link_target%22%3A%22_self%22%7D%2C%7B%22pofo_image%22%3A%2220265%22%2C%22pofo_image_srcset%22%3A%22full%22%2C%22pofo_image_link_target%22%3A%22_self%22%7D%5D” autoplay=”1″ autoloop=”1″ pofo_slider_class=”single-img-slider”][/vc_column][/vc_row][vc_row initial_loading_animation=”fadeIn” id=”down-section” class=”big-section”][vc_column width=”1/3″ pofo_enable_responsive_css=”1″ responsive_css=”padding_right_tablet:20px|padding_left_tablet:20px|padding_right_mobile:15px|padding_left_mobile:15px”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”The Process” pofo_title_font_size=”24px”][/vc_column][vc_column width=”2/3″][pofo_section_heading pofo_heading_type=”heading-style3″ heading_preview_image=”heading-style3″ pofo_heading=”The process begins with the research stage where it is essential to engage in the discussions and brainstorms with the team. This helps to gain a deeper understanding of the challenges faced by the users. By actively listening to real-time user feedback, we can identify their needs and determine what should be included in the Design System.”][vc_single_image image=”22559″ img_size=”full”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” initial_loading_animation=”fadeIn” pofo_bg_image_type=”fix-background” id=”down-section” class=”big-section” css=”.vc_custom_1688384761273{padding-right: 300px !important;padding-left: 300px !important;background-color: #f9f9f9 !important;}”][vc_column width=”1/4″ pofo_enable_responsive_css=”1″ responsive_css=”padding_right_tablet:20px|padding_left_tablet:20px|padding_right_mobile:15px|padding_left_mobile:15px”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”The Result” pofo_title_font_size=”24px”][/vc_column][vc_column width=”3/4″][pofo_section_heading pofo_heading_type=”heading-style3″ heading_preview_image=”heading-style3″ pofo_heading=”A pre-established library increases efficiency, streamlines development processes and facilitates collaboration among developers, designers, quality assurance, and engineers by establishing a common standard.”][vc_row_inner][vc_column_inner width=”1/5″ css=”.vc_custom_1688384617057{padding-right: 10px !important;}”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”Product || Unity”][vc_column_text]A Harmonized and Consistent Product Interface and User Experience.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/5″ css=”.vc_custom_1688384642107{padding-right: 30px !important;}”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”Centralized ||Library” css=”.vc_custom_1688384542938{padding-right: 10px !important;}”][vc_column_text]A Centralized Library for Standardized Assets.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/5″ css=”.vc_custom_1688384559075{padding-right: 10px !important;}”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”Reduced ||Iterations”][vc_column_text]Predefined, Preconstructed, and Reusable Components.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/5″ css=”.vc_custom_1688384675585{padding-right: 30px !important;}”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”Less || Friction”][vc_column_text]From Developers, designers, quality assurance, to engineers.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/5″ css=”.vc_custom_1688384699231{padding-right: 30px !important;}”][pofo_section_heading pofo_heading_type=”heading-style2″ heading_preview_image=”heading-style2″ pofo_text_transform=”text-uppercase” pofo_heading=”Branding ||Standard”][vc_column_text]Unified Standard Branding for everything (Print, digital, and Web).[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column offset=”vc_col-lg-2 vc_hidden-sm”][/vc_column][vc_column desktop_alignment=”text-center” padding_setting=”1″ desktop_padding=”padding-four-lr” alignment_setting=”1″ offset=”vc_col-lg-8″][pofo_testimonial pofo_testimonial_style=”testimonial-3″ pofo_testimonial_preview_image=”testimonial-3″ pofo_title_text_transform=”” pofo_member_name_font_weight=”500″ pofo_member_name_element_tag=”h6″ pofo_hidden_markup_1504865051_2_42=”” pofo_member_name=”This is an excellent company! I personally enjoyed the energy and the professional support the whole team gave to us into creating website.” pofo_member_des=”Mattie Stepanek”][/pofo_testimonial][/vc_column][vc_column offset=”vc_col-lg-2 vc_hidden-sm”][/vc_column][/vc_row]