Muse: Designing Layout

Screen Shot 2017-03-13 at 15.53.12

After doing a few sketches of different websites I have decided to design a parallax website to show my portfolio as a designer. Using the same method as learnt in class, I created a document 960 x 4000 to give me my long rectangular page. Then adding a full page slideshow and placing my images in uses cmd + d. Then I had to change a few options in the slideshow properties to get the transitions correct and remove all of the onscreen buttons. Next was to add white boxes on top of the slideshow which act as the website pages. I created these boxes the same size as my laptop screen, so when the parallax moves the page fills the screen.

Screen Shot 2017-03-18 at 21.24.59.pngFrom looking at my plan I know I wanted 4 pages, so I created 4 equally spaced white boxes on my site. Having a plan beside me whilst designing really helped me with this process as I knew what I wanted to achieve rather than going straight in without any ideas. With the slideshow selected I then went onto scroll effects, which is what makes the slideshow transition when the user scrolls or clicks a tab.

This part used a lot of trial and error to make sure the transitions changed behind the white box, so when the viewer moved down past the page they were on the image would of changed. Eventually I got it how I wanted it and I am really happy with how it works. Using this parallax layout adds another engagement to the site as the viewer gets a chance to see more of your work whilst scrolling through, it also looks like the website has been developed more than a standard flat layout.

Once I was happy with how the scroll effects worked I then moved onto my designing. With my sketches next to me again, I wanted the first opening page to feature a slideshow of all my design work, with each piece linking out to another page with a brief descriptions and more imagery. I didn’t want to include a great deal of text in my site as some of the better websites I looked at in my research didn’t and let their work speak for themselves.

 

 

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

%d bloggers like this: