Interactive design - Excersizes
Week 1-8
Navigation wise it's interface is very easy to use you can click on the project that is currently on screen and see more into the project itself you can scroll down and read more information that showcases the project well, the purpose of the site is to give you an inside look into these projects. The site itself has an video embedded into it so that visitors would stick around. As previously stated more information about the projects appear when you scroll down, I find this to be a neat gimmick as it catches your attention and leads you on.
Once all that was done I had to find a font that was similar to the site's. I
settled on Radio Canada Big (bold, semi bold and medium) Since It was the
closest thing I could find. It took me a while and the type was honestly the
most time consuming part but I managed to pull through.
Exercise 3 - index.html recipe card
Jessica Tjoe / 0361482
Interactive design/ BDCM/ Institute of Innovation and Technology
Excersizes
Interactive design/ BDCM/ Institute of Innovation and Technology
Excersizes
Instructions
<iframe
src="https://drive.google.com/file/d/1xNYDFxMGKkk6B00-Zj8E3bUlfO-txbvP/preview"
width="640" height="480" allow="autoplay"></iframe>
Exercise 1 - Web Analysis
Our first task was to Analyze 2 websites from the links provided to us by our
lecturer below;
The websites I have chosen to Analyze are
12wave
12 wave starting screen
12 wave is an interactive website where you guide the little astronaut sheep
around asteroid platforms attempting to get the highest score by jumping as
far as you possibly can.
Analysis:
The whole aesthetic of this website is very cute and playful it shows you
the purpose of the site which introduces you to to the interactive mechanics
and services that the studio offers. It has a fun color palette that doesn't
overwhelm the viewer and is colorful enough to keep the viewer's attention
with beautiful contrast and harmony.
The site's navigation is clear as day but at the same time it is kind of
confusing for first timers. How this is, is that after the initial start
button that draws you in, you barely have anytime to process how to play the
game but as you try over again it makes it clear that the cruiser is the
object controlling the little sheep. Performance wise it performs very well.
It doesn't crash your computer from over loading after trying to get the
lamb to jump 25 times in a row. It doesn't require the use of high internet
signal. And the coding is simple enough that it works just as well as any
location as long as you have just a bit of internet.
The loading is quite fast and as soon as you push the start button you can
immediately start playing the game. The site is very responsive and is very
easy to use and it's compatible on both browser and on mobile though in my
personal opinion the mobile is easier to use due to past experiences. The
browser version allows for a much more wider array of movement while on the
mobile version you are limited to how big is your screen. However this can
also be an advantage since you won't be able to die so easily in game
because the screen is longer and you'd be able to see the platforms that you
have jumped on before and you won't have the problem of dying so easily.
.
Over all its a very well put together website with cute aesthetics, beginner
friendly interactive elements, and a fun purpose.
Aircord
aircord starting screen
Aircord is an interactive project showcase website created by Toshikura
Kenta of garden eight an interactive design studio based in Japan. The
site over all is sleek and has a futuristic design and aesthetic. The
floating button allows you see which way the projects are rotating as well
as guide you on the direction the site is moving.
Navigation wise it's interface is very easy to use you can click on the project that is currently on screen and see more into the project itself you can scroll down and read more information that showcases the project well, the purpose of the site is to give you an inside look into these projects. The site itself has an video embedded into it so that visitors would stick around. As previously stated more information about the projects appear when you scroll down, I find this to be a neat gimmick as it catches your attention and leads you on.
The font used in this website is Neue Montreal and Futura, I find Neue
Montreal to be a bit more nuanced and so it's better for information while
Futura takes the stage for the heading. The reason for this is because the
clear structure of the font captures people's attention, but it also gives
the site a very futuristic feel as stated previously. Loading is
very quick, you don't have to wait for a certain amount of time and the
loading bar itself has a satisfying transition that turns into the black
portal you see on the loading screen.
The difference between the mobile and browser versions are that the
browser version is a lot better than the mobile version as the amount of
interactive control on the mobile version causes it to lag in many
aspects. You can control the rotating wheel using your fingers but it
doesn't have the auto rotate on the browser version, though it is
responsive.
Overall its an interactive experience that allows you to see amazing
interactive projects from the comfort of your device.
Exercise 2 - Web replication
Our second exercise is to replicate 2 existing main pages from 3 existing
websites linked below ;
Out of the three I chose the latter 2 since I thought they were interesting,
one is a site to spread awareness about ocean pollution and the other is an
online fitness apparel store.
Process
First we had to gather screengrab the sites, how we did that was first opening
the site. After the site had fully loaded right click to open up inspect
elements to bring out developer mode. From there run commands, type in
screengrab and select full screengrab. Once that is done the computer will
automatically take the shot and will auto download the PNG for you.
Figure 1.0: run command full screengrab settings
Afterwards proceed to load up adobe illustrator and open the screengrab and go
to object > artboards and select set to artwork bounds. This gives us an
artboard perfect for replication, remove the screengrab and start
reconstruction.
Unlike everyone else who started with the typeface I decided I was going to
block it out first. This way I'd have more knowledge on the positions of the
typeface and where to place them.
Figure 1.1: Blocking
Next I had to find the images and added them to the replica. This is where I
felt like an idiot for skipping some of the info on the classroom post
because, I spent a whole day basically reverse searching these images only
to find that most of them were from the website and I thought I had to
recreate the site faithfully. Which in all honesty, is on me. I learnt from
this basically don't skip reading the brief even after the lecturer has
given you clear instructions. Some elements I did recreate using the shape
tool and pen tool as they were easy enough to pull off.
Figure 1.2: Adding images
Figure 1.3: Adding type and finishing details
The same was also done for the second website just with a slight change of
type and aesthetic over all. I didn't search up a font for that one because
Myriad pro one of Illustrator's default fonts matched the site almost
perfectly.
Figure 1.4: banditrunning site replication
PDFs and over all finished versions
<iframe
src="https://drive.google.com/file/d/17FrJ6v_4_irLKUcEcNSWlFAoe8af2Aph/preview"
width="640" height="480" allow="autoplay"></iframe>
website replication 1.jpeg
<iframe
src="https://drive.google.com/file/d/1uKgcILKrupffjKTb55k5ErdbOmwLhtkZ/preview"
width="640" height="480" allow="autoplay"></iframe>
Website replication 2.jpeg
This exercise was assigned to us for independent study week. We were tasked to
use html in order to code a recipe card from a site provided by the
lecturer.
I started off with taking the necessary information of the recipe and placing
that into dreamweaver. After formatting everything I changed the background to
yellow using CSS. I then went back and fixed any code that broken and added
the images, I had a slight problem with the images due to the fact I didn't
convert the files at first.
I tried uploading the file to netlify only to be met with an account
suspension. I had to wait til the next day and made a whole new account just
so I could upload the site onto netlify.
Comments
Post a Comment