Visual Media

Elemental Fury Webpage

P7NaomiBastianScreenshot.jpgDescription:
A web page designed to showcase a personally created logo.

Process (Programs, Tools, Skills):
I created this web page using Brackets and my personal web site. This is the first semester I have ever used HTML or CSS, so I do have some practice with it. I used a Web Developer tool to validate my HTML5 and CSS3.

After I marked up all my content and inserted my image, I attached a pre-made CSS document to my HTML. I then used the colors from my logo and my letterhead as the colors for my web page. I found these colors by opening Photoshop and my InDesign documents and using the eyedropper tool. I also changed my fonts to the Nova Slim font I used in my logo, and Roboto Slab to provide contrast. I declared some backup fonts just in case the viewer’s browser didn’t have these fonts, but since I used Google Fonts, it wasn’t particularly necessary. I included the code provided by Google in the head of my page so it will work in every browser and device. I also used padding around the logo and text so that they would not take up excess space, but would still be spaced evenly.

Programs/Tools Used: Brackets, FileZilla & Photoshop

Message: My image is a vibrant and modern logo for a webcomic about superheroes conquering in the modern world.

Audience: This will be directed towards those that will want to hire me for my graphic design skills, so they can see the process in design work and also how I can create a website to display that process.

Top Thing Learned: How to create an attractive website that communicates the message effectively.

Color Scheme: Split Complementary

Hex Codes: Red #ed2124, Orange #f58021, Turquoise #aceded, Teal #249f9f, Dark Teal #0b3d3c, White #ffffff, Black #000000

Title Font Families & Category: (all names):  Nova Slim, Times New Roman, Times, cursive

Copy Font Families & Category: (all names): Roboto Slab, Book Antiqua, Palatino, serif

Changes made to the CSS: I changed the width of the body, the font-families with Google Fonts, the colors of the fonts, headings, backgrounds, and links, and also changed the font sizes. I also center-aligned the image of my logo.

Website Link

Advertisements

1 thought on “Elemental Fury Webpage”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s