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.

Some wishes do come true!

On my way to class last Thursday, I wished I had a little more time to work on my magazine cover because I knew I could do better than what I submitted on Thursday. Fortunately for me, a classmate asked Professor Pannafino for the chance to make some changes and resubmit. I've used that time to make some nice improvements. Now it looks more like a magazine cover and I'm much happier with the results. (The blue border will be trimmed off before I mat it on blackboard.) Thank you for the additional time, Professor Pannafino!
I changed the font of the sell lines from Bubbleboddy to Cooper Black and tried to incorporate the colors from the logo and the background (my two vector images, all handmade & inspired from two different images).
Once again, during the critique, I am so impressed with the talent in our class. I really enjoy hearing from others about their projects, as well as what others see that I may have missed. And of course, instructor feedback is always something I value highly. I am always so terribly nervous during critique days, but they are always so incredibly helpful.

Finished Magazine Cover

This is my finished magazine cover. After much rearranging, this is the final layout I decided to use. I added a slightly opaque rectangle at the bottom for the featured articles to help make them appear as a group. Originally, I had the featured article graphics on the left and bottom of the main image but wasn't happy with the way it looked.

Magazine cover progress

Here's my magazine cover so far. I've been going back and forth on where to place my images & I'm still not   happy with it yet... I know I can do better but this has been challenging with the images I chose to work with.   To help my captured image fit into the circus theme, I tried painting the faces to make them look like clowns but I'm still working at it because I'm not happy with the results yet.

For my logo, I changed the word "the" and made it vertical rather than arched like in the previous version. I also removed the blue background and made it a separate image for the magazine cover background.