Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<html> <head> <title>What IxD means to me</title> </head> <body> <center> <h1>What IxD means to me</h1> <div class="limit2"> <p>My personal definition of Interactive design is designing some kind of digital medium to respond to the user. There are new features added in technology and media everyday, so it is natural for people to feel uncomfortable. However, with interactive design people can feel less alienated around new technological aspects. The ultimate goal of interactive design is to make it easier for people to connect with technology while making it look intriguing. Apple has high quality interactive design that I think so far no other company has gone far enough as apple did. Their technology has clear directions and simple designs that makes users easy to adapt to. Not only their website, mobile, and apps are comfortably made, but even their packaging are simple and easily designed. Most importantly, it is clear that they think about the people who are using their design before any other factors.</p> </div> <a href="https://vimeo.com/105678997" target="_blank"><img class="white-border" src="https://i.imgur.com/SIYTnvn.png" height="" width="400"></a> <h3>SWING TIME: HÖWELER + YOON ARCHITECTURES</h3> <div class="limit"> <p alight="justify">I chose this project mainly because of the beauty of it. It used new technology at the time to create something beautiful that can fit into the environment. How it reacts differently with and without human is what I think the most beautiful thing about it. The circles show different colors and behave differently such as changing colors and swaying when there is human contact.</p> </div> <a href="https://youtu.be/YEcvUQG3EX8" target="_blank"><img class="white-border" src="https://i.imgur.com/ipK3eou.png" width="400"></a> <h3>SBERBANK. NEIGHBORHOODS</h3> <div class="limit"> <p>This was actually an advertising project, however, the use of technology in here inlcudes the benefit that can be created between interaction design and technology. Probably because of the strong call to action, the work of interaction design truely brings out it's benefits to the people. The project also covers the beauty in pixel art and simplicity.</p> </div> <a href="https://youtu.be/dx85Hd3puS0" target="_blank"><img class="white-border" src="https://i.imgur.com/HKGSsfa.png" width="400"></a> <h3>Singapore Red Cross Rapid Rescue</h3> <div class="limit"> <p>This project was chosen because of the purpose of great function in interaction design. The design itself is pretty simple as it is suppose to, inlcuding the fact that this design can actually help people in a positive way. I chose this project to show because I believe this is a strong example of how interaction design can impact on human life. </p> </div> </center> </body> </html>
.lw { font-size: 60px; } body { background-color: black; background-image: url("https://i.imgur.com/tyL0TuU.gif"); } .white-border { border-color: white; border-width: 1px; border-style: solid; border-radius: 14%; } h1 { font-family: helvetica; color : #FFFFFF } h3 { font-family: helvetica; color : #FFFFFF } p { font-family: helvetica; color : #FFFFFF; } .limit{ width:440px; word-wrap: break-word; } .limit2{ width:700px; word-wrap: break-word; } }
// Write JavaScript here