Designing your web portfolio: How to position yourself to external audiences (2235.YR.014952.2)

General information

Type:	OBL	Curs:	1	Period:	S semester
ECTS Credits:	3 ECTS

Teaching Staff:

Group	Teacher	Department	Language
Year 1	Ferran Macipe Catalán	Ciencias Sociales	ENG

You do not need any technical pre-requisite to start the course. Experience with design software like Illustrator or Sketch will help but is not required.

-

This is a 3-ECTS course, which means that students are expected to dedicate approximately 75 hours of workload to this course. (25 hours per ECTS). This workload encompasses various activities, including lectures, synchronous, or asynchronous tasks, autonomous student work, study time, or any other time dedicated to the subject.

This is the course where you'll be building your own portfolio. Portfolios have two roles: to present yourself and your work.

Before diving into the technical specificities of building a website, students will first be preoccupied with searching and communicating who you are. This is a crucial and ongoing process that requires a certain mindset and some specific tools - provided at the beginning of this course - to make them fruitful.

You will then be creating the structure for your website with modern web design tools. Though it starts on a reflective tone, this is a practical course. You'll be provided with hands-on exercises to learn web concepts. By the end of the course, you will have your own unique website that you can share with the world. And as you build new projects and grow as a human being, at ESADE and beyond, you will be able to use your portfolio to share your progress.

By the end of this practical course, you should be able to:

. Have a process of self-discovery underway, using the Ikigai framework as guide and support.
. Write clearly about yourself and your ambitions.
. Understand the power of being online and leveraging the web to find opportunities.
. Get familiar with the process of building and maintaining websites, from paper to Framer.
. Understand the fundamental technologies of the web (HTML, CSS and Javascript) and how they come together to make websites.
. Edit your website so that it is responsive: it should work on every screen size
. Use Tilebit and Framer to design your portfolio's mockup and wireframe
. Structure your projects with Notion
. Make your website unique to you and reflect your beliefs and aspirations.

1. Introspection in search of self-knowledge

2. Communicating who you are

3. Wireframing: visualizing ideas

4. Foundations and mental models of the web

5. Framer: designer basics

6. Framer: CMS, editor and beyond

7. Publishing and maintaining your portfolio

This is a practical course: you will make mistakes and have to fix bugs. Overcoming these challenges requires a growth mindset. So don't be afraid to experiment and ask for feedback from the instructor or your peers.

You will primarily be assessed based on your final project: your published portfolio. The weekly interactions and lessons with your instructors will help you develop the reflective and technical skills to build your personal website. Class attendance is important to ask questions, get feedback and grow faster. It will therefore be graded too.

You will have time to work autonomously on your portfolio and submit assignments. Assignments will be useful "check-ins? and therefore are graded too.

The project based course will be divided into four sections:

Awake: You will practice introspection and will be given tools to identify and communicate who you are.

Basics: From your work defining yourself, we'll learn about the basics of web languages to help you deploy your portfolio to the world.

Tools: From reflective tools like the IKIGAI framework to web design tools like Framer or Tilebit; you will use these tools to build your portfolio, unique to yourself.

Individual project: This transversal section will take place in parallel of the academic content you will receive. It has been designed to help you apply the knowledge and skills into a structured path that will help you reach the main outcome of this project-based course: create a fully responsive portfolio with Framer.

Norman, D (1988) The Design of Everyday Things. Basic Books.

Wathan, A & Schoger, S (2019) Refactoring UI. Refactoring UI

Pesquet, B (2014) The Javascript Way. LeanPub

Wolf, V. (2016), The Collected Short Stories, CreateSpace Independent Publishing Platform.

Group	Teacher	Department
Year 1	Ferran Macipe Catalán	Ciencias Sociales