Browse Source

Added code written during the lesson

main
Benjamin Bädorf 9 months ago
parent
commit
657c3ced53
Signed by: b12f GPG Key ID: 4406E80E13CD656C
  1. 5
      README.md
  2. 84
      v2/index.html
  3. 82
      v2/styles.css
  4. 31
      v3/index.html
  5. 104
      v3/styles.css
  6. BIN
      v4/hero.png
  7. 73
      v4/index.html
  8. 0
      v4/reset.css
  9. 0
      v4/script.js
  10. 108
      v4/styles.css

5
README.md

@ -3,5 +3,6 @@
v1, v2, and v3 directories show the different development and design stages of a small webpage.
v1 has no code at all,
v2 has some code, but the CSS has not been generalised yet,
v3 has almost the same code as v2, but using design-system-like classes and CSS Variables.
v2 has the code written during the lesson,
v3 has some code, but the CSS has not been generalised yet,
v4 has almost the same code as v3, but using design-system-like classes and CSS Variables.

84
v2/index.html

@ -2,81 +2,27 @@
<html>
<head>
<title>Maxies Design Methoden Sammlung</title>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./styles.css" />
<script type="application/javascript" src="./script.js"></script>
</head>
<body>
<main class="mds-content">
<main>
<img
class="mds-hero-image"
alt="A woman sits on the floor and is working on a laptop."
src="./hero.png"
alt="Maxies Methoden Sammlung logo"
/>
<h1 class="mds-hero-title">Maxies Design Methoden Sammlung</h1>
<section class="mds-design-method mds-design-method_design-sprint">
<h2 class="mds-design-method__title">Design Sprints</h2>
<p class="mds-design-method__short-description">
Sprints are a great way of kicking off a product or&hellip;
<button
onclick="showLongText('design-sprint')"
class="mds-design-method__toggle"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Sprints are a great way of kicking off a product or improve an existing one. They focus on getting to tested ideas as quick as possible. A sprint is a 5-day process, that lets teams collaborate in many sub-exercises. Read more on design sprints here
<button
onclick="hideLongText('design-sprint')"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_personas">
<h2 class="mds-design-method__title">Personas</h2>
<p class="mds-design-method__short-description">
Personas are finctional characters and represent&hellip;
<button
onclick="showLongText('personas')"
class="mds-design-method__toggle"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Personas are finctional characters and represent your users.
<button
onclick="hideLongText('personas')"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_interviews">
<h2 class="mds-design-method__title">Interviews</h2>
<p class="mds-design-method__short-description">
Interviews really are the crux of the Inspiration
<button
onclick="showLongText('interviews')"
class="mds-design-method__toggle"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Interviews really are the crux of the Inspiration phase. Human-centered design is about getting to the people you’re designing for and hearing from them in their own words. Interviews can be a bit daunting, but by following these steps below you’ll unlock all kinds of insights and understanding that you’ll never get sitting behind your desk. Whenever possible, conduct your interviews in the interviewee’s space. You can learn so much about a person’s mindset, behavior, and lifestyle by talking with them where they live or work.
<button
onclick="hideLongText('interviews')"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<h1>Maxies Design Methoden Sammlung</h1>
<div>
<h2>Design Sprints</h2>
<p>Sprints are a great way of kicking off a product or improve an existing one. They focus on getting to tested ideas as quick as possible. A sprint is a 5-day process, that lets teams collaborate in many sub-exercises. Read more on design sprints here</p>
</div>
<div>
<h2>Personas</h2>
<p>Personas are finctional characters and represent your users.</p>
</div>
<div>
<h2>Interviews</h2>
<p>Interviews really are the crux of the Inspiration phase. Human-centered design is about getting to the people you’re designing for and hearing from them in their own words. Interviews can be a bit daunting, but by following these steps below you’ll unlock all kinds of insights and understanding that you’ll never get sitting behind your desk. Whenever possible, conduct your interviews in the interviewee’s space. You can learn so much about a person’s mindset, behavior, and lifestyle by talking with them where they live or work.</p>
</div>
</main>
</body>
</html>

