site map - alicesdigitalportfolio.files.wordpress.com€¦ · web viewpurpose the purpose of...

Purpose The purpose of creating the Mobile World Station website is to sell mobile phones and provide information about different types of contracts for them. Sim free, Pay monthly and pay as you go are all available one the website.

User requirements There are several requirements for the website I have created, the focus of this website is to promote and sell mobile phones, this website should be targeted at anyone who is interested in buying mobile phones. The website I create must load without any implications, meaning it must load quick and easy. The website should contain interactive features such as a feedback form and should also contain at least eight pages which are linked together.

When making the website I had to consider the colour scheme, page styles and use of text on all of the pages. The website should be interesting to the user and contain at least four suitable digital assesses, this includes animations, images, audio and videos.

Site map

As you can see above every page is connected to one another through the home page. This makes it easier to navigate around the page as when you leave the home page you don’t have to go back to home to get to the next page. You can stay on the page you’re on and go directly to the page you want to go to next.

Wireframes/Template

Asset Table

The asset table is below.

File Name

Source

File Path

Picture

Aesthetic Phone

http://www.on-my-own.ru/collection/frontpage/product/chehol-dlya-iphone-6655s5c44s-marbel

Home page

Background Gradient Picture

http://blog.hdwallsource.com/15-excellent-hd-gradient-wallpapers/

Background image on every page

Facebook Logo

https://commons.wikimedia.org/wiki/File:F_icon.svg

Every page

Instagram Logo

http://sguru.org/instagram-logo/

Every page

Join Our Community

https://depositphotos.com/37056003/stock-photo-join-our-community-blue-vintage.html

Home, About, FAQ, Support, Contact pages

Mobile World Station

Used the Wine Date font from http://dafont.com

The made into and image and cropped on Adobe Photoshop CC 2015.5

Title on every page

Next Day Delivery

https://www.navi-tech.co.uk/next-day-delivery-300x300/


Quote Part 1

Used the font Blacklisted from http://dafont.com

Then made into and image and cropped on Adobe Photoshop CC 2015.5

Home page

Quote Part 2

Used the font Blacklisted from http://dafont.com


Home page

Recycling Logo

https://www.google.co.uk/search?safe=strict&rlz=1C1CHBF_en-GBGB787GB787&biw=798&bih=774&tbm=isch&sa=1&ei=VF2hWq2IDJHr_Aax64vAAQ&q=recycling+circle+logo&oq=recycling+circle+logo&gs_l=psy-ab.3...28190.32687.0.32830.13.10.3.0.0.0.133.972.0j8.8.0....0...1c.1.64.psy-ab..2.3.247...0j0i67k1j0i7i30k1j0i8i7i30k1.0.xdazfPD8wNA#imgrc=Vu3Dw6CTLv4aQM:


Tumblr Logo

https://commons.wikimedia.org/wiki/File:Tumblr.svg

Every page

Twitter Logo

https://www.google.co.uk/search?safe=strict&rlz=1C1CHBF_en-GBGB787GB787&biw=798&bih=774&tbm=isch&sa=1&ei=pluhWqGLHamVgAaqi7-ICQ&q=twitter+logo+&oq=twitter+logo+&gs_l=psy-ab.3..0i67k1j0l2j0i67k1j0j0i67k1l2j0j0i67k1j0.25754.28402.0.28865.9.9.0.0.0.0.211.1081.0j7j1.8.0....0...1c.1.64.psy-ab..1.8.1081...0i13k1j0i7i30k1j0i10k1.0.J3DCzu796aI#imgrc=c3fKUQNO7CRXTM:

Every page

Upgrade Available

https://www.shutterstock.com/image-illustration/rubber-stamp-illustration-showing-upgrade-available-72168190?src=5Y4uKyGTL7MSmLGPA5zPjw-1-12


About Us

http://desertvapes.com/about-us/

About page

IPhone 6

http://www.zdnet.com/pictures/apple-iphone-6-plus-hands-on-already-replaced-my-android-phone/5/

IPhone page

IPhone 7 and 7 plus

https://cn.engadget.com/gallery/review-iphone-7-0/#gallery=429379&slide=4056717&index=11

IPhone page

IPhone 7

https://cn.engadget.com/gallery/review-iphone-7-0/#gallery=429379&slide=4056715&index=9

IPhone page

IPhone 8

http://www.trustedreviews.com/reviews/iphone-8

IPhone page

IPhone X word


The made into and image and cropped on Adobe Photoshop CC 2015.5

IPhone page

IPhone x

https://economictimes.indiatimes.com/magazines/panache/fans-find-apple-iphone-x-too-expensive-for-upgrade/articleshow/63204179.cms

IPhone page

Samsung Galaxy Note 8

https://gadgets.ndtv.com/samsung-galaxy-note-8-4261

Samsung page

Samsung Galaxy S7

https://www.google.co.uk/search?safe=strict&rlz=1C1CHBF_en-GBGB787GB787&biw=798&bih=774&tbm=isch&sa=1&ei=9V6hWqj3JaPZ5gKK8IyYCA&q=samsung+galaxy+s7&oq=Samsung&gs_l=psy-ab.3.6.0i67k1l10.26135.28030.0.31277.7.2.0.5.5.0.119.237.0j2.2.0....0...1c.1.64.psy-ab..0.7.247....0.WzXvFqu200k#imgrc=je5gDenS07DWgM:

Samsung page

Samsung Galaxy S8 Plus

https://www.carphonewarehouse.com/samsung/galaxy-note-8.html#!colour=black&capacity=64GB&dealType=pm

Samsung page

Samsung Galaxy S8

https://www.google.co.uk/search?safe=strict&rlz=1C1CHBF_en-GBGB787GB787&biw=798&bih=774&tbm=isch&sa=1&ei=Jl-hWpf7JcTt5gKDprDQCA&q=samsung+galaxy+note+8+plus&oq=samsung+galaxy+note+8+pl&gs_l=psy-ab.3.0.0l10.17229.17459.0.18538.3.3.0.0.0.0.141.261.0j2.2.0....0...1c.1.64.psy-ab..1.2.261....0.nMncYvOdsHI#imgrc=tKa0LP_jYtCcuM:

Samsung page

Samsung Galaxy S9 Word



Samsung page

Samsung Galaxy S9

Samsung page

Sony Xperia L1

https://www.carphonewarehouse.com/home/products/sony/xperia-l1.html#!colour=white&capacity=16GB&dealType=pg

Sony page

Sony Xperia XA1

https://www.carphonewarehouse.com/home/products/sony/xperia-xa1.html#!colour=pink&capacity=32GB&dealType=sf

Sony page

Sony Xperia XA2 Word



Sony page

Sony Xperia XA2

https://www.carphonewarehouse.com/sony/xperia-xa2.html#!colour=pink&capacity=32GB&dealType=pm

Sony page

Sony Xperia XZ1

https://www.carphonewarehouse.com/sony/xperia-xz1.html#!colour=blue&capacity=64GB&dealType=pm

Sony page

Sony XZ Premium

https://www.carphonewarehouse.com/sony/xperia-xz-premium.html#!colour=chrome&capacity=64GB&dealType=pm

Sony page

Daydream VR

https://www.carphonewarehouse.com/google/daydream-view-vr-2017.html#!colour=grey&dealType=sf

Google Page

Google Home Mini

https://www.carphonewarehouse.com/google/mini-home-speaker.html#!colour=grey&dealType=sf

Google Page

Google Home

https://www.carphonewarehouse.com/accessories/smart-home-speakers.html

Google Page

Google Pixel 2

https://www.carphonewarehouse.com/google/pixel-2.html#!colour=white&capacity=64GB&dealType=pm

Google Page

Google Pixel XL Word



Google Page

Google Pixel XL

https://www.google.co.uk/search?q=Google+Pixel+XL&safe=strict&rlz=1C1CHBF_en-GBGB787GB787&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjBhL2Gj93ZAhXQasAKHakNBnAQ_AUIDSgE&biw=798&bih=774#imgrc=qB9Ws-XaIVQ7IM:

Google Page

Huawei Nova

https://www.carphonewarehouse.com/huawei/nova.html#!colour=gold&capacity=32GB&dealType=pm

Huawei Page

Huawei P8 Lite 2017

https://www.carphonewarehouse.com/home/products/huawei/p8-lite-2017.html#!colour=blue&capacity=16GB&dealType=sf

Huawei Page

Huawei P10 Plus Word



Huawei Page

Huawei P10 Plus

https://www.carphonewarehouse.com/huawei/p10-plus.html#!colour=black&dealType=pm&capacity=128GB

Huawei Page

Huawei P10

https://www.carphonewarehouse.com/huawei/p10.html#!colour=black&capacity=64GB&dealType=pm

Huawei Page

Huawei y6 2017

https://www.carphonewarehouse.com/huawei/y6-2017.html#!colour=gold&capacity=16GB&dealType=pg

Huawei Page

Nokia 2

https://www.carphonewarehouse.com/home/products/nokia/2.html#!colour=black&capacity=8GB&dealType=pm

Nokia Page

Nokia 3

https://www.carphonewarehouse.com/home/products/nokia/3.html#!colour=black&capacity=16GB&dealType=pg

Nokia Page

Nokia 5

https://www.carphonewarehouse.com/nokia/5.html#!colour=copper&capacity=16GB&dealType=pm

Nokia Page

Nokia 6

https://www.carphonewarehouse.com/nokia/6.html#!colour=silver&capacity=32GB&dealType=pm

Nokia Page

Nokia 8 Word



Nokia Page

Nokia 8

https://www.carphonewarehouse.com/nokia/8.html#!colour=silver&capacity=64GB&dealType=pm

Nokia Page

Amazon Echo Dot

https://www.carphonewarehouse.com/amazon/echo-dot.html#!colour=black&dealType=sf

Accessories Page

And cellular 38mm Word



Accessories Page

Apple Earpods with Lightening Connection

https://www.carphonewarehouse.com/apple/earpod-with-lightning-connector.html#!colour=white&dealType=sf

Accessories Page

Apple Watch 3S GPS and Cellular 38mm

https://www.carphonewarehouse.com/home/products/apple/watch-s3-gps-and-cellular-38mm-stainless-steel-soft-white-sport-band.html#!colour=white&dealType=sf

Accessories Page

Apple Watch 3S GPS Word



Accessories Page

GOJI Powerbank 4000mAh

https://www.carphonewarehouse.com/home/products/goji/powerbank-4000mah.html#!colour=pink&dealType=sf

Accessories Page

Samsung Tab S 10inch Keyboard

https://www.carphonewarehouse.com/home/products/samsung/tab-s-10-keyboard.html#!colour=white&dealType=sf

Accessories Page

Sport Band word



Accessories Page

Stainless steel soft white word



Accessories Page

FAQ

http://luxcloud.com/faq/

FAQ Page

Support

https://www.google.co.uk/search?safe=strict&hl=en&biw=798&bih=774&tbm=isch&sa=1&ei=AWOhWuGdBcSt_Qa0tYiQBg&q=support&oq=Supp&gs_l=psy-ab.3.0.0i67k1l2j0l8.14443.15131.0.17161.4.4.0.0.0.0.120.464.0j4.4.0....0...1c.1.64.psy-ab..0.4.464....0.4CzAbwYv9XU#imgrc=LYcGVVup382utM:

Support Page

Contact Us

https://www.madetelevision.tv/contact-us/

Contact Page

Assets and folder structure

As you can see above every page has an allocated folder with the images that are found on the page. All these images are in the image folder, this is to ensure I have a copy of everything on the pages. Having them like this means they’re neat and easy to find.

Hardware requirements

To download all the software that is needed you must first have the correct hardware. The hardware that is requires is:

· Router

· Switch

· Server

· Computer

· Wi-Fi

Software requirements

The software making this website requires is:

· Adobe Dreamweaver CC 2015

· Adobe Photoshop CC 2015.5

· Google Chrome

Test Plan

Test No.

Purpose

Expected outcome

Actual outcome

Successful

Functionality – buttons

The purpose of action buttons is to make things happen. This is done through images rather than text.

The expected outcome for the action buttons is when the use clicks on either the Facebook, Twitter, Tumblr or Instagram picture it will take them to that website.

The action buttons takes the user to the website that’s it’s supposed to.

The test was successful.

Functionality – hyperlinks

The purpose of hyperlinks is to help the user navigate from page to page. This is related information that is on a different page.

The expected outcome for the hyperlinks is that the users can navigate from page to page. The outcome should be that when the used clicks on the name of the page they should be quickly transferred to the page they want to.

The hyperlinks didn’t that you to the designated page. This meant that the test was unsuccessful

The test was unsuccessful.

Functionality- form box

The purpose of the form box is to provide a method of user input.

The expected outcome for the form box is that the users will be able to give feedback.

When testing the form box I was able to use it to give feedback or information.

The test was successful

Reliability – form box

The reliability of the Form Box is to give the user a chance to give quick and efficient feedback.

The expected outcome for the reliability is that the user will be able to write in the text boxes that are provided.

The form box gave feedback to the server.


Reliability – hyperlinks

The reliability for hyperlinks is that they’re able to load quickly and take you to the right resource.

The expected outcome of the reliability for hyperlinks is that they navigate the user to the correct rage.

The actual outcome was that the hyperlink didn’t take you to the designated page.

The test was unsuccessful.

Robustness – Website crashes

Mobile World Station website is robust, this means that the shite doesn’t crash.

It is expected that the website loads efficiently.

Every page loaded efficiently and fast with no problems.


Usability – Navigation

The purpose of navigation is to guide the user around the website easily.

The expect outcome is that the user will be easily navigated around the website.

The user was able to successfully navigate their way through the website easily,


Alternative designs (Merit)

Why was is rejected

The alternative design was rejected as the website would buffer and take a while to load. This is because the is a lot going on the webpage. The first being the video, as there is a video on each page it makes it less reliable to load. When this happens it can lose customers as they won’t want to wait a while as a web page is supposed to load straight away. Another reason the video would affect the loading time is because of the audio. The final reason this design was rejected as the GIF wasn’t added into the coding correctly meaning every time I opened up the website the gif wouldn’t load or work efficiently.

Justification (Distinction)

The justification for placing the hyperlink at the top of the website is to ensure the user can clearly see which page they’re on and what page they can go to, if the hyperlinks/page titles were at the bottom of the page it would require the user to scroll down each page to navigate their way through the website. The action buttons that are linked to Facebook, Twitter, Tumblr and Instagram are at the bottom of the page as they’re considered the least important out of all the features.

On each page there is a large image to show the user what to expect from the phone they purchase, to the left of this image there’s text to explain the mechanics of the phone. This is placed in the centre of the webpage as it’s the main attraction of that certain page. Below this there are four different items the user can purchase, this is near the bottom of the page as it isn’t classed as the main focus.

site map - alicesdigitalportfolio.files.wordpress.com€¦ · web viewpurpose the purpose of...

Documents