Film Promotion – Analysis

Analysis of my Film Production website.

Main Page 

  • I added a fade In Opacity effect on the title to call to mind the cinematographic dissolve effect. 
  • I kept the homepage simple to avoid information overload; however, the logo of the cinema, as well as the date of the show, are clearly visible in the centre of the Homepage.
  • A clean grid with the cast completes the webpage.

About Page

  • The About page shows a short plot, two reviews and the trailer.
  • The purpose of this page is to generate curiosity and to promote the movie.

Information Page

  • I wrote a simple flexbox table with prices and information about  the cinema.
  • I also added a Google Map to get directions.

Other aspects

  • Colours: regarding the colours, I played with the shades of the main-background picture, using the light yellow and the orange.
  • Font: I chose Serif fonts to ensure consistency with the font used in the poster.
  • Background: I picked a night with sky with few stars rather than a sky full of stars to keep the page cleaner and to keep the information visible.
  • Code: The website is fully responsive, and I took a mobile first approach, using media queries. 

Small Business Website, List of Improvements

Below the list of what I improved from the first to the second version of my Small Business Website:

  • SEO (Author, Description, Keywords).
  • Favicon.
  • Responsive Web Design and Mobile First.
  • Google Analytics Tool.
  • PHP include for Footer and Header.
  • Accessibility access keys.
  • Custom 404 Page.
  • Javascript scripts for opening times and hamburger menu.
  • Cross-Browser Check.
  • Image optimisation.
  • More quality to the website, in particular to the homepage.
  • Make sure HTML and CSS are still validated.
  • “Contact us” form fixed for mobile.
  • More comments inside the HTML and CSS sheets.

Atomic Design

We have always imaged the web as a system made from pages. The first internet’s goal was sharing documents around the world. 
However, the webpages are different from book pages: they are continuously updated, changing design depending on which device they are displayed on. In other words, these pages are dynamic

How many times has a designer presented a website to a client in the three most common versions (desktop, mobile, tablet)? Unfortunately, this is just a way to communicate to the client how the website will never be.

Therefore, how can designers create reliable and consistent mockups?
Designing consistent interfaces is a problem for everyone, especially when you came across devices with different screen sizes every day.

If an interface is designed in a consistent way, every interaction will be intuitive and fluid. On the other hand, if it is not consistent, the user will struggle to understand how to navigate the website, often giving it up.
When an interface works, it becomes user-friendly and it helps the user to understand certain tasks without needing any instruction.

But how can we create a consistent interface able to be adapted to every device?

The first step is communication.

In the last decade, designers have created style guides, redlines, mood boards and more to make their design qualities clearer to developers and stakeholders.
Similarly, developers have started using frameworks like Bootstrap and Foundation which allow them to create websites faster.
Often, however, these professional figures speak different languages and establish different goals during the implementation of a project.
One of the most common problems regarding the developers is indeed the lack of a common language.

Not speaking the same language creates chaos.

However, as the number of screen sizes is constantly increasing, we need to find a way to create consistent interface design systems. 
This is where Atomic Design comes to help us.

Created by Brad Frost, Atomic Design is a methodology for creating design systems. It is a series of visual building blocks that start out really basic and become more complex as you move up the design system.
These visual building blocks are organised by complexity into different stages.
These five stages are Atoms, Molecules, Organisms, Templates and Pages.
It is important to keep in mind that atomic design is a way of thinking rather than a linear process: you can go back at every stage whenever you need it.

Atoms are the most basic building blocks. They include basic HTML elements, colours, Heading Typography, Body text that have their own unique properties.

Molecules are groups of atoms that work together to form a functional unit that performs a specific action or represent a purpose. These are elements like a contact form, a team member listing, or an individual course card. Molecules give simple and reusable components.

Organisms are groups of molecules that are organised by importance, type or purpose. These may be described as pieces and parts of an overall page. These include features like course listing, the entire website footer and the related blog post section at the end of a blog post.

In the end, we have Templates and Pages. These are pretty self-explanatory but pages and templates give structure to multiple organisms. We typically make high fidelity page templates that are filled with either placeholder or actual content for the clients. Common templates are Home page templates, blog post templates, product pages, log-in register pages, contact pages.

Why Atomic Design?

