Posted in Web Design

History of the internet

Advertisements
Posted in Web Design

How a web browser functions

Write 2/3 sentences describing what each is and how it might be useful on a portfolio website

Client-side technologies:

HTML-Hypertext Markup Language is used to create the structure of the website; achieves fonts, colours, graphics and hyperlink effects on web pages on the internet.

CSS-Cascading Style Sheets is a rule-based language that helps to style the elements in the HTML on your website. It modifies properties such as colour, background colour, width, border thickness, font size etc.

Bootstrap-It is a free front-end framework for faster and easier web design, including HTML and CSS based design templates for typography, forms, buttons, tables, navigation, models, image carousels and much more.

Javascript-Is a scripting language used to add interactivity to HTML pages and can be embedded directly into HMTL pages. It is also accessible to everyone and doesn’t need to be purchased with a license.

JQuery-Is used with Javascript to help programmers who are doing common web tasks so it’s easier to use. Scripting already exists in JQuery, unlike javascript, so you wouldn’t need to write much scripting.

AJAX-Asynchronous JavaScript And XML allows web pages or parts of them to be updated asynchronously (not at the same time)

AngularJS- Probably one of the most popular modern day web frameworks available. The framework is mostly used for developing mostly Single Page applications and has been made by a group of developers from Google.

FTP- File Transfer Protocol is the standard network protocol used to transfer computer files between a client and server on a computer network. It’s built on a client-server model architecture and uses separate connections between the client and the server.

Server-side technologies:

Database- A database is a structured set of data which is held in a computer, especially one that is accessible in various ways.

Client- A client is a piece of computer hardware/ software that accesses a service made available by a server.

Web-server- A web-server is a computer system that processes request via HTTP- the basic network protocol which is used to distribute information on the internet.

PHP- Hypertext Preprocessor is a script language and interpreter which is freely available and primarily used on Linux Web servers.

SQL- Structured Query Language is a standard language for relational database management and data manipulation. It’s also used to query, insert, update and modify data.

mySQL- An open-source relational database management system; additionally used to add, remove and modify information in the database.

ASP- Application Service Provider (or Active Server Page) is a company that offers individuals or enterprises access over the internet to applications and related services that would otherwise have to be located in their own personal computers.

Protocol-

What do these parts of a website do:

Header/banner

Logo

Slider

Navigation (menu)

Links

Gallery

Thumbnails

Lightbox

Footer

Loader (loading bar)

Social Media Icons

iframe

cookies

responsive web design- 

What types of media could you show on your portfolio website? Where could you host these things?

e.g:

images= on the website

video= embedded using an ‘iframe’ from youtube

What is an iframe?

 

Posted in Film, Live Action Game Trailer

Live Action Trailer Synopsis

Overcooked:

overcookedtitle

In the trailer, I would have people running around as the characters pretending to cook, with parts of the game being shown for the less realistic parts that we’re not able to pull off in real life such as cooking on a ship, van, ice etc.

  • Have closeups on food and cooking, running around an assumed kitchen space and shouting to try and work together.
  • Many characters to choose from to make it seem like there are more people than there actually might be

Screen Shot 2018-01-11 at 09.50.59.pngScreen Shot 2018-01-11 at 09.51.08.png

Critique:

Slender:

maxresdefault

In this trailer, I would have someone running through a forest with a flashlight, collecting pages like in the actual game, having parts of the game being shown that are less realistic such as the actual monster shown in the game.

Critique:

Posted in Web Design

Website & Portfolio Analysis

Etsy:

  • Uses lots of negative space to draw your eyes to the products being sold.
  • Very subtle and aesthetic colour palette
  • Simple and readable fonts
  • Each section spaced out and easy to read

Screen Shot 2018-01-03 at 15.31.04.png

Pinterest:

  • Uses negative space effectively
  • Spaces out content so it’s easy to read and look at.
  • Colour palette is simple and not distracting or lots of colours trying to draw your eye everywhere.
  • Shows you the source where the images are from so you’re able to find them if you go on the website at a later pointScreen Shot 2018-01-04 at 09.45.23.png

Redbubble:

  • Simple fonts
  • Quirky and fun design which draws your eye in first
  • Clearly states in the middle of the design what you can search for so it’s easier to navigate through the website.

Screen Shot 2018-01-04 at 09.40.33.png

Team Fortress:

  • Simple linear pattern
  • Shows all the people you can play as, letting you click on them to find out more about them.
  • Clearly shows links to other parts of the website, as well as social media and other sites connected to the game which has even more content
  • Latest post it always at the top and easily accessible. Screen Shot 2018-01-03 at 15.36.08.png

Tumblr:

  • Very simple design
  • Fonts are clear to read and match well together
  • Shows off artwork from someone who uses the site
  • A simple colour scheme to not take away from the main focus- which is the artwork. Screen Shot 2018-01-04 at 09.39.48.png

Richmond Borough:

  • Colours aren’t very appealing to look at
  • Different fonts that don’t go together very well
  • Your eye is drawn to the white buttons to the left and then leaves you wondering where you’re supposed to go nextScreen Shot 2018-01-03 at 15.24.09.png

Sweet Bro & Hella Jeff: 

  • Very unappealing and bright colours which get irritating to the eyes
  • Font isn’t neat and is childish
  • Confusing to navigate through the website
  • Messy posts
  • Very busy
  • Poor use of negative space, all the posts are shifted off to the left side rather than being in the middlScreen Shot 2018-01-03 at 15.32.24.png

http://www.nicolasbrunophotography.com/