82
v2/styles.css

@ -2,85 +2,43 @@
* {
box-sizing: border-box;
}
html {
font-family: 'Inter', sans-serif;
margin: 0;
}
body {
min-height: 100vh;
background-color: #151515;
background: #151515;
color: white;
font-family: Inter;
font-size: 16px;
line-height: 20px;
color: #fff
padding-bottom: 60px;
}
/******* Blocks *******/
.mds-content {
width: 100%;
max-width: 500px;
margin: 0 auto;
margin-bottom: 90px;
main {
width: 500px;
max-width: calc(100% - 30px);
margin: 15px auto;
}
.mds-hero-image {
margin-left: -170px;
margin-bottom: -90px;
img {
margin-left: -210px;
margin-bottom: -140px;
}
.mds-hero-title {
h1 {
font-style: normal;
font-weight: bold;
font-size: 90px;
line-height: 90px;
font-weight: 700;
color: #fff;
}
.mds-design-method {
h2 {
line-height: inherit;
font-size: inherit;
color: #F202F9;
margin-top: 60px;
}
.mds-design-method__title {
font-size: 16px;
line-height: 20px;
font-weight: 700;
color: #f202f9;
}
.mds-design-method__long-description {
display: none;
}
.mds-design-method_show-long .mds-design-method__long-description {
display: block;
}
.mds-design-method_show-long .mds-design-method__short-description {
display: none;
}
.mds-design-method > p {
p {
margin-top: 30px;
}
.mds-design-method__toggle {
display: inline;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
border: 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
}
.mds-design-method__toggle:hover {
color: #f202f9;
}
.mds-design-method__toggle:active {
color: #fff;
}

31
v3/index.html

@ -6,67 +6,76 @@
<link rel="stylesheet" href="./styles.css" />
<script type="application/javascript" src="./script.js"></script>
</head>
<body class="mds-typo-copy">
<body>
<main class="mds-content">
<img
class="mds-hero-image"
alt="A woman sits on the floor and is working on a laptop."
src="./hero.png"
/>
<h1 class="mds-hero-title mds-typo-head-hero">Maxies Design Methoden Sammlung</h1>
<h1 class="mds-hero-title">Maxies Design Methoden Sammlung</h1>
<section class="mds-design-method mds-design-method_design-sprint">
<h2 class="mds-typo-head-section">Design Sprints</h2>
<h2 class="mds-design-method__title">Design Sprints</h2>
<p class="mds-design-method__short-description">
Sprints are a great way of kicking off a product or&hellip;
<button
onclick="showLongText('design-sprint')"
class="mds-typo-link"
class="mds-design-method__toggle"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Sprints are a great way of kicking off a product or improve an existing one. They focus on getting to tested ideas as quick as possible. A sprint is a 5-day process, that lets teams collaborate in many sub-exercises. Read more on design sprints here
<button
onclick="hideLongText('design-sprint')"
class="mds-typo-link"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_personas">
<h2 class="mds-typo-head-section">Personas</h2>
<h2 class="mds-design-method__title">Personas</h2>
<p class="mds-design-method__short-description">
Personas are finctional characters and represent&hellip;
<button
onclick="showLongText('personas')"
class="mds-typo-link"
class="mds-design-method__toggle"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Personas are finctional characters and represent your users.
<button
onclick="hideLongText('personas')"
class="mds-typo-link"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_interviews">
<h2 class="mds-typo-head-section">Interviews</h2>
<h2 class="mds-design-method__title">Interviews</h2>
<p class="mds-design-method__short-description">
Interviews really are the crux of the Inspiration
<button
onclick="showLongText('interviews')"
class="mds-typo-link"
class="mds-design-method__toggle"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Interviews really are the crux of the Inspiration phase. Human-centered design is about getting to the people you’re designing for and hearing from them in their own words. Interviews can be a bit daunting, but by following these steps below you’ll unlock all kinds of insights and understanding that you’ll never get sitting behind your desk. Whenever possible, conduct your interviews in the interviewee’s space. You can learn so much about a person’s mindset, behavior, and lifestyle by talking with them where they live or work.
<button
onclick="hideLongText('interviews')"
class="mds-typo-link"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
</main>
</body>

104
v3/styles.css

@ -5,73 +5,17 @@
}
html {
--mds-col-primary: #f202f9;
--mds-col-secondary: rgba(255, 255, 255, 0.5);
--mds-col-tertiary: rgba(255, 255, 255, 0.1);
--mds-col-display: #fff;
--mds-col-background: #151515;
--mds-size-xxl: 90px;
--mds-size-xl: 60px;
--mds-size-l: 30px;
--mds-size-m: 20px;
--mds-size-s: 16px;
--mds-weight-regular: 400;
--mds-weight-bold: 700;
--mds-size-interactive: 44px;
font-family: 'Inter', sans-serif;
}
body {
min-height: 100vh;
background-color: var(--mds-col-background);
}
/******* Typography *******/
.mds-typo-head-hero {
font-size: var(--mds-size-xxl);
line-height: var(--mds-size-xxl);
font-weight: var(--mds-weight-bold);
color: var(--mds-col-display);
}
.mds-typo-head-section {
font-size: var(--mds-size-s);
line-height: var(--mds-size-m);
font-weight: var(--mds-weight-bold);
color: var(--mds-col-primary);
}
.mds-typo-copy {
font-size: var(--mds-size-s);
line-height: var(--mds-size-m);
font-weight: var(--mds-weight-regular);
color: var(--mds-col-display);
}
.mds-typo-link {
display: inline;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
border: 0;
cursor: pointer;
color: var(--mds-col-secondary);
background-color: #151515;
font-size: 16px;
line-height: 20px;
color: #fff
}
.mds-typo-link:hover {
color: var(--mds-col-primary);
}
.mds-typo-link:active {
color: var(--mds-col-display);
}
/******* Blocks *******/
@ -79,7 +23,7 @@ body {
width: 100%;
max-width: 500px;
margin: 0 auto;
margin-bottom: var(--mds-size-xxl);
margin-bottom: 90px;
}
.mds-hero-image {
@ -87,8 +31,22 @@ body {
margin-bottom: -90px;
}
.mds-hero-title {
font-size: 90px;
line-height: 90px;
font-weight: 700;
color: #fff;
}
.mds-design-method {
margin-top: var(--mds-size-xl);
margin-top: 60px;
}
.mds-design-method__title {
font-size: 16px;
line-height: 20px;
font-weight: 700;
color: #f202f9;
}
.mds-design-method__long-description {
@ -104,5 +62,25 @@ body {
}
.mds-design-method > p {
margin-top: var(--mds-size-m);
margin-top: 30px;
}
.mds-design-method__toggle {
display: inline;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
border: 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
}
.mds-design-method__toggle:hover {
color: #f202f9;
}
.mds-design-method__toggle:active {
color: #fff;
}

BIN
v4/hero.png

After

Width: 832  |  Height: 623  |  Size: 84 KiB

73
v4/index.html

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>Maxies Design Methoden Sammlung</title>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./styles.css" />
<script type="application/javascript" src="./script.js"></script>
</head>
<body class="mds-typo-copy">
<main class="mds-content">
<img
class="mds-hero-image"
alt="A woman sits on the floor and is working on a laptop."
src="./hero.png"
/>
<h1 class="mds-hero-title mds-typo-head-hero">Maxies Design Methoden Sammlung</h1>
<section class="mds-design-method mds-design-method_design-sprint">
<h2 class="mds-typo-head-section">Design Sprints</h2>
<p class="mds-design-method__short-description">
Sprints are a great way of kicking off a product or&hellip;
<button
onclick="showLongText('design-sprint')"
class="mds-typo-link"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Sprints are a great way of kicking off a product or improve an existing one. They focus on getting to tested ideas as quick as possible. A sprint is a 5-day process, that lets teams collaborate in many sub-exercises. Read more on design sprints here
<button
onclick="hideLongText('design-sprint')"
class="mds-typo-link"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_personas">
<h2 class="mds-typo-head-section">Personas</h2>
<p class="mds-design-method__short-description">
Personas are finctional characters and represent&hellip;
<button
onclick="showLongText('personas')"
class="mds-typo-link"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Personas are finctional characters and represent your users.
<button
onclick="hideLongText('personas')"
class="mds-typo-link"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_interviews">
<h2 class="mds-typo-head-section">Interviews</h2>
<p class="mds-design-method__short-description">
Interviews really are the crux of the Inspiration
<button
onclick="showLongText('interviews')"
class="mds-typo-link"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Interviews really are the crux of the Inspiration phase. Human-centered design is about getting to the people you’re designing for and hearing from them in their own words. Interviews can be a bit daunting, but by following these steps below you’ll unlock all kinds of insights and understanding that you’ll never get sitting behind your desk. Whenever possible, conduct your interviews in the interviewee’s space. You can learn so much about a person’s mindset, behavior, and lifestyle by talking with them where they live or work.
<button
onclick="hideLongText('interviews')"
class="mds-typo-link"
>Show less</button>
</p>
</section>
</main>
</body>
</html>

v2/reset.css → v4/reset.css

v2/script.js → v4/script.js

108
v4/styles.css

@ -0,0 +1,108 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
html {
--mds-col-primary: #f202f9;
--mds-col-secondary: rgba(255, 255, 255, 0.5);
--mds-col-tertiary: rgba(255, 255, 255, 0.1);
--mds-col-display: #fff;
--mds-col-background: #151515;
--mds-size-xxl: 90px;
--mds-size-xl: 60px;
--mds-size-l: 30px;
--mds-size-m: 20px;
--mds-size-s: 16px;
--mds-weight-regular: 400;
--mds-weight-bold: 700;
--mds-size-interactive: 44px;
font-family: 'Inter', sans-serif;
}
body {
min-height: 100vh;
background-color: var(--mds-col-background);
}
/******* Typography *******/
.mds-typo-head-hero {
font-size: var(--mds-size-xxl);
line-height: var(--mds-size-xxl);
font-weight: var(--mds-weight-bold);
color: var(--mds-col-display);
}
.mds-typo-head-section {
font-size: var(--mds-size-s);
line-height: var(--mds-size-m);
font-weight: var(--mds-weight-bold);
color: var(--mds-col-primary);
}
.mds-typo-copy {
font-size: var(--mds-size-s);
line-height: var(--mds-size-m);
font-weight: var(--mds-weight-regular);
color: var(--mds-col-display);
}
.mds-typo-link {
display: inline;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
border: 0;
cursor: pointer;
color: var(--mds-col-secondary);
}
.mds-typo-link:hover {
color: var(--mds-col-primary);
}
.mds-typo-link:active {
color: var(--mds-col-display);
}
/******* Blocks *******/
.mds-content {
width: 100%;
max-width: 500px;
margin: 0 auto;
margin-bottom: var(--mds-size-xxl);
}
.mds-hero-image {
margin-left: -170px;
margin-bottom: -90px;
}
.mds-design-method {
margin-top: var(--mds-size-xl);
}
.mds-design-method__long-description {
display: none;
}
.mds-design-method_show-long .mds-design-method__long-description {
display: block;
}
.mds-design-method_show-long .mds-design-method__short-description {
display: none;
}
.mds-design-method > p {
margin-top: var(--mds-size-m);
}
Loading…
Cancel
Save