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.