Website Research

Website 1:

Nintendo Webpage

The Nintendo website supplies both information and great visuals for its products. You can easily navigate through it and find what you want – either by its images or written information.

If I’m going to nitpick and be critical, one downside I can see is that it is a little bombarding on the menu screen. It has a large amount of bright, colourful images all clustered closely together showing up first thing as soon as you click on the website.

Although there is very little negative space on this website, i wouldn’t particularly say that its a bad thing, as the site is very organized and well arranged. It has a fun, playful look to it but has a mature, structured layout – a combination that works perfectly for a wide age range that Nintendo supplies for.

Inspiration from this website for my own would be its ability to blend both fun and information.


Website 2:

SkinnyDip London:


Personally, i find that this website has aesthetically pleasing visuals, its pink and white colour theme and fun feminine feel really brings it together. They style of the website represents its products and image of the company.
From looking at the way the website is made shows that they cater to feminine young adults interested in beauty and fashion. Its fairly obvious to gather this from scrolling just through the homepage.

One negative take away would be its images are just that bit too large and overtaking on the homepage. The initial large image scroll through works well, but as that theme carries on further down it becomes rather tiring to scroll through it all. Other than that i don’t have any complaints on the websites design.

Elements of this website that i want to include in my own, is the fun and fairly feminine visuals.

website 3:

Jenny Harder’s Portfolio Website

Screen Shot 2018-01-09 at 11.35.54.png

I really like this artists portfolio website, the layout is (word other than perfect) and the colour scheme works nicely. The home page is a lot less busy in comparison to the last two websites i have researched. It is very neat and organized, the categories for the work all present on the home page, a beautiful piece of work of theirs as the top banner and easy to read information beneath their profile pic (which is more of their work). There is no fuss or too many distracting elements from the work.
This concept artist has a wide variety of work in their portfolio, with art ranging from character work to backgrounds and such.


Website 4:


Screen Shot 2018-01-04 at 10.09.47.png

The site LingsCars is a cars rental site, but there is a lot more to it than just cars.

Visiting the website LingsCars is an unreal experience. There’s information everywhere, every harsh colour that exists, and an abundance of gifs. In a graphic sense its a mess – there is too much going on, everything is overlapping and clashing –  but its not necessarily a bad idea, It’s rememberable and unique, there is nothing like LingsCars. Although there is a lot going on, it does something every business wants: to be remembered. It seems like a terrible idea, but after deeper research and thought as to why this website is like this, its actually genius. It stands out. It grabs everyone’s attention. It turns heads. If this website was pictured next to a few other cars dealership website – LinksCars would be the one people see first. The website itself is one of its biggest marketing points (that and the truck with the missile on it, pictured below).

Ling clearly has a sense of humour that shows itself throughout their website. There are jokes littered on every page. Doing this gives this website and its owner character, making people want to look further for more of its personality.

Overall, its a fun, confusing website that hurts the eyes but you just can’t look away.


Website 5:





Website 6:





Website Terminology

HTML: HyperText Markup Language is the code for website creation.

CSS: Cascading Style Sheets is used to keep information in the proper display format with websites.

Bootstrap: is a front-end open-source framework that is used for web development design.

Javascript: JS is a term in computer programing language that is used to create interactive effects.

JQuery: a library built on javascript code that simplifies HTML for responsive web design and user interface interactions, it is made to be lightweight and easy to use when coding website development.

AJAX: Asynchronous JavaScript and XML is used to create interactive web application that works faster and better, it works in the background to send and receive data that doesn’t effect the display.

FTP: File Transfer Protocol is used to transfer files between computer on a network and a client and a server.

Database: is the organized, structured collection of data on a computer.

Client: is a piece of software or hardware that gives access to a service held with a server.

Web-server: is a computer system that hosts websites over the internet, it processes requests and sends information over a basic network protocol.

PHP SQL: is a free, open source scripting language, it is used to develop application or internet on the web.

MySQL: is used for database management, it is an an open source system.

ASP: Application service provider is used over a network to provide services to customers.

AngularJS: is a javascript-based framework used to create web apps.

Responsive web design is a key part of webdesign that makes the website view-able on any screen (phones, tablets, desktops, etc.).

Cookies is used to store and contain information about a browser by a server.


A Header/Banner displays some basic information on the identity of the website, like the name or logo, photo of some work or  the owner of the website. It is also most often at the top of the page.

A Logo is used to represent the company or brand in a visual and recognizable sense. The logo is usually on the banner.

A Slider on a website is a term used for a slideshow.

