Olivia Konert

Today we started learning about or next project, which was site design. I’m a little nervous just because I know it needs to be coded in the end and to me that makes me hesitant on creating this successful complex design. But I know that I shouldn’t let that stop me.

I’ve decided to do my site on photography. It’s something that is going to teach the viewer about photography and all the information that is needed to know to be a photographer. I really liked the Art of Making Beer website and how it was layed out. I want to sort of go with that flow of design in a way.

Here are my wireframes.

We had a three hour critique on our navigation systems. Tedious and long – but good. It was helpful to get feed back on my design. After the critique I definitely changed a few things here and there and also put it into more of a mockup allowing the audience to see more of my design and how it would work.

I wanted my navigation system to be more of a fun and quirky appeal to it which I think I succeeded at. The flow of it I believe worked well.

Since we discussed our rough drafts of our navigation systems, I have completely went a different route from my original idea.

Here are a few of my prototypes for my navigation system.

In class, we looked over some of our sketches that we had to complete for our navigation systems. I had a hard time choosing on which path I wanted to take. After seeing everyone else’s ideas, I knew that I maybe wanted to go a different route.

I have decided I want my navigation system to be more quirky especially after seeing flywheel’s website. I want it to be colorful and fun while being illustrated. It’s tough because I know that my design has to be practical in a way that doesn’t just look pretty but actually has to be workable and effective to my audience.

Here is my first wireframe I did without the revisions.

NAVIGATION WIREFRAME

What makes a good font?

Legibility, Kearning, Classiness, and Showmanship are the four terms that really caught my attention.

I choose to do my fonts in Helvetica, Helvetica Italic & Bebas Neue, they’re all very clean, simple, and modern looking which I love. I’m so thankful that Font Squirrel allows us to upload fonts and generate the CSS format. It’s a huge time-saver. I am glad we are being taught on focusing on how fonts are used with the web and technology, because it is a huge deal while designing for the web and your audience.

We were also introduced to colorzilla. HELPFUL. I’m not a huge fan of backgrounds in gradient, but this site makes me want to do it because It’s so easy and efficient.

I think I finally nailed down my design. It’s been hard to finally decide what I want it to look like and how I want to go about it – simply because I know the scary word of coding is involved. But I think I choose a design that is going to be a challenge for me to code, but not so overwhelming that I couldn’t handle it. If I get done a little early, than I think I will rework the design a little. I choose Helvetica, Helvetica Italic, and Bebas Neue. I wanted a very modern, simplistic, and clean look.

Terms

Organization in coding is so key. I’m already getting confused as to what I named things and where they are. I didn’t realize how important names to files really were until now.

ROOT FOLDER

• CSS (Style sheets)

• JS FOLDER

• Fonts

• Images

It’s so important to be organized. It was nice to take a step back, get into groups, and really sort out how the html would be organized and how it would look. It was the first time we were left to solely figure out how to really do it, without a tutorial or being told. It was a big learning experience and I would say it was beneficial. I would love to do it again with CSS too.

Today was a day that really helped me. I learned that CSS is a very complex thing but having Illustrator basically do the dirty work for me, really gave me hope on a lot of things. It was a little time consuming naming each character/object in Illustrator but I know it’s more helpful than trying to do it all in CSS by myself.

I also learned how to get all my fonts incorporated into my CSS, which is helpful. My site is starting to actually look a little similar to my design, which is very hopeful. There’s always those few spots I get stuck on but once I get though them I’ll be on my way to doing a great job an making more complex designs.

It was nice just diving in and really starting to figure out for myself how to code. It’s helpful when I actually have to refer back to exercises and get really hands on rather than just listening sometimes.

Chapter 7.

Chapter 7 is deep. It takes time to go through the Box Model and explain further in depth the different properties that make the box. The four properties include the padding, border, background color, and margin.

Padding: space between content/content’s border

Border: line that draws around each edge of the box

Background color : fills space inside border

Margin: separates one tag from another.

What does it look like in CSS? 

margin – right: 20px;

padding – top: 3 em

margin – left: 10%

The short cut to remember is TROUBLE (TOP RIGHT BOTTOM LEFT)

I think for my project I would want a 35 pixel Margin.

In the chapter, it also covered Block Boxes & Inline Boxes

Block Box is going to have a block level which has a tag that creates a break before/after

Inline Box is going to have in line tags. For example: <strong>

What I thought was neat that was covered was how you can format each individual border by following the TROUBLE format.