One of the biggest advantages of using Atomic Design is the facility to create interfaces starting from an abstract concept, in order to implement the final user experience. We can simultaneously see our interfaces broken down to their atomic part and also see how those elements combine together to create our final experience. Atomic design may also be applied to all the interfaces, therefore not only to the web-based one.

How should you use it?

To create the interface design there are plenty of software available, the most popular is Sketch.
Front-end side, Brad Frost created a framework of components using the single elements of the atomic design.

HTML lesson

During the last lesson, we deepened our knowledge about the history of HTML as well as the anatomy of the web pages. We highlighted the fact that HTML is used to create the structure, CSS for presentation and Javascript for behaviour.
We also learnt that there is no semantic meaning in HTML tags.

After a voyage over the main HTML tags, we ended up talking about how crucial the W3C Validator is to make sure that the code is always validated.

Well designed everyday objects

MOKA

This is one of the most famous Italian iconic design in the world, displayed in important art museums all around the world such as the MoMA in New York: the Moka Pot. It was invented by Alfonso Bialetti in 1933, who designed it taking inspiration from the laundry methods used by local women. It has become popular thanks to a smart advertising campaign and, since 1950, it has been present in every Italian house. The simplicity and the practicality are the keys to his success.

Its operation is very simple: after filling the bottom chamber with water, fill up the funnel with ground coffee and put it on the stove.
The chamber is warmed until the point when it starts to create steam.  The steam caught inside the reservoir has no place to go and it forces the water to pass through the funnel where the coffee grounds reside. Once the water reaches the grounds, extraction begins and the coffee showers down into the upper chamber.
The body of the Moka is made of aluminium, which allows absorbing the aroma of the coffee. The handle is made of Bakelite, which does not get warm while on the stove. This particular material allows a firm grip as well. The eight-sided shape diffuses heat perfectly.

The design of the Moka has never changed throughout the years, making it a clear example of a well-designed object.

 

OMEGA GENEVE

This is an automatic vintage wristwatch, manufactured by Omega in 1973. As all the Omega wristwatches, it was manufactured in Switzerland.

It has a silvered satin finish dial and the stainless steel case has a polished finish. It is powered by Omega automatic 1012 movement.

The crown has two settings: if you pull the crown out of the first setting, you can either roll the date forwards or backwards until the current day has achieved. Furthermore, if you pull the crown out of the second setting, you can adjust the hour by rolling the hands forward. To guarantee its authenticity, the Omega Logo is present at the centre of the crystal and on the knob.

Despite being 30 years old, this omega is still widespread among collectors, thanks to its minimal design and the elegance of the details.

Unlike the modern digital watch, the old-fashioned mechanical watch, like this Omega, are very simple to use: all you have to do is keep the watch wound and set the time. Therefore, this lack of complexities wipes out the difficulty and frustration regarding the technology.

 

PERSOL 649

This is a pair of Persol 649, created in Turin, Italy, in 1957. Originally, they were popular among tram and coach drivers who needed a protection against dust and air. They became a style icon in 1961 when Marcello Mastroianni wore them in the movie “Divorce Italian Style”.

They show an acetate horn coloured frame, 52-millimetre lenses and a-18 millimetre bridge as well as pilot shape lenses. The lenses guarantee an excellent protection against the sun and they are probably one of the best lenses I have ever looked through. I’ve been wearing this sunglasses for five years and the robust mental hinges are still in excellent conditions.

The Persol logo is present in the top right corner and also in the inner right temple.  As shown in the inside right temple, this Persol 649 are handmade in Italy.

As all Persol sunglasses, they equipped the patented Meflecto system, which allows the glasses to give a custom fit to any face.

Well designed websites

NETFLIX

 

 

 

 

 

The Netflix website design makes the experience satisfying and fun: once inside, you are completely immersed in the contents.

When clicking the arrow, Netflix allows you to deepen the information about this movie before actually watching it.

 

 

 

 

 

 

 

PITCHFORK

Pitchfork is one of the most famous magazines about independent music.

The website has been redesigned in 2011: the new user interface has simplified the experience so browsing, searching, listening and watching is easier than it used to be.

 

 

 

 

 

PAYPAL

Throughout the last years, Paypal has simplified its website experience, making it intuitive and understandable for every user.