Copenhagen School of Design and Technology

da

T09: Frontend Design (EN)

2018/2019
Danish title
T09: Frontend Design (EN)
Study programme
Multimediadesign and Communication
Type of education
Full time education
Level of education
Academy Profession
Semester
3. semester
Duration of the subject/module
1 semester
Ects
30
Programme elements
Elective
Language
English
Start time
Autumn
Spring
Location
Lygten 16, København NV
Subject number
3273355
Responsible for the subject(s)/modul(es)
Jonas Fannikke Holbech
Peter Lind
  • Content and learning outcomes

    In the Frontend elective, you will learn what it takes to create modern, playful, cool,
    interactive web applications. JavaScript is the main ingredient in any web application
    – it connects and manipulates HTML, CSS and other content in the browser, it
    creates interactivity and enhances user experience.
    You will learn more JavaScript than you already know – you will dive deeper into the
    language itself, and learn how to develop clean, maintainable code to solve complex
    problems. You will understand code-constructs you may already have used, and be
    introduced to some of the newer (ES6 and later) features of the language.
    You will also learn how JavaScript interfaces with the browser API, and how it can be
    used to manipulate content and interface with the user. You will speak fluent DOM,
    and look into some of the more specialized APIs, like Web Animations, Storage or
    Notifications. Furthermore you will gain a deeper knowledge of the Developer Tools
    (Inspector and friends), making you much more efficient at fixing bugs!
    Additionally you will be introduced to some of the tools used by frontenders. Like git,
    SASS/LESS, NPM/Yarn, Gulp/Grunt, minification, Webpack, polyfills, and so on.
    You will finally learn what it means when tools tell you to write $ npm install –g
    mytool.
    When creating interactive front ends, user experience is the main focus, and you will
    still use all your existing skills to create engaging web applications – this course gives
    you the tools to build the cool project you’ve always dreamt of!

    User interface development :
    The subject area comprises the design and development of digital solutions with
    special emphasis on the production of user interfaces. The focus is on all aspects of
    the development process based on common development methods, including
    planning, design and production of digital media tasks.
    Knowledge:
    - developing using a commonly used package manager for managing more complex applications
    - a version control system for sharing of knowledge, specifically for collaborative work
    - core technologies and methods for data persistance in web applications
    Skills:
    - solve complex problems in relation to the DOM / CSSOM using JavaScript
    - use core web technologies to create complex interactive user-interfaces.
    - use and understand existing design systems, and UI frameworks
    - plan, document, and communicate user-interface implementations, using core methods and
    standards.
    Here you’ll learn:
    To tackle advanced problems using JS, HTML, CSS and SVG. You’ll learn to
    build optimized version of your solution making it faster, and more compatible
    to older browsers.

    User experiences:
    The subject area comprises the design and development of digital experiences with a
    focus on understanding the user, the user’s interaction with solutions as well as on
    evaluating and testing solutions, including the use of data.
    Knowledge:
    - how to enhance affordance using animations and/or visual means
    - creating user stories to document how the user interacts with the solution
    Skills:
    - automating Optimisation of websites for fast delivery, including optimizing content
    - create engaging forms and interactions that provides relevant feedback to the user
    Here you’ll learn:
    To understand the users needs, to engage them and to test and analyze the
    solutions you develop

    Content production:
    The subject area comprises content production for selected digital media. The focus
    is on understanding digital media and relevant types of content as well as on the
    dissemination and use of data.
    Knowledge:
    - aesthetic means and ethical considerations in frontend design
    - dynamically created graphical elements
    Skills:
    - create Data Visualizations to present complex data
    - plan and create content and prepare it for presentation and scripting
    Here you’ll learn:
    How to build various types of data visualization and which problems they solve.
    We’ll work with dynamically created visualizations, as well as story driven, drawn
    visualizations

    Business:
    The subject area comprises business models, data understanding, the basis of
    existence of a business and the multimedia designer’s role in the value chain.
    Knowledge:
    - legal and ethical guidelines and how new technology changes expectations, values and
    business practices.
    - estimating resource requirements in planning a task
    Skills:
    - use methods and selected tools for digital marketing
    Here you’ll learn:
    You’ll get hand on experience in using the ECO model. Furthermore, you’ll be using
    your business insights into a given problem area to adapt and improve the UI and UX
    of existing solutions

    Technology:
    The subject area comprises understanding and exploration of technologies that form
    part of digital media products and digital media production.
    Knowledge:
    - understand the current web technology landscape of tools and frameworks
    - how to stay up to date with digital trends and technologies
    Skills:
    - identify and test the current state of available technologies, as well as up-and-coming features.
    - experiment with new cutting-edge features/frameworks/tools, and plan for learning more.
    Here you’ll learn:
    To identify the requirements for a task, and weigh the pros and cons for choosing an
    “of-the-shelves-solution” vs building one from scratch vs using a framework or library

    Competences

    - in teams, or individually, students can plan and develop complex user interfaces related to user
    experience, content, business and technology
    - identify, acquire and develop their own skills and knowledge in relation to a specified subject
    area and communicate these to external stakeholders
    - enter into development oriented and/or interdisciplinary work processes
    - identify and apply relevant theories, methods, terminology and tools for implementing complex digital media productions

  • Type of instruction
    You will get your hands on the keyboard, and produce code from day one (or three!
    Most classes in the course will focus on a single aspect of JavaScript, a tool,
    technology or API, and will be a combination of lectures, discussion and exercises.
    During the course you will work on one or more personal projects, either individually
    or in pairs. You will need to spend a considerable amount of time after class, working
    on your projects!
    The course may involve external teachers: professionals working with front end on a
    daily basis, or teachers from Web Development.

    Hand-ins and feedback
    The elective has a set of mandatory assignments, that must all be passed in order to
    qualify for the exam. The feedback for these varies between oral feedback from the
    client and/or teachers, to written feedback on Fronter or Wiseflow
    Furthermore there will be daily exercises without feedback, but where you’ll be able
    to see suggested solutions afterwards
  • Subject/module requirement for participation

    Academic requirement for participation
    A basic understanding of HTML, CSS and JavaScript as taught during the first year
    of multimediadesign, is a prerequisite. A natural curiosity and willingness to learn
    more about the hidden technologies in the browser and the web itself, is essential.

  • Exam

    The learning outcomes of the exam are identical with the learning outcomes of the subject(s)/modul(es)

    Exam in one or more subjects
    Subject/module is tested standalone
    During the exam period there will be 4 mandatory coaching sessions where you’ll have the
    opportunity to discuss your solution, your findings and your challenges in the process.

    Once we have all the groups registered, you’ll be assigned a time slot for your group.
    Some of the meetings will require you to prepare by answering/discussing questions given
    by the coaches. These questions can be seen in the schedule a few days in advance.
    Type of exam
    Combined written and oral examination
    Type of assignment
    Your task is to build a platform for an imaginary fundraiser. You pick a cause or an organization, henceforth “the client”, and you build a system that can handle donations in
    various ways.
    In the following sections you’ll find some requirements for features that must be included, but mostly, it’s up to you to define a problem, and then build a suitable prototype for the client.
    Formal requirements
    Two solutions in one
    The solution should have (at least) two separate sections. One for the client who should be
    able to see a list of all donations or other types of relevant information. Think of this as a
    dashboard.
    The other section is for the backers, the people who actually donate to the fundraiser.
    The two sections does not have to be connected, but should of course work from the same
    data.

    Authentication
    The system should handle authentication in some way. Users should be able to login, sign
    up, and the system should keep track of who donated what.

    Data & Databases
    We suggest using mockapi.io for storing your data. But other solutions are welcome, as long
    as you agree in your group and you clear it with the coaches. As a minimum you should be able to read (GET) and add (POST) data to your database.

    Donations
    Donations should be split into categories, not all donations have to be money, depending on
    the client, a donation could be volunteering, sleeping bags, food etc. The list of categories
    should be taken from the database.

    Budget
    You must create a budget for your solution. The budget should include the development cost
    (hours, software needed etc), hosting and other services.

    Optimization
    The solution should be optimized as much as possible. JS, CSS and similar should be minified, images should be as small as needed, and in general you should pay attention to
    speed and performance.

    User Goals & User Journey
    You must argue for your decisions regarding UX by identifying User Goals and document these using User Journey(s), which in turn should contain user tasks, user flow and how the
    system should be used

    The User Interface
    You must document how you arrived at your final design, and you should link that up to your
    UX considerations (User Journey etc). The documentation must contain sketches, moodboard and a style tile. Explain why you chose the visual style you did, and what considerations/discussions you have had.
    It is a good idea to document how you shape/draw your icons, UI-elements, illustrations and
    how you edit your photos (if you use any) in case that we are in doubt if the design is your
    own. An easy way to document your design-process is by taking screen dumps regularly and
    keep them in an organised folder.

    The final hand-in
    For the final hand-in you must hand in the following.
    ● One report
    ● Your entire code base, zipped
    ● Links to your individual screencasts
    The screencast
    As part of the documentation, each group member must produce a screen recording where
    you explain essential parts of your code. The content of the video is up to you. You can
    provide a broad overview of the structure, the build process, how you worked with git etc, or
    you can take a deeper dive in to a specific feature or function.
    Try avoiding discussing the same topics within the group.
    Max length 3 minutes.

    The Report
    The official guidelines for the report can be seen at
    https://kea.dk/images/EN/Files/Programmes/Curriculums/ElectivesMMD2018.pdf
    Individual exam or group exam
    Individual or group, 1-4 max participants
    Exam languages
    English
    Type of evaluation
    7-point grading scale
    Examiners
    Internal censure
223
hours of teaching
599
hours of preparation
The figure shows the extent of workload related to the subject divided into different study activities.

In the subject T09: Frontend Design (EN) you will receive 223 hours of instruction, which corresponds to 297 lessons (1 lesson = 45 min.) and 27% of your total workload for the subject.

The teaching primarily consists of the following activities: internal lecturers, group work.
The preparation primarily consists of the following activities: reading your own notes, reading the curriculum, group work.

Read about KEAs Study Activity Model

*KEA can deviate from the number of hours if this is justified by special circumstances