Wireframe 101 | Behance

I’m a little late but here it is. For this assignment we had to create a wireframe version of a website of our choice and since I’m a design freak I chose to do Behance, if you don’t know what that is, Behance is a website that let’s you create an online portfolio to showcase your work. When you sign up you can see the home page is composed out of a main nav with their menu, logo and social media links, then in their container they have sections divided into columns which represent every users content (basically a piece of their portfolio) these sections are composed with and image, buttons and text. And at the bottom they have their main footer composed with buttons, social media links and their logo again. This particular assignment was very helpful for me since mocking up and wire-framing websites is something that really interest me and something I find myself thinking about and sketching out often when browsing different websites. I didn’t know you could built a website like this at first, it really speeds up the design process since you already know how many columns you’re going to do, the size and weight of your fonts, size of you images, etc, is a time saver for sure.

This slideshow requires JavaScript.

Advertisements

Typographic Web Assignment

For this assignment we had to create a typography style sheet for an online article of our choice using at least one embedded typeface. I decided to use Google ‘Open Sans’ sans-serif font for my body text and ‘Merriweather’ serif font for my headings and subheadings. I wanted my article to look quite serious even thought the topic itself was not serious at all, I made sure to give my headings and subheadings a bold weight to make them stand out and mark every section of the article, that helped my text composition look more balanced. I made my subheadings a dark red colour so they would mark the beginning of each section while at the same time sticking with the theme of the article. I choose a sans serif font for my body text since I wanted the legibility to be easy and clean. And finally, I created a table in the last section of the article to give some specific and detailed information the reader could find interesting using the same serif font for the headers and the sans serif font for the body text. I made the columns out of a grey and red pastels colour to make the table stick out but not as much as to steal all the attention from the main content.

This slideshow requires JavaScript.

Ad Campaign | Composite week 1

 

For composite week 1 we had to create an Ad campaign, and I’m not going to lie at first it was really difficult for me to come up with a concept, I knew I wanted to do something that included music but I wasn’t sure if that’d be enough. After a lot of thinking a came up with an idea which would link music and mental health. For my campaign I wanted to raise awareness about mental illness while at the same time providing coping mechanism to help reduce symptoms like stress, anxiety and depression through music streaming services like Spotify.

Client

The client I chose for my campaign is Spotify. Spotify is an online music, podcast and video streaming service which provides DRM protected content from record labels and media companies with more than 140 million active users and more than 70 million paying subscribers.

Target

My target audience for this ad campaign are college students between the ages of 18 and 25 years old. Recent studies have shown that 1 in every 5 students will suffer from anxiety or depression while being enrolled in college.

Concept

The aim of this campaign is to raise awareness about mental illness around college students. Mental health problems have been rising for the past 2 years among students, varying from depression to anxiety. My main focus is to create more conversation around the topic of mental health problems that surges during college life and also to create coping mechanism for students.

Magazine and Social Media

My ad campaign will be advertised in Billboard magazine. Billboard is one of the most influential music media brands in the world. With an audience made of 68% college graduates and 30% post graduate students. The social media platform I’m using to advertise the ads is Facebook. College students are one of the heaviest users of social media, a total of 88% of student’s report Facebook as their preferred social media site.

The Ads

This is a “repeat” ad campaign, it has a modern and youthful kind of style since its aimed to young adults but with a slight sober tone to it considering the main concept of the ads is to raise awareness about mental illness. Each ad has different tag lines and imagery but has the same layout, colours and use of font. I wanted my Ad Campaign to be really impactful so I spend a lot of time creating the concept of every ad and how the images I would use could translate the impact mental illness has in people, especially young adults.

  • Sketches

Mockups

This is how the ads would look in a magazine and Facebook.

This slideshow requires JavaScript.

 

Vector Portrait | Ai

 

I found this project particularly challenging not only because we had to draw ourselves, but also because we had to try and recreate our portrait using only shadows and highlights. It was hard for me to define the correct shapes of my highlights and shadows even though we had a posterize image of ourselves to help us out. I tried to make the shapes of my highlights and shadows very smooth and rounded so they would define well the shape of my face. The pen tool was very helpful when creating this portrait, it allowed me to easily give better shape to some parts of my face like the eyes, glasses and mouth and made them look more realistic. Also the smooth pencil tool was a lot of help when trying to clean the shape of some of my vectors, it let me smooth them out without deforming them. Another thing I found a little challenging was picking the right colours to use for my portrait, even thought we used tones of greys to define our shadows and highlights, it was hard for me to pick and apply colours for those areas without making them look like they were some patches of paint on my face, that’s when I started applying opacity, which helped a lot, I toned them down and that gave my skin tone colours a more realistic look. Even though this project was not the easiest for me to do, I enjoyed the process of doing it because it allowed me to discover new tools in Illustrator while practicing with other tools I was already familiar with.

 

Fluidity by DesignLibero | InDesign TriFold

For this project I wanted to do something out of the ordinary, and what more out of the ordinary than a Dish Drying Rack that grows plants, right? I found this product while browsing through Instagram and immediately drew my attention, its made by an Italian Design studio called DesignLibero. What drew them to create something so unique was the monotony and lack of variations that this type of product has. I always been a fan of plants, and for me to see this kind of product it was revolutionary, I’ve never seen something like it, so that’s why I decide to make my brochure about it and what better way to promote it than this. Since the product itself is focused on growing herbs I knew I wanted my tri fold to feel very fresh, I began by choosing a color palette that would give out that look so I made it mostly out of different tones of green. I knew a sans serif font would give my brochure that clean look I was looking for, so I picked Helvetica Neue as my main font, I played with its different weights to give some variations to my Headers, subheads, and body. I made use of a 9×6 grid to help me position my text and give structure to my content. I also made use of a table which I created for specific information about the product like materials, designers and year of production. And finally for my die cut I knew I wanted something that could stand out but be simple at the same time, so I made a diagonal cut in the top and bottom part of my front page, letting the image of the product behind peek through.

This slideshow requires JavaScript.