Hi! My name is Claudio.
Guess what, I’m a Designer.

Starting off as a Graphic Designer many years ago, the digital world won me over early on. I have since been implementing my typography and color theory knowledge into my digital work. Focused on UI and UX Design I’m passionate about turning big ideas into intuitive, simple and beautiful web and mobile products that delight users.
When I’m not building the internet I like to travel, socialize and make noise with my guitar.

Recent Work

Electric Car App

Electric Car App    

Challenge: Design a mobile app to test the interface of an Electrical car companion app.

Part of an assignment for TomTom, this project is a study on mobile User Interface and User Experience. Starting off with a story and a scenario, I had to design a customer journey, taking in account the whole experience.

Check the link to see the live prototype.

Tools: Sketch; Framer

Moving Icons

Surface Landing Page

Challenge: Compose a Landing Page to promote the new Microsoft Surface 4.

At Staples some products have their own "special" page, a harbor where specific banners, emails and social media posts are linked to. This pages have to be engaging and meticulously design, taking in acount the whole customer jorney.

Tools: Photoshop; After Effects

Electric Car App

404 Error Page

Challenge: Propose a fun and interactive 404 Error page for the Staples website.

There are a lot of examples of interesting and fun 404 pages, this one is no exception. Integrating unexpected moments of humour like this bring us closer to the customer, providing a more informal environment. It's also important to ensure the customer didn't commit a mistake by arriving to a page that doesn't exist.

Tools: Photoshop

Moving Icons

Staples Advantage Home Page

Challenge: Redesign the Staples Advantage Home page for Netherlands.

Following a strict grid, my team and I had to redesign this business oriented Home Page, to get it more organized, fresh and get rid of unnecessary visual clutter.

Tools: Photoshop; Axure

Designer Quotes

Designer Quotes    

Challenge: Prototype a mobile app to display Design related quotes.

Inspired by masters like Steve Jobs, Charles Eames or Dieter Rams I prototyped this app with clean interface and high user engagement.

Check the link to see the live prototype.

Tools: Sketch; Framer

Moving Icons

Moving Icons

Challenge: Animate Icons to display live information.

Why are some icons static when they can provide real time data? Icons like the Compass, Clock, Weather and Calendar should always display the right amount of information without the user have the need to open them.

Tools: Sketch; After Effects

MIUI Screen Unlock

MIUI Screen Unlock    

Challenge: Create an interactive prototype to showcase the unlock screen on MI User Interface.

An interactive prototype is always the best way to display how certain elements will behave upon user interaction. For this prototype I used Framer to demonstrate how the UI reacts when the user unlocks the screen.

Check the link to see the live prototype.

Tools: Sketch; Framer

Responsive SVG

Responsive SVG

Challenge: Create an icon that can scale and change his appearance according to the browser’s width.

For this experiment on Responsive SVG (Scalable Vector Graphic), I used CSS and inline media queries to reshape the vector according to the width of the browser.

Tools: Sketch; CSS

Header Animation

Hero Animation

Challenge: Build an interactive hero banner to increase user interactivity.

The Animation is trigged by the user on Mouse Move, creating a subtle parallax effect.

Tools: Photoshop; Edge Animate

SVG Drawing

SVG Drawing

Challenge: Display a physical product in a dynamic way.

This SVG animation was achived by using the CSS stroke-dasharray and stroke-dashoffset properties to display a MI headphones set.

Tools: Sketch; CSS

Proz website

Proz website    

Challenge: Create an energetic website that captures the values of the artist.

On this showcase I display the design process used on Proz website from sketching, to wireframe, to the finished product.

Tools: Photoshop; Illustrator; HTML; CSS

Egypt Infrastructure & Construction 2015 Summit website

Egypt Infrastructure & Construction 2015 Summit website

Challenge: Develop the Summit's website matching the agenda's brochure.

A clean and elegant approach was used to develop the website, following the high standards used on the brochure and other promotion material.

Tools: Photoshop; Illustrator; HTML; CSS

Egypt Infrastructure & Construction 2015 Summit brochure

Egypt Infrastructure & Construction 2015 Summit brochure

Challenge: Design a professional brochure to promote and comunicate the international Summit.

Using an InDesign grid base this brochure was designed to announce the Summit's agenda, high level speakers and to promote sponsors and partners.

Tools: InDesign; Photoshop

Circular Icons

Circular Icons

Challenge: Design a bundle of pixel perfect circular system icons.

90 icons designed with a 1px stoke on a 32x32 pixel grid.

Tools: Illustrator

Say Hello

Don't be shy, feel free to contact me for professional reasons or just to say hello.