GS Web-design Blog

Webdesign Developement and Mantainance

Vector drawing


On this project I had to draw my face using a photo as my starting point. I had to draw it all the way from zero. So I used the Pen tool, shapes, colours and transparencies modes to create highlights, shadows and a mid-tone. Then I coloured different options using the swatches library and the recolour artwork tool.

At the class after this one, I learned that Illustrator can actually trace an image or photo for you. But using the Trace panel was not allowed for this homework, which was good because I developed my pen tool drawing skills a bit more (it’s still bad, I know… but its slowly getting better 😉 )

After drawing, we had to create some posters applying different colours to them.

And this is what I got after colouring:


Illustrator is a lot of fun. But needs loooooooooots of patience!


Creating ads. with Edge Animate!

I was very excited on using this program to create ads. And now I really find out why Flash is disappearing. With this program you can easily animate with JavaScript. The best part is that the Js is created automatically :p

Edge Animate reminds when I used to create cds with Director. Good times… but now Im glad I didn’t follow this path because cd-roms are disappearing :/
Animating things is something I really enjoy 🙂

For this homework I developed a 15 seconds banner ad for a Smartphone.

You can check it out here: My banner

A Typographic Web Assignment

On this assignment from my web-prototyping class I was asked to create a typography-based stylesheet for web and mobile content using one to two embedded typefaces for an article of my choice.

I styled the text using CSS properties such as


font-size (px, em)



font vs background color





word spacing



margin spacing


I had to take into consideration that the typefaces chosen would look good together. So I aimed for CONCORD – typefaces that have different but complementary characteristics – for my main content. I’m not sure yet if I was successful, because maybe I just got into a CONFLICT of typefaces between my paragraphs <p> and the subheadings<h2>, since they are a bit too similar.

I also use a CONTRAST with the typeface chosen for the quotes in the button of the article.

Let me know what you think 🙂

Check my assigment*

A Typographic Web Assignment
Legiao Urbana – Wiki
* Responsive still going through adjustments for mobile.

Protected: MOCKUP – Design to Code…

This content is password protected. To view it please enter your password below:

Sweet Suzie Website: concept and development

The first part of my course ended with the development of a 5 pages responsive website.

I decided to create a website for someone special to me: my mom! My client needs a website to show her products and for potential clients to contact her 😉

Here are the five (not so easy) steps I went through in 4 days (!!!) to get the web-site up and going.

Step 01: create a site map to  get an idea of the structure of the website.

website site map
Sweet Suzie Website Site-map

Step 2: Create a wireframe for the home page and sub-pages defining the grid system I was going to use.

Sweet Suzie Website Wireframe
Sweet Suzie Website Wireframe using a 12col. grid system

Step 3: I also sketch the website on paper to get an idea on how to position the content on desktop and mobile in order to make a responsive website 😉

Step 4:  Mockup of the pages defining the spaces, menu, colours, typography and using real content to design the webpages.

Sweet Suzie Mockup
Sweet Suzie Home page Mockup

Step 05:  Program the pages with HTML5 making sure it validates (get no errors when checked by the W3 Validator)  and style the pages using CSS3.

This step is the more time consuming for me. Specially when you are learning how to code properly and trying to put it into practice. But the final result got me very excited because I could see how much I can do already with what I learnt. 😀

You can check my website online: Sweet Suzie and give me some feedback on what you think.

Calendar Assignment 101

At the end of this class we had to create a Calendar using HTML5 and CSS3.

The entire layout of the calendar should be created using a valid HTML table, as it is one of the few legitimate uses for that markup.

Before jumping into building my web page, I decided to answer a few questions and to draw a wireframe so I don’t start from zero and ended up changing  on the way.


  • Which month of which year will you choose?
    September 2015
  • What is notable about that particular month?
    My birthday is on September and it is also the beginning of my favorite season: Fall!
  • What holidays are present in that month?
    Labour day
  • What will be the overall theme of the calendar?
  • What colour scheme would be most appropriate for that month?
    Colours on beginning of fall: red, brown, green
  • What kinds of typefaces will help set the tone for your calendar?
    Kaushan Script for the Month and Year
    PT Serif Caption for the rest
  • Are there images that can be used to help establish the theme?
    My Fall photos

