Designing User Interfaces and Experiences (UI/UX)

所在平台: Coursera

课程主页: https://www.coursera.org/learn/designing-user-interfaces-and-experiences-uiux

课程评论：没有评论

第一个写评论        关注课程

课程简介

课程名称：用户界面与体验设计（UI/UX） 课程概述：UI 和 UX 设计是一个充满活力的行业，为具备相应技能的人提供了众多机会。本课程专为有兴趣在 UI 和 UX 设计领域开始职业生涯的人士以及希望创建网页和前端应用程序的开发人员设计。课程强调前端开发中使用的关键概念、工具和方法论。 课程大纲： 1. 课程名称：设计直观的前端和模型设计原则 描述：系统、产品或应用程序的成功依赖于提供无缝和引人入胜的用户体验。以用户为中心的设计（UCD）框架确保最终产品符合用户需求，对于设计产品的用户界面（UI）和用户体验（UX）至关重要。设计思维是一种针对用户中心的 UI 和 UX 设计的解决问题过程，包括多个阶段和策略，帮助设计师和团队创造正确的产品。线框和原型有助于通过早期可视化和测试想法来简化设计过程，节省时间和资源。视觉设计原则，如对齐、层次、对比、重复、接近性、平衡和空间，对于提供有意义的用户体验至关重要。UI 设计专注于数字产品的视觉方面，设计师必须运用最佳实践来开发不同的网页和移动界面组件。 2. 课程名称：网页设计方法论 描述：各种设备上的网页浏览迅速增加。为了建立在线存在，创建在不同屏幕尺寸上均能良好运行的网站至关重要。响应式网页设计是旨在确保网页在所有屏幕尺寸和分辨率下有效呈现，以提高可用性的方法。开发人员使用的另一种方法是移动优先设计，首先针对小屏幕设计产品，然后逐步扩展到更大屏幕。其他适应不同屏幕尺寸的网站优化方法包括自适应设计和流式设计。媒体查询是CSS样式的过滤器，用于根据用户设备的屏幕尺寸修改网站或应用程序的外观。开发人员在发布之前应通过跨浏览器或响应式测试对网站或应用程序进行测试。 3. 课程名称：使用 Figma 进行 UI 设计 描述：Figma 是一个基于网络的设计工具，用于创建用户界面、图标、线框和原型。其独特功能使设计师能够高效协作、创建数字设计。Figma 的核心概念包括框架、组件和图层。框架是将相关元素组合在一起的方式。图层管理个别元素的可见性和定位。Figma 的组件功能使设计师能够构建可重用的设计组件，支持实时更改和更新。组件可以组织成库，便于团队成员之间的访问和共享。Figma 还提供多种图像形状和设计工具。 4. 课程名称：最终项目和评估 描述：在此模块中，您将使用 Figma 和 Thunkable 设计和创建一个交互式销售应用。Figma 是一个强大的 UI 设计工具，用于创建网页和移动应用的线框、原型和高保真设计。Thunkable 是一个以“拖放”风格的可视化编程应用，使每个人都能轻松理解并创建非常交互的移动基于网页应用。您可以使用 Figma 设计布局和功能，然后将 Figma 资产导出到 Thunkable，利用预构件构建功能，并在移动设备或网页预览中测试应用。 这个课程为希望在设计领域打下坚实基础的学习者提供了全面的学习机会。

课程大纲

Name:Designing Intuitive Front Ends and Mockup Design Principles

Description:The success of a system, product, or application relies on delivering a seamless and engaging user experience. The User-Centered Design (UCD) framework ensures that the final product aligns with the user’s requirements. It plays a crucial role when designing a product's User-Interface (UI) and User Experience (UX). Design thinking is a problem-solving process tailored explicitly for creating user-centric UI and UX designs. It includes various stages and strategies that assist designers and teams in creating the right product. Wireframes and prototypes help streamline the design process by visualizing and testing ideas early, saving time and resources. Visual design principles such as alignment, hierarchy, contrast, repetition, proximity, balance, and space are crucial in delivering meaningful experiences to users. As UI design focuses on the visual aspect of a digital product, various design tools are available for creating an engaging and intuitive UI. Visual design focuses on a website’s appearance; therefore, it is essential to use some basic elements as building blocks for developing a good design. These elements enhance the user experience. Certain aspects of UI have a massive impact on users. These include typography, readability, and color theory. A website or app’s UI includes its visual design and functionality. Therefore, designers must employ the best practices for developing different web and mobile interface components.

Name:Web Design Methodologies

Description:Web browsing on various devices is increasing rapidly. To develop an online presence, creating a website that runs on diverse screen sizes is crucial. Responsive web design is an approach that aims to create web pages that render effectively across all screen sizes and resolutions, ensuring better usability. Another approach that developers use for developing web applications is a mobile-first design. It first focuses on designing products for small screens and then progressively expanding them to larger screen sizes. Other website optimization approaches for different screen sizes include adaptive and fluid design. Media queries are filters for CSS styles to modify the appearance of a website or application according to the screen size of the user’s device. As developers widely use responsive web design, it is vital to follow its best practices. Developers should test the website or application through cross-browser or responsive testing before launching it. Progressive Web Applications (PWAs) use web technologies to provide an app-like experience to users. These use various frameworks and patterns to enable them to leverage both web and native app functionalities. Single Page Applications (SPAs) make the website more like a desktop application, offering a more fluid and enjoyable experience by reducing the lag time between succeeding pages. An integral part of PWA is Service workers. These enable offline access, rapid loading, push notifications, and other features. A website can be transformed into a PWA by adding features and altering code to make it behave like an app on mobile devices. PWA Apps can provide native app-like features and even update content in the background so that the users can view the most up-to-date content.

Name:UI Design with Figma

Description:Figma is a web-based design tool for creating user interfaces, icons, wireframes, and prototypes. Its unique features allow designers to create and collaborate on digital designs efficiently and effectively. The core concepts of Figma include Frames, Components, and Layers. Frames are a way to group related elements together and create sections within the design. Layers help manage the visibility and positioning of individual elements within a frame. The Component feature in Figma enables designers to construct reusable design components that can change and update in real-time across various pages and files. Components can be organized into libraries for easy access and sharing among team members. Styles can also be applied to components, such as typography, colors, and effects, to maintain consistency throughout a design. Cards and layouts are additional features within Figma that help to group related content and actions in a flexible and extensible container. Figma also offers a variety of image shapes and tools for designing, including vector shapes, images, icons, text, and plugins. To set up and configure Figma, users need to create an account, choose a plan, and customize their workspace preferences.

Name:Final Project and Assessment

Description:In this module, you will design and create an interactive Sales App using Figma and Thunkable. Figma is a powerful UI design tool used to create wireframes, prototypes, and high-fidelity designs for web and mobile applications. Thunkable is a web application that is well-known for visual programming concepts with a “drag and drop” style, thus making it very easy for everyone to understand and helps to create very interactive mobile-based web applications. To create the interactive Sales app, you can design the layout and features using Figma, export the Figma assets to Thunkable, build functionality using pre-built components, and test the app on a mobile device or using web preview.

课程评论(0条)