Interactive applications portfolio

leonardo chiappalupi Interactive applications portfolio

leonardo.chiappalupi@mail.polimi.it • ledoweb@gmail.com

leonardo chiappalupi User experience is a form of story-telling. From videogames, designed to entertain but capturing the player in another dimension, to applications and websites, that should offer users rich experiences in a awless and hassle-free interaction, designing computer interactive applications is a kind of art that requires dedication, polishing and care, both graphically and in terms of features design.

This portfolio collects all my works, to showcase the vision I have about creating interactive experiences.

2

contents Game design and creative direction

4

LightWeight

6

Detective Noir

10

Clash Of Waves

16

The Buttery Effect

20

Front-end development and applications

30

Formula Hub

32

National Clinics

38

Helpick

44

3

ga creat

Creat

must be polishe

its own uniq

and progr

1. ame design and tive direction Fun is an important part in game design, but there is fare more than that.

ting a videogame is a matter of creative coherence: from the visual aspects, where everything

ed and reďŹ ned, to the gameplay and level design, that should entangle the player while telling

que story. A game should feel natural in terms of controls, be addicting in terms of storytelling

ression, and it should deďŹ netly create memories that link the game to emotional experiences.

These projects, even if on a small scale, contain all of these aspects, spacing through different genres and approaches but always with these guidelines in mind.

LIGHTWEIGHT Created for: Year: Technologies: Genre: Roles:

Global Game Jam 2015 2015 Unity, C# 2D Cooperative Puzzle Game Concept, Gameplay Designer, Creative Director, Programmer

LightWeight is all about energy. One player controls a small, smiley light, the other instead will guide a heavy weight: they both need each other to reach the end of every level, because they can exchange energy as they wish. The more energy the light has, the brighter it gets; the more energy the weight has, the heavier it gets... and vice-versa. The light can freely move around, while the weight has to jump and slide: players should cooperate to exchange energy between them, depending on what challenge they are facing. The light, indeed, is the only mean to see something; the weight instead can jump higher if it gets lighter.

Lightweight was awarded Best Idea by the GGJ Milan Jury.

6

7

8

9

10

Created for: Year: Technologies: Genre: Roles:

Global Game Jam 2016 2016 Unity, C# 2D Investigative Game Concept, Gameplay Designer, Creative Director, Programmer

Ayin is a detective trying to solve, during the 1940's, a series of complicated murders where the killer makes strange rituals with his victims. How can he discover who's the culprit?

Using the very same weapon - a special totem that the killer once left around the murder scene. Ayin realizes he can control and possess other people with this stone, having the chance of getting special information from witnesses reluctant to talk with him. The game is set in a handcrafted noir environment completed with custom composed music, for a unique atmosphere and intense storytelling.

11

12

14

Created for: Year: Technologies: Genre: Roles:

Global Game Jam 2017 2017 Unity, C# 2D Multiplayer Battle Arena Concept, Gameplay Designer, Creative Director, Programmer

What happens when you combine waves with a battle arena?

Clash of Waves collects all the characters whose life was somehow about waves: players can choose among famous scientists Mercalli or Tesla, Goku, electronic music composer Deadmau5, the world famous surfer Kelly and obviously... a bat! Everything is presented in a colourful authentic 8-bit style, including the original soundtrack composed just for the game. Each character has its own unique attacks based on waves, and a stamina value to be reďŹ lled by collecting orbs around the arena.

Clash of Waves is based upon a last-man-standing challenge, and supports up to 4 players.

Clash of Waves was awarded Best Soundtrack by the GGJ Milan Jury.

16

17

20

Created for: Year: Technologies: Genre: Roles:

Videogames Design and Programming Course 2017 Unity, C# 3D Metroidvania Concept, Gameplay Designer, Creative Director, Programmer

Mila is a girl with a unique power: she can jump among three different timelines, and move in a blink of an eye across the past, the present and the future. For this reason, the Raven Corporation has trapped her and other promising children in a secret underground facility, waiting to conduct further experiments and assess their real powers.