https://www.instagram.com/nucl3arsnake/

http://magical-sanatorium.tumblr.com/

In these blogs and I like the use of negative space that they have and the simple design where it has a little about them but mostly features their work from most recent to oldest. I’ll also take ideas away with me such as how I’ll make use of that negative space, fonts which compliment each other and how my work may look on the website.

 

Posted in Unit 52, 3D Animation

Pixar short film analysis: Inner Workings

 

Inner Workings is the story of the eternal struggle between the brain and the heart. It was directed by Leo Matsuda who previously was the story artist for Big Hero 6 and Wreck-It Ralph, and produced by Sean Lurie. inner-workings-slice-600x200

The short is a blend of CG and traditional hand-drawn animation, using Walt Disney Animation Studios’ 2D interpolation software Meander, which was used before in their shorts ‘Paperman’ and ‘Feast’. The short makes up a fun and quirky story which explores the importance of finding balance in daily life.

In his childhood, Matsuda read encyclopedias, finding the parts about the human body fascinating, with the different systems and how they worked- with Matsuda wanting to tell a story about it since it was one of the most endearing memories of his childhood. He was inspired by being Japanese and Brazilian- with Japan being very disciplined and logical, but Brazil also being very exciting and liking Carnaval and parties. It was these two extremes that gave him the idea for this.

It was an intentional decision to have no dialogue in the short and have music enhance the mood with a quirky score reminiscent of the ’80s- which is when Matsuda was born. inner-workings-04-600x457

They wanted the style of the short to be more theatrical, like you’re sitting and watching a play, with the work of Wes Anderson being an inspiration for the style and the work of Ward Kimball being an inspiration for the organs because of his originality and inventiveness.

They made the organs of the story the main characters, making them more appealing by making them adorable and giving distinct personalities to the brain, heart, guts, lungs, bladder, kidneys etc. They liked the snappy and fun feel that the graphics hand-drawn style of animation gave off, so they kept the idea and style that for the brain.Screen Shot 2018-01-03 at 10.35.04.png

They wanted a graphic look for the character, with Paul’s (the man housing the organs) head being square and his body being a stick. However, getting the mouth to move on a square Additionally, they were inspired by stop-motion, making two heads for the character; one with a mouth on the front and one with a mouth on the side, switching the heads mid-scene to achieve this effect.

Screen Shot 2018-01-03 at 10.33.42.pngScreen Shot 2018-01-03 at 10.34.27.png

To contrast everything about Paul and his office being squared off, the beach and cafe characters are very curvy, loose and colourful. They made the beach feel crowded by taking two female characters and two male characters, changing their costuming, hair and scale to create variety and diversity. Screen Shot 2018-01-03 at 10.39.43.png Additionally, they did a mock-up of the entire environment in the short but only built what the camera would see so that it could be more efficient and economical- but still look as detailed as the final product does.

inner-workings-02-600x412

The storytelling is done very visually, with the colour script being clear to define when it’s the head or the heart dictating what is going on, with the heart being very sunny and bright and the brain being very boring and dull, which is very clearly shown over the struggle of trying to get him to go into work. stmhta5xofaahczoqt38

In this short you can see a lot of exaggeration as well as squash and stretch, making the movement of the character feel a lot more fluid and enjoyable to watch, in the end making it appealing to the audience since it’s funny and upbeat, something to make them happy before the film is played.

This animation would be viewed in the cinema before the movie ‘Moana’ as it was made to be shown before it, but might also now be shown on youtube once the film has properly come out. You could view it on computers, in cinemas and on phones/tablets and it’s important because it shows the variety in the media that you could watch this on.

Reference: http://collider.com/inner-workings-disney-moana/#leo-matsudo

http://physbam.stanford.edu/cs448x/old/Animation_Production_Pipeline_(2d)_Nora_Willett.html

https://en.wikipedia.org/wiki/Inner_Workings_(film)

https://en.wikipedia.org/wiki/12_basic_principles_of_animation

Posted in App Design

App Design Production

This is the general colour scheme for my app- with the colours being able to change to personalise the app to each person. I thought these colours were fairly calming and went well together so I went with it. The codes for the colours are:

  • 36c2d9
  • ff8360
  • e8e288
  • 7dce82
  • 1cdeaa

Screen Shot 2017-12-11 at 14.25.17.png

 

 

 

 

 

This is my first page so far, with black bars in place for things on the actual page. The little white menu bar on the left will open up to reveal a menu featuring pages such as being able to plan your journey, a calendar, alarms/ reminders, homework/lists/things that need to be remembered (obviously personalised for each person) and more personal things such as daily care as people with depression and anxiety may struggle with these issues and want to keep track to make sure they take care of themselves.

Screen Shot 2017-12-11 at 14.26.57.png

Posted in Film

Film Trailer Analysis

A Ghost Story:

I learnt that names of films may be deceiving.

The genre is perceived as horror but is clearly a romance story once you properly watch the trailer.

A female, and a ghost.

The age rating is 15+

A woman loses her husband and the ghost of her past(?) goes back and visits all the memories in her old house.

The Autopsy of Jane Doe:

The genre is very clearly horror.

The main characters are a father and son who are in charge of a morgue who have to discover how she died.

The story is about a haunted autopsy and how the protagonists have to find out how the person died.

Rated R/ 15

Coco-

The genre is animation and fantasy. Age rating is 7+

What do you learn from the trailer-

Genre-

Who is the main character/protagonist

classification (age rating)

What is it about (story in the trailer)