UNIDADE CURRICULAR: Web Design CURRICULAR UNIT: Web Design Ficha de Unidade Curricular DOCENTE RESPONSÁVEL E RESPETIVAS HORAS DE CONTATO NA UNIDADE CURRICULAR (PREENCHER O NOME COMPLETO): Ricardo Pereira Rodrigues - 15h RESPONSIBLE ACADEMIC STAFF MEMBER AND LECTURING LOAD IN THE CURRICULAR UNIT (FILL IN THE FULLNAME): Ricardo Pereira Rodrigues - 15h OUTROS DOCENTES E RESPETIVAS CARGAS LETIVAS NA UNIDADE CURRICULAR (PREENCHER O NOME COMPLETO): Matilde Reis - 45h OTHER ACADEMIC STAFF AND LECTURING LOAD IN THE CURRICULAR UNIT: Matilde Reis - 45h 1/6
OBJETIVOS DE APRENDIZAGEM (CONHECIMENTOS, APTIDÕES E COMPETÊNCIAS A DESENVOLVER PELOS ESTUDANTES): A unidade curricular de Web Design procura desenvolver competência nas várias etapas do desenvolvimento de projetos de comunicação digital multiplataforma (websites, aplicações para plataformas móveis, conteúdos para redes sociais e newsletters). Uma introdução ao design de interfaces gráficas e à criação de protótipos interativos para validação de ideias e conceitos criativos para publicação na World Wide Web, a partir: Dos processos, métodos de investigação e diagnóstico centrados no utilizador. Dos fundamentos e boas práticas identificadas para o desenho da experiência (UX), interação (IxD) e interface do utilizador (UI). Das metodologias, linguagens e ambientes para autoria web. Da criação de estratégias que implementem ou melhorem a acessibilidade e usabilidade dos produtos digitais. LEARNING OUTCOMES OF THE CURRICULAR UNIT: The Web Design curricular unit aims to develop skills in several development stages of digital multi platform communication project (websites, applications for mobile platforms, content for social media and newsletters). An introduction to the graphic interface design and the interactive prototypes development for the ideias validation and creative concepts for the World Wide Web publication, trought: The processes, research methods and user-centered diagnosis. The user experience design (UX), interaction (IxD) and user interface (UI) fundamentals and good practices. The methodologies, languages and web authorship environments. The strategy development for improving digital products accessibility and usability. 2/6
CONTEÚDOS PROGRAMÁTICOS: Introdução aos conceitos e fundamentos o da Web. Introdução ao HTML ( Hyper Text Markup Language ). Introdução às CSS ( Cascading Style Sheets ) Compreender o utilizador: personas e cenários de actividades. Arquitetura de informação: diagnóstico de conteúdos, guião multimédia e estrutura de informação (mapa de navegação). Criação de mood boards como método de pesquisa visual. Design de interfaces gráficas. Desenvolvimento de protótipos: wireframe, storyboard, mock-up e demo. A acessibilidade e usabilidade dos projetos digitais. SYLLABUS: Introduction to Web fundamentals and concepts. Introduction to HTML (Hyper Text Markup Language). Introduction to CSS (Cascading Style Sheets) Understanding the user: personas e activities scenarios. Information architecture: content diagnosis, multimedia guide and information structure (navigation map). Moodboard development as a visual research method. Graphic interfaces design. Prototype development: wireframe, storyboard, mock-up and demo. Accessibility and usability of digital projects. DEMONSTRAÇÃO DA COERÊNCIA DOS CONTEÚDOS PROGRAMÁTICOS COM OS OBJETIVOS DA UNIDADE CURRICULAR: O programa inicia-se com um conjunto de conteúdos que irão permitir aos estudantes contextualizar e enquadrar o processo do web design e do desenho de interfaces no âmbito da comunicação digital. Compreender e trabalhar nas diferentes etapas de um projecto multimédia e interativo: (1) análise e pesquisa, (2) arquitectura de informação, (3) desenho e composição, (4) acessibilidade e usabilidade, permite ao aluno a aquisição de competências base nos processos de investigação, metodologias de projeto, desenho, produção e implementação de projectos adaptados à World Wide Web. 3/6
DEMONSTRATION OF THE SYLLABUS COHERENCE WITH THE CURRICULAR UNIT'S OBJECTIVES: The syllabus starts with content that will enable students to contextualise and frame the process of web design and user interface design in the context of digital communications. Understanding and working in the different stages of a multimedia and interactive project: (1) research and analysis, (2) information architecture, (3) graphic design and composition, (4) accessibility and usability, which allows students to acquire basic skills in the processes of research, design methodologies, design, production and implementation of projects for publication on the World Wide Web. METODOLOGIAS DE ENSINO (AVALIAÇÃO INCLUÍDA): O método de ensino usa aulas expositivas e aulas de práticas laboratoriais. As aulas expositivas estão assentes na transmissão de conhecimentos pela docente e serão baseadas em literatura especializada, quadros, e outros materiais. Nas aulas práticas são desenvolvidos exercícios que permitem aos alunos a interligação dos conteúdos teóricos com as metodologias e ferramentas de desenvolvimento de produtos e serviços multimédia interativos. Serão também analisados e discutidos casos práticos. A avaliação na unidade curricular segue o modelo de avaliação contínua. A nota final consiste na média ponderada de vários elementos de avaliação que decorrem ao longo do semestre (um projeto individual e um projeto de grupo). Para os alunos que se apresentem a exame o enunciado do exame é composto por uma parte teórica e uma parte de cariz prático que consiste na realização de um exercício de web design. TEACHING METHODOLOGIES (INCLUDING EVALUATION): The learning method comes from expositive lectures and practical laboratory classes. The expositive lectures consists on the knowledgement transmission by the lecturer and will be based on specialized literature, frames, and other material. At the practical classes, exercises are developed in order to allow students to interconnect theoretical content with interactive multimedia services and products development methodologies and tools. Practical case studies will also be analysed and discussed. The curricular unit evaluation will follow the continuous evaluation template. The final grade consists in the weighted average of the several evaluation elements that take place during the semester (an individual project and a group project). For the students who attend the exam, the exam brief is composed by a practical part and a theoretical part that consists in a web design exercise development 4/6
DEMONSTRAÇÃO DA COERÊNCIA DAS METODOLOGIAS DE ENSINO COM OS OBJETIVOS DE APRENDIZAGEM DA UNIDADE CURRICULAR: Nas aulas expositivas serão apresentados os principais conceitos teóricos e exploradas as mais importantes tecnologias e metodologias de trabalho para uma boa prática no desenvolvimento de projetos de multimédia interativos. Durante estas aulas serão também analisados alguns exemplos práticos e reais que permitirão aos alunos compreender as fases que estruturam um projecto desta natureza. Nas aulas práticas, supervisionados pela docente, os alunos irão trabalhar individualmente e em grupo, na resolução de exercícios que permitem a aplicação dos conhecimentos teóricos adquiridos nas aulas expositivas. Através do uso das ferramentas de trabalho apropriadas para a produção de projectos de multimédia interativos, irão ainda adquirir competências no planeamento, desenho e produção para estes suportes. DEMONSTRATION OF THE COHERENCE BETWEEN THE TEACHING METHODOLOGIES AND THE LEARNING OUTCOMES: The lectures will present the main theoretical concepts and analyse the key technologies and work methodologies for good practice in the development of interactive multimedia projects. Some practical examples will be displayed and discussed so that students are able to understand the different stages of an interactive multimedia project. During the practical classes, students will be supervised by the teacher whilst solving exercises either individually or as a group. These exercises will require the application of the theoretical knowledge previously acquired in the practical classes. Through the usage of appropriate tools, students will acquire skills in the planning, designing and development of interactive multimedia projects. 5/6
BIBLIOGRAFIA PRINCIPAL: MAIN BIBLIOGRAPHY: Brown, D. (2007) Communicating Design. Developing Web Site Documentation For Design and Planning, New Riders. Cederholm, D. (2010) CSS 3 For Designers, A Book Apart. Costello, Vic (2012) Multimedia Foundations: core concepts for digital design, London: Focal Press. Clark, J. (2015) Designing for touch, A Book Apart. Dabner, D.; Calvert, S. & Casey, A. (2010) Graphic design school: the principles and practice of graphic design, New Jersey: Wiley. Duckett, J. (2011) HTML & CSS - Design and Build Websites, Wiley. Fonseca, J. M. et al (2012) Introdução ao design de interfaces, Lisboa: FCA. Jacobson, Robert (ed.) (2000) Information Design, The MIT Press. Keith, J. (2010) HTML 5 For Web Designers, A Book Apart. Lidwell, W.; Holden, K. & Elam, K. (2003) Universal Principles of Design, Rockport. Morville, P. & Rosenfeld, L. (2007) Information Architecture For The World Wide Web, O'Reilly. Nielsen, J. (1999) Designing Web Usability, New Riders Publishing. Ribeiro, N. (2012) Multimédia e Tecnologias Interactivas, Lisboa: FCA. Vinh, K. (2011) Ordering disorder : grid principles for web design, New Riders. 6/6