But only Mila knows what the future and the past looks like! She will jump back and forth in time, solving the puzzles to overcome the obstacles and reach the freedom! Plus, Mila will be able to use her timegun in the future to send objects back in time, using their earlier forms in the present and in the past to get out of troubles and untangle the most difďŹ cult enigmas. Because remember: as the "Buttery Effect" teaches, even small changes in the past can have huge consequences in the future.

The Buttery Effect was rated 30/30 with Merit (Lode)

21

The same environment as appears in the three timelines From left to right: Past, present and future

In the previous two pages: The main menu Airscopes of the underground secret facility

24

26

27

The hint system Overlay GUI for hints and inventory

28

The Time Gun The ray is bent for a feedback on the player orientation change

29

user in a

Compute

easy to use and

left at t

The following

with polishe

2. nterfaces/apps and front-ends

er software, websites and mobile applications should not only be efďŹ cient and secure, but also

d designed to spot a natural interaction with the users. The UX design is too often forgotten or

the end of the development process, while it should be a crucial part of the creative workow.

g projects are built around this principle, and they combine a friendly navigation or interaction

ed and carefully designed user interfaces. They also make use of rich multimedia experiences, empowered by pictures and colors that give important information at a glance.

Formula HUB Created for: Year: Technologies: Genre: Roles:

Personal project 2016, 2017 Android SDK, Java Android Application UX Designer, Developer

Formula HUB is the deďŹ nitive application for all Formula One fans.

Users can see information about the next race at a glance, get details about results of any qualifying session or race, browse a rich season calendar with TV times and track layouts, check the current season standings and navigate a complete database of drivers and teams, with galleries, helmets and a lot more.

The app is always updated with fresh data, and users can also customize it using themes! Every team has its own theme, so the app can have the colors of the users favourite ones.

The app has been released on the Play Store, and it has been updated to support the 2017 season as well.

Formula HUB is 100% Google Material Design compilant.

32

33

34

35

36

37

Created for: Year: Technologies: Genre: Roles:

Hypermedia Internet Applications Course 2017 HTML5, CSS, JavaScript, NodeJS Website (Frontend + Backend) UX Designer, Developer

The course assignment was to design and develop the website for a (not actually existing) medical clinics network. The name, branding, visual identity etc. were all designed from scratches, and so NationalClinics was born. The website has a coherent identity in all of its elements, including buttons and fonts, and it’s enriched with custom designed graphics like the ones that slide on the home page. It allows to browse numerous information about the clinics, including locations, staff members details, medical areas and treatments, plus a complete ‘who we are’ section that also include a company tree. The website is completely dynamic and fully responsive, and it suits all kinds of screen sizes.

The project was rated 30/30 with Merit (Lode)

39

Normal button Un-hover

Focused button Mouse hover

Footer

41

Example of mobile layout The entire website is responsive

43

Created for: Year: Technologies: Genre: Roles:

Design and Implementation of Applications Course 2017 Android SDK, Java, NodeJS Android Application, API, Backend UX Designer, Developer

Helpick is a platform that helps users pick! They can upload single pictures or collections, and other people will anonimously rate single pictures from 1 to 5 or choose the best one in a collection. In their proďŹ le section, they can browse how their contents are doing, and use ratings to decide whether to upload those contents on their social medias or not!

The platform logo, branding and theming have been created from scratch, and the UI is adaptable to any kind of device, from smartphones to tablets, portrait or landscape. The interface design has been carried over thinking about simplicity and ease of use, and a custom ratings picker has been designed especially for this application, to vote a picture with a single swipe.

The app also includes two themes, one dark (default) and one light.

Helpick has been rated 30/30 with Merit (Lode)

44

45

Login screen Various form-factors and themes

46

47

Content details With sharing and rating

48

Upload UI Mobile and tablet views

49

Š2018 Leonardo Chiappalupi All contents of this portfolio are property of Leonardo Chiappalupi, and may not be copied or used without the owner authorization.

Some images may contain copyrighted logos, brands or pictures for which fair use is intended, and they are property of their respective owners.

Last updated: May 2018