Diamond Florist Coding

coding screenshot

1. Description: Practice HTML and CSS coding to design a page describing the logo project.

2. Process (Programs, Tools, Skills, FOCUS principles):  I used colors from my logo as the inspiration for the web page design. I used Illustrator to create a watermark type image of the diamond shape to use as my background image. The border is the same as the green in the logo. I worked with hierarchy in mind when I design the intro paragraph. I put it in a gray box, made it white and bold so that it would stand out and clearly be read first. Next I used a bulleted list with bold first words to draw the readers’ eyes to my next important points. I used alignment when I chose the positioning of blocks of text and made sure there was comfortable padding space between words and the border.

3. Critique Report: My instructor first suggested that I give a much more substantial border to my logo. It originally had only a thin gray line. When I made it bigger, I was able to create a large solid bar for both the intro and the logo. She liked the spacing I had everywhere, and said I should try to add the script typeface in one more location. I changed the words “Learn more here” to that font.

Natalie helped me work out the bottom alignment issue between the text box and logo border. I had to use a different browser and different screen capture tool to get it just right.

My husband and Erika both liked my watermark diamond in the background and Erika reminded me to check that my green really matched the logo green.

3. Message: Learn about the logo, audience and design skills that influenced my final logo design.

4. Audience: Instructor, anyone interested in learning more about my Diamond Florist logo.

5. Top Thing Learned: Coding basics and how to zip files.

6. Color scheme and color names: Complementary: Purple and green

7. Title Font Name & Category: Satisfy / Cursive

8. Copy Font Name & Category: Gentium Basic / Serif

9. Thumbnails of any original, unedited image used in the project:

Illustrations are original

10. Draft

coding draft 1



One thought on “Diamond Florist Coding

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s