The Navigation (menu) is used to maneuver through the pages on the website. It usually includes a way to the homepage, about page, help page, etc.

Links on a web page is used to redirect the user to places on the website or elsewhere.

A Gallery is often used to display a series of photos of work that is relevant to the website.

Thumbnails are a way to represent work (or something similar context) by using a small picture or video. An easily recognized example of this would be the small image one would see linkedto a YouTube video before clicking it.

A Lightbox displays images and videos in a way that fills up the majority of the screen, and dims out whatever left of the website is seen.

The Footer on a website is placed on the bottom section of the page and contains information, such as contact info or links .

Loader (loading bar) is used as a visual indicator on the progression of the loading site or page, it often shows how long the user needs to wait.

Social Media Icons on a website is used to show that the person or business has a profile on said sites that a represented on the website. (e.g. twitter, Instagram, etsy, tumblr, etc.)





Animal Crossing Trailer Plan

Thursday 25th January:

Plan – Story Board, script, location rekkie, prop design

I emailed Kingston museum for permission to film, they redirected me to other point of contact to ask permission.
I started off the details of the script, working together with the storyboard – which was also being made today, with Jade being in charge of it as they are the creative manager.

Although we planned to do a location rekkie that day, due to a few complication we  unfortunately had to postpone it.


Thursday 1st February

Plan – Finish Story board, finish Script, Location rekkie!!!(MUST DO TODAY!), Prop making,

I finished writing the script for the trailer, and jade finished the Story board. The props were made

Thursday 6th February

We started some filming, we went to Canbury Gardens and did the fishing scenes, tree shaking scenes, and various walking scenes to use in the reality break.

Unfortunately, none of the shots are usable for a variety of reasons. These scenes will need to be reshot when possible

Thursday 8th February

We filmed the clothing store scenes that Imogen and I starred in as Mabel and Sable. We filmed in college, supplied all the costumes ourselves, the props were supplied by a mix of our own objects and college (mainly mannequins).

Between the 12th and the 21st of February Harriet The Director got really ill.

Between the 15th and the 27th of February Noah the Cameraman and Editor got really ill.


Thursday 22nd Febraury

We did the whip pans this day to put before, inbetween, and after the scenes, mainly the clothes store and hairdresser scenes.


Between 23rd February and 4th March I was sick and unable to contribute to the project.


Tuesday 7th March

We filmed the Harriet Hairdresser scenes.


Thursday 8th March

Today we got all the work we did together and completed. (Script, storyboard, moodboards, prop planning, costume planning, lighting planning)







Animal Crossing Trailer Development


animal crossing modboard.jpg




  • Player-noah
  • Harriet the poodle- harri
  • Sable-imogen
  • Brewster- jade
  • Mabel-lulu
  • Tom nook – tom
  • Rover-Harri
  • resseti-lulu





  • Train
    • Meet rover on train
  • Fishing
  • Shop
    • Tom Nook dialogue
    • Shop camera shots
  • Hairdresser
    • Harri goes through the dialogue Harriet the Poodle says at the hairdresser.
    • Player changes hair
  • Clothing shop
    • T and I go through Mabel and Sable dialogue
    • New clothes
  • Café
    • Coffee is served
  • Tree
    • Shaking tree
    • Shot of leaf on ground
    • Leaf turns into chair
  • Snapback to reality
    • Carrying a chair and a shovel
    • Maybe a fish
    • Tired
    • Hair is a messy mess
    • Cuts to animal crossing figurines/amiibos?


Scenes in order:

These scenes will be shown more as a montage-ish style in trailer

  • Get off Train (meet Rover?)
  • Empty room (the players house); chucks bag down, sigh at emptiness, leave room.
  • Shakes tree, fruit falls down, & leaf falls down, player picks up leaf but its a chair, puts in pocket.
  • Tom Nooks shop, sells fruit for money (bells)
  • Clothing shop, gets new look
  • Hairdresser, gets new hair
  • Museum
  • Fishing? Reality break through the fishing; becomes dreary and less colourful (Mr Resetti in the background, looking disappointed)
  • Shows Player walking around with a chair, basket of peaches on chair, a flower in their hair(?), tries to replant flowers by throwing it on the ground, people around Player giving them strange looks (maybe filming)
  • Snaps back to bubbly, colourful game and out of Reality with Player in his once empty room that now has his chair in it