This is my wireframe:


And this is the end result:

Screen Shot 2015-10-08 at 7.48.20 PM

Gisele’s September Calendar

To  program my Calendar I used HTML5 to create a table: <tr> <td>number goes here…</td></tr>. And the Month and year where put inside paragraph tags <p> Text goes here</p> giving a different class name to them so I could style them up  differently on my CSS3 file

Screen Shot 2015-10-08 at 8.05.16 PM

To add colours, fonts, images, background and also the positioning of everything I used CSS3. The mouse effects were also added on the CSS3 file.

This is the CSS of my Month and Year texts. Note that I was able to rotate the Year 90 degrees using the transformation effect rotate. I also used this effect on photos to make the ’tilt effect’ when the mouse goes over them.

css tranformation effect

Hope you found this interesting!
More explanations… ask me 😉

Being Smart at Photoshop

Hello Humber bloggers and other followers!

It took me some time deciding what to write about this week.

But then I decided to write about what surprised me the most which is…

Smart objects on Photoshop!

They are saved inside your PSD Photoshop file as a separated file (.PSB).

Why to use smart objects?

Smart object is great because you can resize it without getting it pixelated.

You can make changes on a smart object and automatically update all its linked instances.
This is great when you are designing a website. Or even when you have different projects involving the same image. Per example, you change the .PSB logo image and get the logo changed simultaneously on your flyer, website and newsletter. Awesome!!!

A great idea is to try various designs on your project with placeholder images and later replace with final versions.

Embedded Smart Objects

You can place an external file as embedded s Smart Objects.
It’s better to use PSD, TIFF, or PSB files because you can add layers and modify pixels without loss. That doesn’t happen with JPEGs…

Per Example…

Screen Shot 2015-09-24 at 4.01.05 PM

This is a cool example we got in class that shows how to change logos on different images. Let’s say you need to use a different company logo.

So, if you have the logo as a Smart Object with different layers on it. Each layer with a different logo. Open that smart object (double-click that layer), hide that logo, and makes the other logo layer visible.

Screen Shot 2015-09-24 at 4.12.34 PM Screen Shot 2015-09-24 at 4.14.03 PM

Save that PSB and take a look at  the PSD file again:

Screen Shot 2015-09-24 at 4.14.40 PM

As you can see, just like that you got all the logos changed at once!


CSS3: rule over rule

This week I learned something very important about CSS3.

When you write a CSS code, a rule can ‘rule over another rule’. So the style you give to an attribute (id or  or class) of a tag  will be prioritized over the way you style a tag itself.

What? Yeah… I will explain with an example!

Let’s say you have styled the color of the links on your page using this rule:

a {color: blue};

And you have a navigation bar with links on it (obviously…) And your navigation id is “site-nav“.

Then you decided that the links on the navigation bar should be a different color from the other links on the website.

So you write this CSS rule:

#site-nav a {color: white};

This rule makes the elements with the id “site-nav” WHITE.

And just like that the links on the menu will now will be white instead of blue! Wow!

See… That’s what I meant when I said that “a more detailed tag (#site-nav a) will be prioritized over the way you style a single tag (a)

Now you can style miracles on your page!

First week back to school…

After years being away from the Design industry,  here I am.

Getting back has being a surprise each day. So many things changed in 10 years! Yes… ten years that, for personal reasons, I had to stand back for a while. But it passed fast… and thankfully I am getting back on track.

I am old school on Web. And back then I used to focus mostly on the front-end of my websites. How I loved to design the pages on Photoshop, slice them up and just add some content and links on my HTML.

But things changed and beyond other things websites had to be less heavy to load, semantically correct and easier to change things up.

So here I am learning the new ways to design a website… using HTML5, CSS3 and JavaScript.

My first week was very exciting.  I chose the Web design, Development and Maintenance program at Humber College to help me upgrade my skills so I can build up a nice Portfolio and get back to work as a Web-designer.

We already learned some HTML5 and CSS3 basics. I also had a quick tutorial on how to use Adobe Bridge CC and started a blog using WordPress (yes, this blog).

I hope to make this blog interesting and useful for new web-designers, specially my Humber classmates.

Feel free to comment with your insights and feedback 🙂

Blog at

Up ↑