GS Web-design Blog

Webdesign Developement and Mantainance


Web design

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.

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.

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!


Blog at

Up ↑