Ravenna Gardens: Phase 3

Ravenna Gardens responsive website desktop and mobileKatsite Project 1 Today, after 4 hours at the computer, I finished the second iteration of this website and styled it for mobile. I once again, made a few deviations from my wire frame. As a response to last week’s critique, I’ve created a lot of white space. That includes putting boxes around the text in the footer (for mobile) instead of embedding white text in a dark background. Dark text on light background increases legibility. I rethought the slideshow. I didn’t want all of that blue sky color. With some reworking and copy-pasting of code, I now have two slide shows. Can’t see two? That’s because I created a slideshow with just color and sync’d it up with the other one (and created new images to give an interesting decoration to the top of the color blocks).

To put the text over the slide show, I learned a little bit about positioning from this article. Just toggling back and forth between the tabs on the article’s interface (you’ll understand after you click) I was able to understand which of the types of positioning I wanted, which was a combination.

I used Adobe Edge Fonts for the headlines on the little posts excerpts. Amaranth. Very lovely. Everywhere else, I used more standard fonts, Verdana and Arial to increase readability. I imagined some over-40-eyes looking at this for information and I wanted to keep it very accessible. I also added a bit more content (an upcoming event) to utilize the space in the slideshow area (as Fadiman suggested).

At this point, I am considering polishing the CSS sprites and adding more decoration in the header, perhaps. Let’s see what my client has to say about the translation from desktop to mobile before adding more.

(Earlier Post Relating to This Project)

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in Web Design. Bookmark the permalink.

2 Responses to Ravenna Gardens: Phase 3

  1. Pingback: Ravenna Gardens Logo Design | Katablog

  2. Pingback: Ravenna Gardens: Website Design Polishing | Katablog

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s