Unit 44 Website Design

Workshop 1

Screen Shot 2016-04-27 at 15.41.36

Screen Shot 2016-04-27 at 15.41.49

Screen Shot 2016-04-27 at 15.42.01

Screen Shot 2016-04-27 at 15.42.13

Screen Shot 2016-04-27 at 15.42.23

Screen Shot 2016-05-04 at 15.54.03

Screen Shot 2016-05-04 at 16.27.20

Screen Shot 2016-05-04 at 16.29.00

Screen Shot 2016-05-04 at 16.30.36

Research

Examples of Responsive Websites

Screen Shot 2016-05-17 at 13.10.02

Source Date: 17/05/16

This website is a collection of music a record label. Each selected song has an interactive element tied to it for example on one of the pages you have to make a tree grow to add different layers to the music. To launch the interactive experience the user has to hold down the space bar which makes music start to play in snippets, whilst showing various clips from music videos.

I can imagine this website is very resource intensive so it may not be very usable for those with slow internet speeds. Also the experience requires sound as a major part of the experience which excludes those without desktop speakers or headphones from partaking in the interaction.

Screen Shot 2016-05-17 at 13.24.26

Screen Shot 2016-05-17 at 13.24.41

Screen Shot 2016-05-17 at 13.24.54

Source Date: 17/05/16

In this website it has be split into three clear sections: mountain, road and triathlon. This makes the website extremely easy to navigate and makes it very user friendly. I like that the website is very visual seeing as the website has a high resolution background for each section of the website. There are also ways to find out more information for each section which are within buttons so they are hidden, this makes the home page of the website look very clean.

Screen Shot 2016-05-17 at 13.36.47

Screen Shot 2016-05-17 at 13.37.51

Screen Shot 2016-05-17 at 13.38.03

Source Date: 17/05/16

When you open this website the image at the beginning comes together from either side of the screen until they line up to make the full image. This makes the website catch your attention whilst looking slick and professional. Also as you scroll down the webpage images begin to appear.

However, I did have some problems when reducing the size of the webpage window, I noticed that some of the text moved to weird places and some of the images started overlapping.

Screen Shot 2016-05-17 at 14.15.01

Screen Shot 2016-05-17 at 14.15.29

Screen Shot 2016-05-17 at 14.15.51

Source Date: 17/05/16

This website is of someone’s blog/portfolio. It is very responsive (as shown in the pictures above) since the text resizes and rearranges when the browser size is changed. I also like the dark theme of this website since it won’t strain the users’ eyes. I like the simplicity of the website and that when the browser is set to the smallest size it brings up a navigation bar at the bottom of the page.

Screen Shot 2016-05-17 at 14.29.10

I decided to inspect the HTML of this website to see what was used to create this website. The website has made user of various divs to layout the page.

Proposal

 

Project Proposal

 

BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design (Interactive Media)

BTEC Level 3 BTEC Extended Diploma in Art and Design (Interactive Media)

 

Learner Name: Owen

 

 

 

 

Specialist Area: Interactive Design

 

 

Date:     24/05/16

 

Section 1

 

Working title: HTML5 Responsive Portfolio

 

 

Target Market

Employers and professionals looking to hire someone.

 

 

What you will work towards producing: (Detailed description of your proposal)

I will be working towards creating a responsive web portfolio using HTML5 and CSS.

 

 

 

 

 

Section 2

Influences, starting points and contextual references:

Other online portfolios by other artists in a similar field.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I have been looking at other professional portfolios for inspiration.

Section 3

Intended techniques, non digital and digital processes:

I will be using Brackets as my code editor and will probably be using Photoshop or Illustrator to create visuals for the website.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Research

Week 2: Ideas Generation and Ideas Development

Week 3: Ideas Generation and Ideas Development

Week 4: Produce Outcome

Week 5: Produce Outcome and Evaluate

 

Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will be evaluating my own work and will be asking for others opinions as part of my evaluation.

Ideas Generation

Screen Shot 2016-05-17 at 16.10.07

Screen Shot 2016-05-17 at 16.12.03

 

 

Here’s a basic example of a responsive website I made. The red square is 50 percent of the size of the browser so when the browser is changed the square changes size.

IMG_20160518_134517

IMG_20160518_134533

IMG_20160518_134559

Here are some ideas I have come up with for possible website designs. I like the idea of including some sort of parallax in my website because I feel that it makes the website stand out from other portfolios.

Here is the paper prototype for the web portfolio. After this test I feel I need to incorporate an about section in my portfolio to give some information about myself.

Ideas Development

Here is an example of a website with parallax I created by following a YouTube tutorial.

I added media query to the css so that when the browser has a width less than 500px it would turn light blue and a navigation bar would appear.

Screen Shot 2016-05-24 at 14.31.55

Here is the code used to make this happen.

Screen Shot 2016-05-24 at 14.38.37

I added in this piece of code which allows the navigation bar to be fixed to the top of the page whilst scrolling down the page.

