Week 4: Visual Mockups

I’ve been working on my visual mockups for my folio website. I’ve had to refine a few things following beginning working on the site, so I’ve made some adjustments to these to reflect that.

The homepage:

mockup1

The folio page:

mockup2

The about page:

mockup3

The contact page:

mockup4

The contact page was initially supposed to include a contact form, but following some issues I’ve decided that for now I will leave it as a simple info page, and potentially down the track work on converting it into a form.

I’ve developed all of my pages now, including all of the individual portfolio pages. I also included the background as specified on the visual mock ups above. The code is linked below each page for reference:

mockup1

index_html

index_css

folio-page_wk4

folio_html

folio_css

about-page_wk4

about_html

about_css

contact-page_wk4

contact_html

contact_css

honestea_wk4

honestea_html

honestea_css

sunsilk_wk4

sunsilk_html

sunsilk_css

arthousepage_wk4

arthouse_html

arthouse_css

illustration_wk4

illustration_html

illustration_css

conceptsketches_wk4

concept_html

concept_css

hotel49_wk4

hotel_html

hotel_css

designfoundry_wk4

foundry_html

foundry_css

dancefest_wk4

dancefest_html

dancefest_css

I’ve also optimised all of my images to include on these pages, and I’ve just used the Export>Save for Web function in Photoshop:

image-optimisation

All of my images are now ready to include on the pages at the right size and quality, which will help loading speeds.

Let me know what you think, feedback is always welcome!

C2 By Design

Advertisements

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