Johan Kohlin
Lecturer at School of engineering, Jönköping University.
Web and user interface design
Web and user interface design
Course documents - CANVAS
Staff
Johan
Domina
office: E3410
email: kojo@ju.se
Lab Tutors
office: E3406b
email: domina.kiunsi@ju.se
Yordan
Antonia
Course coordinator
Lectures (only)
What this course is about
technically
- HTML coding
- CSS coding
- Web Layout principles
- Device agnostic, responsive Design
- Search Engine Optimization
What this course is about
Intended Learning Outcomes (ILO)
After a successful course, the student shall
Knowledge and understanding
- show familiarity with the communication between web clients and web servers
- demonstrate comprehension of the different aspects of web based system architecture
Skills and abilities
- demonstrate the ability to apply HTML5 standards in the construction of documents
- demonstrate the ability to apply CSS3 in the design of a web site
- demonstrate the ability to apply precompiled CSS (SASS/LESS)
- demonstrate the ability to develop a finished web solution with the aid of CSS3 and HTML5 following a given specifications and a focus on sustainability
- demonstrate the ability to develop a web site according to principles and best practices of responsive web design
Judgement and approach
- demonstrate the ability to suggest a user interface that is user friendly and useable, and to motivate why
syllabus
What this course is about
ultimately
To turn this...
...into more customers
via
@White :#FFFFFF;
@Black :#000000;
@numbers :#E68200;
@keywords :#FFB500;
@property :#FFDB82;
main > nav.navigation a {
color:#4523ee;
font-size:1.5em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pizzeria Campino</title>
</head>
<body>
<header>
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>Web design has a purpose
It's not just typography, colors and layout
Why learn code?
- New media is not made of paper and paint, but 0's and 1's.
- To know the design constraints of New media,
you need to understand the technologie's constraints. - Opens up more job opportunities
- Because Code is so much fun :)
There is a rare breed of web designer who can handle all ... from content strategy to UX to frontend development to what happens on the server. These folks are known in the biz as "unicorns". I’ve met a few!
-Jennifer Niederst Robbins
Course structure
12 lectures
4 lab assignments
1 group assignment
1 exam
{
4 credits
3,5 credits
\frac{\left(3+3+3\right)\ast0,67+5\ast2}{4\ assignments}=4\
\frac{(4\ credits\ast4)+(3,5\ credits\ast5)}{7,5\ credits}=4,5\ \approx5
5
Lab 2-4
Group assignment
Individual exam
5
4 credits
3,5 credits
3
3
3
\frac{\left(5+5+5\right)\ast0,67+3\ast2}{5\ assignments}=4\
\frac{(4\ credits\ast4)+(3,5\ credits\ast5)}{7,5\ credits}=4,5\ \approx5
3
Lab 2-5
Group assignment
Individual exam
5
4 credits
3,5 credits
5
5
5
Schedule
Lab Groups
Find Doodle in Canvas
Schedule
Lectures
via Zoom
Find password in Canvas
Schedule
Lab 1
Lab 2
Lab 3
Lab 4
Group assignment
Exam
Passing Assignments
- Download from-/ Upload to Canvas
Passing Assignments
2. Present to Domina
Why present each assignment?
- Because it’s important that we know that
you understand your code. - And don’t worry - we will exemplify what you will be expected to present during a later lecture.
- DON'T SAVE ALL TILL THE END, we don't have staff enough to help everybody who wants to present 4 labs in december.
Group assignment
E-commerce website
1. Wireframes
2. Style guide + prototypes
3. <p>Code it</p>
Exam
- 15 hours
- on your own
- anywhere
- code a one page website
- case = secret for now
December 13
Might change!
Learning Web Design
A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
by Jennifer Niederst Robbins
Online resources
All details in Course PM
Read it!
it's in Canvas
INTERMISSION
A brief history of the web...
- Research documents with hyperlinks 1966-1989
- All text based – no images, no animations, nothing cool...
- New web browsers with support for images
- Better bandwidth » More graphics » FLASH! and video
The early web
- Nobody knew how the web should be navigated
- Skeuomorphism
- The term “Web 2.0” was coined Early 2000
- Emphasis on user generated content
- Loose control over pixel perfect design
The usable web
- Web 2.0 needed a more fluid design
- CSS3 launched
- new flexible containers
- browser window responsiveness
- Animations
- Websites became focus for HCI research
2010 The mobile decennial
- 2009 We got the smartphone (pinchable web)
- Hello HTML5, goodbye Flash
- New advanced JavaScript Libraries (Angular, React, Vue)
- 2016 -Mobile overtook Desktop on web browsing
- Installable Progressive Web applications
latest in web development...
- Node.js - Javascript on the server
- Electron - Desktop applications with HTML+CSS+JS
- Atom, VS Code, Discord, Skype, Slack
- React-native - Native Mobile apps with HTML+CSS+JS
- facebook, Instagram, Pinterest, Discord, Skype
- AI: chatbots, adaptive UI
- VR, AR
- Cyber security
Working as
web developers and interface designers
The process
Examples:
Credit union web design: how-we-work
Forge & Smith: our process
webaartz: agile course of action
It basically goes like this...
The process
- Research
- Strategy
- Conceptualize
- Design
- Development
- Measure, Optimize, Analyze
Client interview
RESEARCH
- What do they do?
How do they do that - Where are they heading?
Long term ambitions -
Understand the company (brand)
be interested
be curious
VS
VS
VS
The Competition
RESEARCH
- What do they do?
How do they do that - Where are they heading?
Long term ambitions - Understand the competition
-
SWOT
The users
RESEARCH
Who are they?
What will they expect?
Concept statement
STRATEGY
Define project goals
Define the client’s target groups
Define the client’s message
chiseling out
CONCEPTUALIZE
Textual and visual language
Mood boards
Wireframes
Mockups and prototypes
DESIGN
Information Architecture
Wireframes
Style tiles
Coding, Writing...
PRODUCTION
- Write copy
- Create graphics
- Take photos
- Build website
- Execute campaigns
Measure & optimize
ANALYSIS
- Google analytics
- Ad words
- SEO
- Social media
one more thing...
understanding of
web technologies
From the syllabus:
show familiarity with the communication between web clients and web servers
Client-server communication
it starts with a http request
The client
(not the company that hire you to redesign their site)
a client is a device used to browse the web
The server
a server is an online computer (software) supplying content for the web
Client-server communication
Server-side
The http response
What the server sends you back, is an HTML document
Your browser makes
automated requests
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Jönköping University</title>
<link rel="stylesheet" href="https://ju.se/style.css">
</head>
<body>
<img src="images/logo.jpg" alt="JU logotype">
<h1>WE ARE JU</h1>
</body>
</html>93 request- & response cycles later:
Till next time
Ch 4-6
Course introduction 2020
By Johan Kohlin
