<h1>Hello<h1/>
HTML is the markup language of the internet, where elements are written with opening and closingtags.
The tag here is h1, the highest level header. There are many types of tags.
Web Design 101
UX Design
What?
- Design user experiences: website, car navigation, tv system, …
- Make people’s life easier.
- We can’t consider UX if we forget people!
Why?
- Tiny changes, high impact.
- Fail early.
When it’s too late
How?
- Be open-minded and kind.
- Put end user first.
- Talk to people.
- Observe and question (not shiny::observe).
Don Norman Design principles 1
- Visibility: clear features and steps.
- Feedback: user action –> app reaction.
- Constraints: avoid over interactions.
- Consistency: buttons look like buttons, …
- Affordance: can you guess what this unknown object is for?
Bad design is everywhere around us (1/X)
The “masochist’s teapot” by Jacques Caralman.
Bad design is everywhere around us (1/X)
Figure 1
Bad design is everywhere around us (1/X)
Bad design is everywhere around us (1/X)
I have winamp on my site 😵💫
🥼 Your turn: user experience
02:00
02:00 Tell us what’s the worst user experience your remember?
Ironically, mine was when establishing the ESTA to come to the US 👿
🥼 Your turn: about affordance (1/2)
01:00
01:00 
- old coffee grinder.
- old ear amplifier.
- Instrument to mimick starling calls.
🥼 Your turn: about affordance (2/2)
01:00
01:00 
An old pacifier (~1800).
What about Shiny?
Web design is part of UX Design.
Shiny app design belongs to web design so UX design.
Production apps are used by many people … they deserve a good experience.
So what are we waiting for?
Good vs Bad UI
Pointless Inconsistency
Blog
A Story Before the Recipe
This story is about when I fell in love with Mexican food.
The Recipe
Here is where I detail the instructions to make Mole
Blog
A Story Before the Recipe
This story is about when I fell in love with Mexican food.
The Recipe
Here is where I detail the instructions to make Mole
Pointless Inconsistency
Blog
A Story Before the Recipe
This story is about when I fell in love with Mexican food.
The Recipe
Here is where I detail the instructions to make Mole
Button Distinction
LOGIN
E-mail address
Password
LOG IN
SIGN UP
Forgot Password?
LOGIN
E-mail address
Password
LOG IN
SIGN UP
Forgot Password?
Button Distinction
LOGIN
E-mail address
Password
LOG IN
SIGN UP
Forgot Password?
Primary buttons are the most important actions to which we want to draw users’ attention.
Secondary buttons are good for actions that require less emphasis but still require users’ attention.
Tertiary buttons represent less important actions a user can take.
Unaligned Elements
Lorem ipsum dolor sit amet.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusanti doloremque laudantium.
Lorem ipsum dolor sit amet.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusanti doloremque laudantium.
Low contrast
Maya G
mayagans@gmail
Account Info
Mobile Number
+1 123 345-6789
Bank Account
1234 xxxx xxxx1234
Maya G
mayagans@gmail
Account Info
Mobile Number
+1 123 345-6789
Bank Account
1234 xxxx xxxx1234
Confusing forms
me@domain.com
Password
*****
Error!
me@domain.com
Password
*****
Password incorrect. If you don’t remember your password, reset it here.
Wrong color code
BAD
Cancel
Submit
GOOD
Submit
Cancel
🥼 Your turn: what’s wrong here?
02:00
02:00 
🥼 Your turn: what’s wrong here?
02:00
02:00 
🥼 Your turn: why is it better?
02:00
02:00 
Coronavirus tracker by John Coene.
🥼 Your turn: a little challenge 1
05:00
05:00 Web languages 101
Forewords
Mastering HTML and CSS is clearly not the goal of this workshop but you need to know where all of this come from to move to the next part.
🥼 Your turn: what’s behind a Shiny app?
05:00
05:00 - Run the below app and open it with Google Chrome:
ui <- fluidPage(p("Hello World"))
server <- function(input, output, session) {}
shinyApp(ui, server)- Do
CTRL + SHIFT + CLinux,F12Windows, orCommand + SHIFT + Con Mac (or just right click + inspect).
ABOUT HTML
Intro
This is the same as # Hello! in .Rmd
ABOUT HTML
Attributes: ID
<h1 id=“top_header” > Hello! <h1>
elements can have attributes that are specified using attribute="value". Here we’ve given our top level element the ID top_header.
You cannot have more than one element with the same id in an HTML document!
ABOUT HTML
Attributes: class
<h1 id=“top_header” class=“red_header”>Hello!<h1>
The class attribute can be used on multiple elements. While the top_header ID can only be used once, we can create many headers with the class red_header
HTML and LAYOUT
Box model
HTML tags follow the box model defining margins (space between elements), padding (internal margin), borders, width and height, …
HTML and LAYOUT
Flow layout
HTML tags lay in the page following the flow layout: inline tags flow in the horizontal direction, while block tags are stacked on top of each others.
HTML
Semantic tags
HTML tags can have a semantic contrary to div.
CSS
Cascading Style Sheets (CSS) is a property/rules based languages that lies next to HTML to style elements.
CSS supports more sofisticated layouts such as:
COMBINE HTML AND CSS
Style HTML tags with CSS
<h1 id=“top_header” class=“red_header”>Hello!<h1> 
We can use CSS to create styling rules outside of our HTML, leveraging their attributes.
About CSS
Specificity
- important!
- inline
- ID
- class
- element
Decreasing specificity from left to right.
Modern web toolkits
Benefit from more advanced CSS features such as grid.
About {bslib}
During this workshop, we’ll leverage {bslib} for the layout and colors, so you can focus on the features, rather than on the technical HTML and CSS aspects.
Under the hood, bslib offers a R abstraction for the Bootstrap framework.
If you’re curious 🤔
Web Design 101