You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
4.0 KiB
HTML
146 lines
4.0 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>User Sentimental eXperience</title>
|
|
<meta name="description" content="XPUB">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../css/pages.css">
|
|
<style type="text/css">
|
|
#wrapper{
|
|
background: linear-gradient(231deg, #cbf2ce, #e7f5f9, #b9e9f7, #c9dee4);
|
|
}
|
|
|
|
.window{
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
.top, .left, .right, .bottom{
|
|
position: fixed;
|
|
background: #4395DE; /*#232323;*/
|
|
z-index: 4;
|
|
}
|
|
|
|
|
|
.top{
|
|
|
|
/*margin: 0 auto;*/
|
|
top:0;
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
box-shadow: 0px 5px 12px #4395DE;
|
|
}
|
|
|
|
|
|
.left, .right{
|
|
width: 0.4rem;
|
|
height: 100%;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
.left{
|
|
left: 0;
|
|
box-shadow: 5px 0px 12px #4395DE;
|
|
}
|
|
|
|
.right{
|
|
right: 0;
|
|
box-shadow: -5px 0px 12px #4395DE;
|
|
}
|
|
|
|
.bottom{
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
box-shadow: 0px -5px 12px #4395DE;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div id='wrapper'></div>
|
|
<a href='../' id='homebttn' class='ext'> << home</a>
|
|
|
|
<div class = "window">
|
|
<div class = "top"></div>
|
|
<div class = "left"></div>
|
|
<div class = "right"></div>
|
|
<div class = "bottom"></div>
|
|
</div>
|
|
|
|
|
|
<header>
|
|
<h1 id='project-title'>User Sentimental eXperience<a href='#hleft-text' class='show'> ⓘ</a></h1>
|
|
<h2 id='student-name'>Nami Kim</h2>
|
|
<div id='hleft-text'>
|
|
<a href=# id='back'>
|
|
<div id='inner-hleft-text'>
|
|
<div id='ihtp'>
|
|
<object>
|
|
<div id='about-project'>
|
|
<p><i>User Sentimental eXperience</i> is a web publishing project, questioning and indulging the notion of user experience on the web.
|
|
The project is rooted from my regret about the narrow scope of interpretation on the term in the current web design industry.
|
|
The word 'user experience' is indeed such a beautiful one, as it has broad potentials to be understood.
|
|
The current status quo, however, seems to define it just with a full focus on making users' efficient performances. Which saddens me.
|
|
I find the world of web is losing colours and emotions.
|
|
Through this project I present my belief that the web is a imaginary and sentimental stage and window. The web experience should entail more 'feelings' like inviting, warm, energetic, playful, subtle, nostalgic, cute, etc.
|
|
|
|
Thus since 12th May 2022 I've been publishing a small web experiment and an essay every few weeks, attempting to bring more sentiments on the web.
|
|
The project investigates how contents can be the 'experience' itself, not just to be stayed as pieces of information.</p>
|
|
|
|
</div>
|
|
<hr align='left'>
|
|
<div id='about-student'>
|
|
<p>If I have to lable I would call myself as a web publihser. I explore the culture of web design and publishing. I'm based Rotterdam, the Netherlands.<br>
|
|
My favourite working medium is HTML and CSS.</p>
|
|
</div>
|
|
<a id='getback' class='int'> go back </a>
|
|
</object>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<section id='main'>
|
|
<div id="galleries">
|
|
<div id='work'>
|
|
<h3 class='gal-title'>Work</h3>
|
|
<ul id='publist'>
|
|
<li><a href='https://hub.xpub.nl/sandbot/Nami_Researchlog/' target="_blank" class='ext'>User Sentimental eXperience</a></li>
|
|
</ul>
|
|
<img src="landing1.png" id = "li1" class='workimg'/>
|
|
<img src="zoneoutroom2.png" id= "li2" class='workimg'/>
|
|
<img src="fishbowl2.png" id= "li3" class='workimg'/>
|
|
<img src="issue3_2.png" id= "li4" class='workimg'/>
|
|
|
|
</div>
|
|
<div id='publication'>
|
|
<h3 class='gal-title'>Publication</h3>
|
|
<ul id='publist'>
|
|
<li><a href='Nami Kim_graduation thesis_Xpub.pdf' target="_blank" class='ext'>Publication PDF</a></li>
|
|
</ul>
|
|
<img src="nami_pub1.png" class='workimg'/>
|
|
<img src="nami_pub2.png" class='workimg'/>
|
|
<img src="nami_pub3.png" class='workimg'/>
|
|
<img src="nami_pub4.png" class='workimg'/>
|
|
</div>
|
|
<div id='gradshow'>
|
|
<h3 class='gal-title'>Graduation Show</h3>
|
|
<p>It's coming soon...</p>
|
|
<!--<img src="img/gradshow1.jpg" class='workimg'/>
|
|
<img src="img/gradshow2.jpg" class='workimg'/>
|
|
<img src="img/gradshow3.jpg" class='workimg'/>
|
|
<img src="img/gradshow4.jpg" class='workimg'/>-->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html> |