Web page progress 3

Here are a few progress screenshots of my web page. The 1st image is my page from class on Tuesday; the second screenshot is how my page looked after working on it after class on Tuesday. In the 2nd version, I added more line height in the head div. I also had permission from Professor Pannafino to increase my pixel width from 800px to 1000px, which really helps. I also added some of Ellen Lupton's book cover images to my left & right sidebar divs, decreased the font size, and increased their widths, per Mr. Pannafino's suggestions.

He also suggested adding a larger image to the middle div, which I did. Instead of one image, I added a FlexSlider slideshow of a few of Ellen's paintings, courtesy of Woo Themes. I also changed the background from white to an image from Subtle Patterns called "padded" and added the yellow-orange color from the cover of "Thinking with Type" to the header & footer. To add some emphasis on the typographical elements, I added some accent classes. I need to adjust the size of the FlexSlider next, and possibly change the background.

Below is my final version of my web page. I tried for hours to get the FlexSlider to a more suitable size, but could not fix it after trying a few remedies posted by others on the Web. I also tried resizing the larger images, but it didn't help at all. I did end up changing the background image to "Type" from Subtle Patterns. I thought this was appropriate since Ellen Lupton's design focus is typography.

Web page progress 2

I decided to remove the orange background on my wrapper div and the type background I made in Illustrator because it was too much distraction. Instead, I used white for the background color, added a slight drop shadow property (with CSS3) to the wrapper div, and used typography, font color and line to create less distracting visual elements. In the header, I adjusted the line height; and for the heading under Ellen Lupton, I adjusted the letter spacing property. I also found a way to add a drop cap with CSS, which is something new I learned.

Getting the layout right was a lengthy process of trial and error. I think there should be a little more padding, but the text in the sidebar divs is too choppy so maybe I need to remove one of the sidebar divs or find another way to fix it. I wanted to have my layout be fluid - where all my divs retain their positions when the browser window is resized or when the page is viewed on a mobile device. I'll ask Professor Pannafino if he would accept %'s as width measurements instead of pixels.

I also validated my HTML and CSS with W3C and both documents were valid! :)

This is a background I made with Photoshop and was thinking of experimenting with but I think I'll have the same issue with it. I'll try it tomorrow during in-class work time. Maybe I'll try using Ellen Lupton's Punctuation illustration as an inspiration to create something.

Webpage progress

This is a screen capture of my webpage so far. I based it on the cover of one of Ellen Lupton's books, Thinking with Type. The image appears on the cover of another of Ellen's books, Design Your Life. I found the image on the Walker Art Center's website. I sampled the color directly from the image of the book cover on Ellen's website.

The background was done in Illustrator and is similar to (but not exactly ) the font background on the cover of the aforementioned book. I may change it to something else.

A few layouts for my webpage

Here are some sketches for my webpage layout:

CSS exercises

These are screenshots of the exercises that were assigned last Thursday. (I wasn't sure if Professor Pannafino wanted them posted or not so I'm posting mine just to be safe.)

Ellen Lupton

Besides being an accomplished graphic designer, Ellen Lupton is the MFA program director at Maryland Institute College of Art (or MICA); the director of the Center for Design Thinking at MICA; and is a contemporary design curator at the Cooper-Hewitt National Design Museum in New York City. She has also had the high honor of being awarded a Gold Medal by the American Institute of Graphic Arts. Ellen has written articles for the New York Times and several books, including quite a few with her identical twin sister, Julia, who has a PhD in Renaissance Studies.
Ellen Lupton’s primary design focus is typography, underscoring “design as living practice—not theoretical debates, but doing work in the studio”. She was influenced by Bauhaus, which was a German school of design that analyzed the basic geometric elements of form.
I was struck by Ellen's response to an interview question on Planet Typography's website where she was asked to comment on her comment, "think more, design less". Her response stated that design students sometimes overuse drop shadows, gradients, transparent boxes, etc. to compensate for lack of a strong concept. Her response to this problem was, "I argue that it is their job to make the message interesting and compelling, not to bury it with empty visual gestures." This really spoke to me because I've been guilty of doing this exact thing... but I'm aware of it and am attempting to do something about it.

Chosen designer: Ellen Lupton

Ellen Lupton is my chosen designer for our third and final project, an HTML webpage styled with CSS. This is a project I've been looking forward to because I have experience with HTML, CSS, Dreamweaver, and HTML editors (plus a little C#, Visual Basic, JavaScript, and XML). I'm actually one credit shy (just a silly little phys ed course) of obtaining my Associate's Degree in Web Design and Development through Harrisburg Area Community College, but I know there's always room for improvement. While I learned the technical skills for creating a website (and have built quite a few already), I don't recall critical thinking being quite as emphasized at HACC like it is here at Millersville. So, I'm excited to build on my existing skills with this project... which is exactly why I decided to pursue a Bachelor's Degree in Graphic and Interactive Design (and I've already learned so much!).

My first designer choice was John Lasseter, whom I highly admire for his Pixar movies. There isn't a Pixar movie that I don't like. But I decided to go in the opposite direction as an attempt to challenge myself with type design, line and simple color accents, not full-out color and heavy graphics. I love color, so my designs tend to reflect that by having lots of color but little to no white. I chose Ellen Lupton because her design emphasis is typography, which is an area of interest for me, but haven't had a full class in typography yet. The first element I noticed on her website was her book, Thinking with Type. I've attempted to use type as a visual element on my own but haven't been impressed with my results yet so I'm giving it another try. (When it comes to designing, I don't give up easily!) Professor Pannafino told us ahead of time to be open to a challenge, so I think I am open to a challenge by choosing this designer. My research on Ellen Lupton will be my next post.