Definition:

Defining User Interface (UI) and clearing out the misconception about UI vs UX.‍

‍

History and the future

Looking at the history of UI nationally and internationally, and how UI is expected to develop in the years to come. 

Assignments and the UX report

UI is often a continuation of a UX process and will if so build on the result of such a process. It is therefore important to understand how to read a UX report and how it affects the production of a user-friendly interface. We will also learn how we start our process from scratch - when such a report is not available.‍

‍

UI Tools

We look at four of the most popular UI tools (Figma, Sketch, Adobe XD and Balsamiq) and even some of the statistics within the UI - as far as preferred tools in different parts of the process.

Creating a home page or app

We learn how to create a user friendly home page or app and take a look at 

the basics of design/layout, trends, SEO, different types of links and their importance, illustrations, headlines, page hierarchy, copy and content text, flow, Call to action and more.

Preparations

We learn how we plan our page or app before starting a detailed production in Figma.

Assignments

We talk about the different assignments, how we start the process for each one, and how we cooperate with our client or colleagues on the way (Agility). We also learn about traditional processes vs sprints.

Brainstorm

We learn different Brainstorm techniques and how they help us produce good ideas faster and create a good overview of large amounts of information. 

Structuring

We learn about structures and mapping our home page or app in a way that creates a good flow and a good overview before the layout and design - in and outside our preferred UI tool. We also look at how to link all calls to action with its designated target.

Figma

We learn how to use the UI tool Figma to finish our home page or app production - from our ide to a designed and fully functioning prototype, and about all the most popular plugins to assist our production.

Anima

We learn how to transfer our mockup to HTML and CSS by using the program Anima.

PS! We have two Labs in this topic + a full production of a home page or app. When the topic UI and UX are presented together some of these topics will only be presented in the UX part of the class and there will be 3 Labs and two cases all in all.