Here is a rough draft of a website I will be creating.

1

2

4

3

I added a contact box at the bottom of the website. Here is the website at two different sizes. The three images represent three different section of the website, these will be able to be clicked on which will be linked to separate pages that go into more detail on the certain subject.

Screen Shot 2016-06-08 at 13.19.49

Screen Shot 2016-06-08 at 13.20.02

Screen Shot 2016-06-08 at 13.20.24

Screen Shot 2016-06-08 at 13.20.36

Here is the html/css code used to make the changes to the website.

Screen Shot 2016-06-08 at 13.28.46

Screen Shot 2016-06-08 at 13.29.03

Here is a demo of the draft website. I added hyperlinks to the images and made the images change when they have been hovered over.

Screen Shot 2016-06-13 at 16.09.07

Screen Shot 2016-06-13 at 16.12.02

Screen Shot 2016-06-13 at 16.12.31

I added a home button to all the web pages so that the user can go back to the home page easily. It also decreases the opacity of the button when it is being hovered over by the user.

I also added a minimum width and height for the three image links so that when the viewport becomes a certain size the images don’t get any smaller in size.

Produce Outcome

5

6

animated_background

I decided to create a tiled animated background for my website (I’m still not sure whether to keep this addition or not).

Screen Shot 2016-06-14 at 13.44.44

I decided to remove the animated background but I have started to add in pictures of my work for the links. I also added in my logo for the home button.

I have started working on the page for Illustrations. As the video shows I have made it so the images enlarge as they are hovered over. This feature makes a specific image easier to see.

Screen Shot 2016-06-14 at 15.33.26

Here is some of the css code used to create this grid. I still need to add more images to the grid to make it look more complete.

In this video I show how I have added some animations into the website and I also set the background to the same colour as the logo background.

Screen Shot 2016-06-14 at 17.06.08

Here is the html used to make the divs link to the desired YouTube video.

I have started working on the mobile layout of the website.

Screen Shot 2016-06-15 at 13.44.42

I have been using media queries to control when the images format themselves into a mobile friendly layout. This query activates when the width of the webpage is below 500px and the height is below 700px. I am trying to adjust the layout so that the images don’t overlap each other when the webpage changes size.

I have applied the mobile layout to the animation page so now that is also optimised for mobile use. I also make my code more organised by reducing the amount of repeated lines of code in the media query section. I realised that a lot of the lines of code are inherited by the original class so they didn’t need to be repeated if they didn’t need changing.

Screen Shot 2016-06-15 at 15.11.50

As you can see the code is far more concise than previously.

I decided to completely redesign the layout of the home page because I felt it had too much blank space. So I decided to make the main focus of the home page to be the three links that go to illustration, animation and 3D modelling (3D modelling is currently a work in progress. I also included a parallax effect to the images because I thought it looked professional and more interactive. I need to reposition the contact div so it is not obstructing the final link.

7

I decided to up date the contact box at the bottom of the page so that is the last thing you see on the page. I also changed the colour to a grey that is slightly darker than the grey in the background. I also added an image to the 3D modelling section.

8

I was noticing a significant amount of lag on the front page when resizing the page and this was due to the large animated gif in the animation section so I decided to replace it with a static image but when the image is hovered over it begins to animate. This has improved the performance of the home page significantly.

9

10

11

I felt the images were too small when the webpage was in the four columns format so I decided to add a new format that has three columns that goes in between the mobile view and the large webpage view. I feel this makes the images easier to view at different sizes. I created a new media query for a width below 1000px, that is when the three column format is activated.

I have now applied the three column format to all of my pages excluding the home page. I have also made sure none of the images overlap.

Screen Shot 2016-06-20 at 13.54.56

I have now setup the website so that it works when the webpage is full size on the screen. I fixed all possible ways of the websites images overlapping with each other so the website is more accessible at larger sizes.

Screen Shot 2016-06-20 at 15.21.55

I decided to change the layout of the title because it started to causing some overlap when the website was viewed in larger sizes, so I put all the title on one line instead of two.

Final Evaluation

Overall I think this project worked pretty well although some changes had to be made to the original design to make the website functional. Originally I wanted the website to have an interactive background which would allow the user to scroll up and down the page and the background would change as this happened. Instead I decided to make the front page of the website focus on my artwork instead of an interesting background because I felt displaying my work is far more important than showing off a gimmick.

As far as responsive design goes I feel I have achieved this successfully. Every page of my website can be viewed at a variety of sizes whether that be mobile size, tablet size or desktop size. I made sure I designed my website with the mobile platform as the main priority.

If I was to create this website again I would have made a custom made background instead of just a single colour. I would have also made this background interactive is some way. Also I would have worked out a more efficient way to add more content onto my website because I had to change every media query individually when new content was added to my webpage. I probably could have reduced the amount of coded needed if I used a responsive layout like Bootstrap but I lacked the knowledge to use it effectively.

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