WEB AUTHORING / Assignment Progress / Term 4, Week 9

Inspirations:

https://www.behance.net/gallery/41508597/WRSDESIGN-UI-UX-webdesign-(LIVE)

Progress so far with website prototype:

screen-shot-2016-12-11-at-12-32-58-pm

screen-shot-2016-12-11-at-12-34-15-pm
Making the header (using code guideline from codecademy)

screen-shot-2016-12-11-at-3-11-25-pmscreen-shot-2016-12-11-at-3-13-41-pmscreen-shot-2016-12-11-at-3-13-48-pmscreen-shot-2016-12-11-at-3-13-51-pmscreen-shot-2016-12-11-at-3-43-06-pm

screen-shot-2016-12-11-at-3-43-10-pm
Text currently still come from the image itself. Will change this up soon.
screen-shot-2016-12-11-at-3-44-19-pm
Smaller view poses a problem.
screen-shot-2016-12-11-at-3-44-28-pm
Nav bar / header not properly coded yet

screen-shot-2016-12-11-at-9-33-23-pmscreen-shot-2016-12-11-at-10-02-15-pmscreen-shot-2016-12-11-at-10-02-36-pmscreen-shot-2016-12-11-at-10-02-54-pmscreen-shot-2016-12-11-at-10-03-36-pmscreen-shot-2016-12-11-at-10-03-47-pmscreen-shot-2016-12-11-at-10-04-00-pmscreen-shot-2016-12-11-at-10-04-10-pm

screen-shot-2016-12-12-at-1-14-12-pm
Found this nice color “rosybrown” that suits the feel.

screen-shot-2016-12-12-at-1-25-35-pm

screen-shot-2016-12-12-at-1-30-39-pm
Stylising the font

screen-shot-2016-12-12-at-1-30-49-pmscreen-shot-2016-12-12-at-1-30-58-pmscreen-shot-2016-12-12-at-1-42-39-pm

screen-shot-2016-12-12-at-1-42-49-pm
Caption still a bit too small
screen-shot-2016-12-12-at-1-43-25-pm
Nested a button onto the carousel

screen-shot-2016-12-12-at-1-43-51-pm

screen-shot-2016-12-12-at-2-08-18-pm
Making the tour page with jumbotron
screen-shot-2016-12-12-at-2-09-46-pm
Ditched the jumbotron idea.

screen-shot-2016-12-12-at-2-11-48-pmscreen-shot-2016-12-12-at-2-14-00-pmscreen-shot-2016-12-12-at-2-14-32-pmscreen-shot-2016-12-12-at-2-14-42-pm

screen-shot-2016-12-12-at-2-16-13-pm
Justified buttons

screen-shot-2016-12-12-at-2-16-43-pm

screen-shot-2016-12-12-at-2-17-24-pm
(So happy I came up with this by accident ahahahhaha)

screen-shot-2016-12-12-at-2-20-43-pm

screen-shot-2016-12-12-at-2-26-24-pm
Gif quality not the best though. Not too sure on how to compensate with this 😦

screen-shot-2016-12-12-at-2-26-36-pm

screen-shot-2016-12-12-at-2-55-05-pm
Fixed the navbar – it’s now fixed onto the top

screen-shot-2016-12-12-at-2-55-14-pmscreen-shot-2016-12-12-at-2-55-38-pmscreen-shot-2016-12-12-at-2-56-27-pmscreen-shot-2016-12-12-at-2-56-43-pm

screen-shot-2016-12-12-at-3-13-45-pm
Decided to place the album caption below the image for better readability. Might change the entire layout & image for this section though.
screen-shot-2016-12-13-at-9-29-50-am
added animate css

This slideshow requires JavaScript.

 

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