Adaptive Web Design - Lecture 1

Let us introduce ourselves!

Let us introduce ourselves!
... Me

• Full name: Sanda-Maria AVRAM
• Year & place of birth: 1976, Tg-Mureș, Mureș, Romania
• Education & Profesional experience ...
• ................................................
• ........................
• ......

Let us introduce ourselves!
... You

• Full name: Dayabases & Advanced Information Systems
• Year & place (current): 2, FMI, UBB, Cluj, Romania
• Education & Profesional experience ...
• ................................................
• ........................
• ......

Let us introduce ourselves!
... previous years

What do you
expect
from this course?

What do you expect from this course?
You said ...

• create user-friendly and responsive websites
• accesibility
• improve creative and artistic abilities

Content of this course

Content of this course ...
... as in previous years

2.  
3. Site development process & stages
4. Web Design - Content First; Mobile First | Responsive vs. Adaptive
5. Responsive design; Progressive enhancement vs. graceful degradation; Frameworks; Web accesibility; Best practices
6. Web Usability. Guiding Principles.
7. Code quality; HTML5: simplification, redefinition, organization, semantics+, ...
8. CSS: from Tagsoup to mixins, OOCSS, SMACSS, ...
9. Web typography
10. Colors, Images, C-R-A-P-ify your graphic design.
11. !? Bootstrap (request from previous students)

What did I ask the previous generation to do?

What did I ask the previous generation to do?
... more specific ...

• - create a story around the "main idea of the web page" and support that story with colors, a selection of fonts, .... the dynamics of the elements
• ... or ...
• - try to convey that new idea through several coordinates - images, logo, textual content ... stories ... colors, fonts

What do I ask you to do?

What do I ask you to do?
... more specific ...

• create something:
  • NEW
  • FRESH
  • OUT OF THE NORM

What do I ask for you to do?
... some more tips ...

• really good ideas are simple [What does it mean to be beautiful? | Esther Honig]
• we think that we have to magically have confidence before we do something ... but this is backwards. Confidence is a product of action, not the other way around. [Whitney Thore | TEDxGreensboro]

What do I ask for you to do?
... inspiration ...

• Embracing your shame and vulnerability [ Brene Brown | 7 Super Tips ]
• Don't Believe Everything You Think [ Lauren Weinstein | TEDxPaloAlto ]
• What does it mean to be beautiful? [ Esther Honig | TEDxVancouver ]

• The Social Dilemma [ 2020 ‧ Documentary/Docudrama ‧ 1h 34m ]
• Abstract: The Art of Design [ 2017 ‧ Documentary ‧ 2 seasons ]

What is
Design?

What is Design?
You said ...

• how does something look
• how things are supposed to be used (how things work)
• a plan or a template

What is Design? ... from Abstract: The Art of Design

• "no matter how hard the times are you do not compromise a product" [season 1 ep 5 min 36]
• "great design siplifies a very complicated world" [season 1 ep 7 min 16]
• "do not allow your tools to dominate your message"
  "great desing is when all those things take a backseat and you get the message"
  "with all this amazing technology, the tools must never dominate us" [season 1 ep 7 min 18]
• "Desing is not just a visual thing. It's a thought process. It's a skill. Ultimately, design is a tool to enhance our humanity. It's a frame for life." []
• "Empathy is a cornerstone of design" []
• "they (the people) don't know why they feel the way they feel, but it's actually all been orchestrated." [season 1 ep 8 min 21]

What is Design? ... from Abstract: The Art of Design

• "Design is for communication!" [season 2 ep 2 min 20]
• "Design is the practice of letting go"
  "let go of all that is unnecessary" [season 2 ep 2 min 28]
• "Design is about telling stories" [season 2 ep 3 min ?]
• clothes matter for the character to be complete ... just as attitude, body gestures and movements matter ....
  as well as on a webpage ... colors, font, page layout, spaces ... everything matters ... [season 2 ep 4]
• "Design is everywhere" [season 2 ep 5 min 2]

What is
Web Design?

What is Web Design?
You said ...

• the way a website looks like

What is Web Design?
A diagram made with coleagues from previous years ...

What is Web Design?

What is and what is NOT Design?

What is Web Design? Recommendations

• 2021-08-30, Wikipedia, the free encyclopedia, Web design
  
• 2021-07-31, Jennifer Kyrnin, What Is Web Design: An Introduction to the Basics
  
  
• 2016-07-25, Jen Hawkyard, What is Web Design?
  
  
• 2014-03-04, Sofia Woods, 10 TOP PRINCIPLES OF EFFECTIVE WEB DESIGN
  
  

What is Adaptive Web Design?

What is Adaptive Web Design?
You said ...

• responsive web design
• inclusive web design

What is Adaptive Web Design? Recommendations

• 2021-09-07, Wikipedia, Adaptive web design
  
  
• ?, Interaction Design Foundation, Adaptive Design
  
  
• 2014-05-28, Graham Charlton, What is adaptive web design (AWD) and when should you use it?
  
  

Adaptive vs. Responsive
Web Design

Adaptive vs. Responsive Web Design
You said ...

Adaptive vs. Responsive Web Design Recommendations

• 2019-03-__, Mads Soegaard, Adaptive vs. Responsive Design
  
• 2016-12-07, Daniel Schwarz, What is Adaptive Design? (And is it Different from Responsive Design?)
  
• 2016-03-01, Emily Grace Adiseshiah, Responsive vs adaptive web design: which is right for your UI ...
  
• 2015-11-11, Geoff Graham, The Difference Between Responsive and Adaptive Design
  
• 2013-11-20, Tanya Williams, The Difference Between Responsive and Adaptive Web Design
  
• 2013-04-11, Ryan Boudreaux, What is the difference between responsive vs. adaptive web design?
  
• ?, Jerry Cao,

The End