Trailer Feel


  • Light and fun
  • Bubbly
  • Bright
  • Lots of colour
  • Happy music
  • A faster, peppy, pace (not too quick so you don’t know what’s happening, but quick enough to get a peppy and (*) feel from it.



  • Raw
  • Creepy and eerie
  • Happy music continues but it is slightly faded and distant
  • Basically Doki Doki but with animal crossing
  • Mr Resetti
  • Idea that things might not be like they actually seem (like Brandon Roger’s mom video)
  • Yeah i agree ^^^
  • Slower, unsettling pace than when it’s in the game (not too drastic but enough for people to pick up on a noticeable change)
  • Suddenly snaps back to game, pace goes back to what it was before (like the reality break never happened)




The player arrives at their new city, Rover greets them whilst on the train. The Player is in a bright, bubbly, and colourful space of existence that seems unreal. Traveling through their new city and its stores, The Player takes in the sights and enjoying its amusements. They travel to parks and rivers, stores and



‘Bubble Bubble’ App Brief Evaluation

Before this brief i had not worked on any app related projects. both professional or personal wise. It was quite interesting to delve into this style of design and i did enjoy creating the visuals for my app.

‘Bubble Bubble’ is a beverage app made for users to find places to find Bubble Teas and flavor combinations of said drinks.
I stuck to the colour theme i set all through the projects and I am glad i did because these colours fit perfectly with my app genre. I feel that the colours were bright and fun but not harsh on the eyes nor caused any disruption to the layout.

With the logo, i made that in illustrator, but the screens were made in Photoshop. Primarily, i sued the shape tool in both Photoshop and illustrator. I have always been less than comfortable in using illustrator  – especially in comparison to Photoshop.
The text that is used on the screen is (*). Choosing this text was very easy as i knew instantly that (*) was exactly what i was looking for and fit perfectly with the overall aesthetic of my app.

I really enjoyed working in Adobe XD and its a shame that we were unable to use it further in class. We did move onto the program Muse to view the app screens, and personally i didn’t particularly enjoy it as much as the other programs we have used in the past.

My favorite part of this brief was designing the visuals of my app, working on colour combinations, finding the perfect layout, and. Personally i very much prefer to work in the visuals and aesthetics rather than more academic orientated processes like coding and such. I also enjoyed creating the logo, it took a little while to decide what direction i wanted to go for but in the end I am happy with my decision.
I hope to progress in the more creative side of app design as i had a lot of fun with that, and i hope to be more comfortable and skilled with working in newer programs that will aid me in designing similar

Final App Design for ‘Bubble Bubble’

Here is my final piece for the app design brief.

Final Logo:

logo final yeah

For my final logo design i chose to use this style as it has the most fun and eye-catching look in comparison to my other alternations. I made a few very minor changes here and there – such as i made the colour for the lines surrounding the cup and the heart the same dark purple colour, and slightly rotated and shifted the cup to the left.
I am very happy with how this came out, it may not look exactly what i originally envisioned but the path it went down is even better.


Final Screens:


The design of the final three screens for my app have stuck very closely with the original idea that was first drawn in my sketch book. The designs went through a few minuscule changes, nothing too drastic, just some very minor colour shade alterations and some almost unnoticeable movement with the layout that – at least i feel – brought it all together .





Game Trailer ideas


Related image

A young girl called Ib visits an art museum with her parents, but suddenly gets transported into an alternate world where all the art in the museum has come to life – all with malicious intent.
Ib meets Gary who’s also trapped in this strange universe, and together they try to escape this place through various puzzles and escaping many enemies.


The trailer will include dark lighting, lots of running shots, light eerie music.

A dutch angle with the camera down a long, dark halfway. Gary and Ib can be seen running down in panic, the woman in red painting



Final Logo Design for ‘Bubble Bubble’

Final Logo design copy background

The final design i have chosen for my app is the last out of the six. The reason why i chose this one is not only because it stuck out the most on the design sheet but because it had the most appealing and memorable look.
I can see this design on something like an enamel pin/broach, or a badge – nothing too big or too small, but regardless of its size i fell as though it would stand out.





‘Bubble Bubble’ Logo Designs

bubble tea logo

For my ‘Bubble Bubble’ app i created six logo design with slight alterations between them. I stuck to the pink, purple, and blue pastels colour scheme i have mentioned a few times before both in my book and on this blog. I knew from that start when brainstorming logo ideas that i wanted to make a cup bubble tea the main center piece of the logo, and to have a heart shape be the background.

On my logo design concept sheet above there are only sight differences between each of the six pieces, the main alterations are the line art and arrangement of the bubbles in the bottom of the cup.

Included at the bottom of these logo designs is the exact colours used in the design. I took the code from each colour and put it in the adobe colour wheel, and took a screenshot of it so i always have the exact colours i use for when i further develop the visuals of my app.