T09: Frontend Design (EN)
2018/2019- Indhold og læringsmål
In the Frontend elective, you will learn what it takes to create modern, playful, cool,
Kompetencer
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- 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 - Undervisningsform
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 - Forudsætninger for at deltage i
faget
Faglige forudsætninger for at deltage i faget
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. - Prøve
Læringsmålene for prøven er identiske med fagets/fagenes læringsmål
Faget prøvesFaget/modulet prøves selvstændigtDuring 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.PrøveformKombineret skriftlig og mundtlig prøveOpgavetypeYour 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.FormkravTwo 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.pdfIndividuel eller gruppeprøveIndividuel- eller gruppeprøve, 1-4 maks. deltagereAnvendt sprog til prøvenEngelskBedømmelsesform7-trins skalaBedømmer(e)Intern censur
På faget T09: Frontend Design (EN) modtager du 223 timers undervisning, hvilket svarer til 297 lektioner (1 lektion = 45 min.) og 27% af din samlede arbejdsbelastning på faget.
Undervisningen vil primært bestå af følgende aktiviteter: interne forelæsninger, gruppearbejde.
Forberedelsen vil primært bestå af følgende aktiviteter: læsning af egne noter, læsning af pensum, gruppearbejde.
Læs om KEAs studieaktivitetsmodel
*KEA kan fravige det angivne timetal, hvis det er begrundet i særlige forhold.