Ideas of interaction design collection

[fionataeyang]

@todo

• [x] make concept for landing page
• [x] make mood boards for play brand
• [x] design landing page for play project
• [x] implement landing page and make and publish all brand assets
• [ ] clean up this issue
• [ ] write text for landing page and consider asking a native speaker to proof read it

---

On Google drive Design sources

Ideas on Pinterest

1. css web
2. geometric abstraction

CSS animation

1. https://css-tricks.com/css-animation-libraries/
2. https://wowjs.uk/
3. https://animejs.com/
4. https://dixonandmoe.com/rellax/
5. https://scroll-out.github.io/
6. wave effect https://codepen.io/tedmcdo/pen/PqxKXg
7. text animation http://cssanimation.io/getting-started.html

• Will be applying rellax + scroll-out + animejs

Page transition demo

https://codepen.io/mburakerman/pen/roJmaZ https://codepen.io/firestar300/pen/zLKZVZ https://codepen.io/ktsn/pen/wrxymV https://codepen.io/marcelo-ribeiro/pen/xOOKpO

others

Resize Header on Scroll https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll https://codepen.io/osublake/pen/NdEONL

Transitions Only After Page Load https://css-tricks.com/transitions-only-after-page-load/

Card hover effects https://tympanus.net/Development/HoverEffectIdeas/

Css effects tutorial and reference https://tympanus.net/codrops/

photo effect https://tympanus.net/Tutorials/MotionHoverEffects/index3.html https://tympanus.net/Development/FlowmapDeformation/index2.html

mouse trails effect https://tympanus.net/codrops/2019/09/24/crafting-stylised-mouse-trails-with-ogl/

plugin

https://github.com/oframe/ogl

svg animation https://github.com/maxwellito/vivus

In-view when scrolling down to element will be running the event. https://github.com/camwiegert/in-view https://pudding.cool/process/how-to-implement-scrollytelling/#inview

[serapath]

checked then all.

• the plugin, others, page transition demos, css animation look great once we know design concept for our page.
• i checked all the ideas on pinterest and added some of them to: https://www.pinterest.de/serapath/play3/
  • in the past we started with https://www.pinterest.de/serapath/play/
  • and then came https://www.pinterest.de/serapath/play2/

other inspiration

• https://monolith.xyz/

guiding themes

• moebius who made "sci-fi" which is full of technology but also merged that with celebrating nature - but the problem is that it still has a conflict and/or post war feel to it
• then we have solarpunk but the problem is, that even though there is a lot of nature, the buildings are sky-scraper like and kind of "megalomaniac" structures. It does not feel minimal and modular where people could actually feel they could make it themselves ... and it's almost exclusively about architecture. If it had more tinyhouse aspect to it, it would be still architecture, but at least it's more graspable how people can do this themselves :-)
• then we have synthwave which is contemporary, but it mostly about city, fast cars - basically celebrating white male privilege from the 80s and is not concerned with gender balance or inclusion or openeness and especially climate change at all
• but we have the digital almost counter version of it seapunk which is very much putting animals/plans/natural landscapes/etc... at the center stage and where colors are very much in support of queer. Still it might have a touch of irony/parody to it ..so it's hard to make it look professional, but just having that style in very high quality maybe makes it possible? :-)

So our, or at least my thoughts are:

• how to make solar punk more modular and real and not just architecture?
• how to to make seapunk so awesome, that - even though its very different - people still see the professionalism
• or generally how to express the values that we want to communicate in our website design

The first time around - when we did smartcontract.codes, we started with "mood boards" and stuff, to slowly get closer to the kind of style we want to use to communicate and maybe we should try that again, even if it will cost us a lot of time and we would need to iterate a lot

[fionataeyang]

Demo concept for landing page These are the design concept for the landing page, the idea can make or change.

Header

Header1

Smart Contract codes

Smart Contract UI

[serapath]

very nice. i love this iteration. i talked with nina too and we were thinking:

1. maybe we could iterate on the "Smart Contract UI" font
2. maybe try without or an alternative to the unicorn
3. use the first header and try different birds to match the low poly style

everything else (clouds, trees, etc..., colors, ...) are amazing to me :-)

**our goals are to not make it look depressive nor agressive nor sad nor dystopian nor any other kind of bad vibe.

• we want to support things associated with "feminism", "climate change", "gender balance", "playfulness", etc... to collect a positive vibe AND to connect that to "future", "technology", "scifi", etc... because even though we try to support the values and goals, often they are not much connected to technology, but we are all about technology, so yeah - it's not easy.

[fionataeyang]

[serapath]

Alright - maybe we can use all of the above ideas and combine them into "floating islands"

• see https://pinterest.com/serapath/play4

The good thing is, that this gives us a lot of modularity and flexibility, because we can change the background: in space, under water, night sky, gradient/fantasy?/rainbow? ... or any combination and each island can have a different topic and/or color scheme. It is easy to switch the background or an island for some other island without the need to create an entire new page. Usually when you change a significant chunk of a landing page, maybe the whole page concept does not make sense anymore, but with the island, individual parts become more independent :-)

[fionataeyang]

Updated Jan. 7 2019

[serapath]

For completeness and archival reasons:

[serapath]

for completeness and archival reasons:

[serapath]

elements to be used on the page

• low poly trees
• low poly nature
• low poly nature2
• low poly world
• low poly world2

[fionataeyang]

Updated 1.14.2020

[fionataeyang]

Updated: 1.29.2020

[fionataeyang]

updated: 1.31.2020

[fionataeyang]

Update: 2.12.2020

For Tablet

For PC

[fionataeyang]

2.19.20 Play meeting note

put all assets for Playproject to BRAND repo

• Assets
• Landing page
• Logo
• Stickers
• in the landing page repo
• Assets (all landing page assets here)

Logo:

try how it will look in black & white version too

Header title

Search some ideas from the website

[fionataeyang]

updated: 2.28.20

Footer redesign

Footer demo1

Footer demo2

Footer demo3

[fionataeyang]

The design of twitter profile

Banner1

Banner2

Banner3

Banner4

Demos

[fionataeyang]

Twitter profile

Banner

Avatar

Avatar1 Avatar2 Avatar3 Avatar4 Avatar5 Avatar6 Avatar7 (white) Avatar8 Avatar9 Avatar10

Avatar transparent background