Dissertation Plan

Illustration List

Illustration 1

Found: http://abduzeedo.com/uiux-works-virgil-pana

Accessed: 27 September 2016

Description: This is the hamburger icon, the web ideology that to make things neater, the menu is hidden behind this icon. Some professionals argue that the menu becomes “out of sight, out of mind”

Illustration 2

Found: http://www.bluebell.com/

Accessed: 27 September 2016

Description: This image shows how messy mystery meat navigation is to the user. In the image, you are unable to decide whereabouts you should hover and it means the user is forced to hover to discover. This is really bad from a user experience point of view, and surprisingly this trend is still being used occasionally.

Illustration 3

Found: http://noisey.vice.com/blog/keshas-myspace-profile-from-2008-is-better-than-dj-khaleds-snapchat

Accessed: 27 September 2016

Description: This image shows what MySpace profiles used to look like when the user was able to control the design of their own profile. It is quite important to note how the user didn’t care about how they were perceived in this era, while nowadays, on Facebook, the current social media site, people only upload things that make them look as good as possible.

With particular reference to the public consumer, what are the significant trends and subsequent developments in web design in the western world over the last twenty-five years, and how have they impacted on society today?

Intro – 1,000 Words

– Basic history of the web

– Historic perspective

– Real world transformed, digitalised and utilised as electronic communication

– Trends till 1996

Economics – 1,000 Words

– Bidding

– Gambling

– Pornography

– Shopping

– Wholesaling

Gaming – 1,000 Words

– Technological advancements

– Connected players

– Gaming addiction

Privacy – 1,000 Words

– Consumer Awareness

– Encrypted messaging

Conferencing – 1,000 Words

– Removing limitations of distance

– From governments to the consumer

– The drone movement

Search – 1,000 Words

– The mighty web

– Yellow Pages

– Data Analysis

Evaluation – 1,000 Words

The dissertation should start by introducing what the web is and how it started, then continue to go on to make connections to the relevance of the service in relation to other services available at the time such as the television and telephone. Next it should explain that the web is a continuance of real life products and services then give an insight into the trends that had already started occurring by the webs’ 5th birthday.

In the Economics section, it will explore how the web has been taken advantage of in the aim of making money and how the different subsections all created and now partake in an online mass marketplace.

The gaming section will include information about how technology has limited the capacity of the games available to the consumer and that with ever improving technology, the games continue to improve. It can be mentioned that graphics and consoles are two major parts within this subsection. I can discuss how the internet has been able to bring players together to create online communities, and also mention how this has created a new addiction to online gaming.

Privacy needs to be considered when many people store personal information online, discussing how awareness of online privacy and the spying on the consumer by the government is important, it allows discussion of how many corporations have followed this trend by offering encrypted messaging services.

In the conferencing section discussion should note how mail evolved into email, which evolved into instant messaging, which in turn evolved into video chat services. It would be important to consider at this point that the web was built originally for government officials to contact each other during the war, and how the service was later made available for consumer use. A great way to back this point up would be to talk about the current drone movement, where yet another secret government product has been made public and then made available for consumer use.

Without search engines the web could be a large list of pages, just like the yellow pages for example. It means comparisons can be made on how the web has developed the trend of listing available services. It also means analysis can be made on how powerful of an income source the web can be by looking at how by tracking searches providers can provide more successful ad campaigns. The dissertation will also look at Google who have had huge success from being an online search engine to the point of being one of NASDAQs’ top valued companies’.

Books to offer support to essay

Luppicini, R. (2008). Handbook of conversation design for instructional applications. Hershey, PA: Information Science Reference;

This book can be vital part of my essay as it will allow me to understand how the function of the web has been paved by design

Fortune 500 homepages: design trends

SL Jones, D DeGrow – IEEE transactions on Professional Communication, 2011;

This book allows me to follow the trends as they developed, and how they were used by five hundred of the worlds biggest organisations.

The democratisation of design and design learning: How do we educate the next-generation designer, Katja Fleischmann, James Cook University, Australia;

This book helps me to understand how design and trends develop over time with the process of design being taught to a new generation that will bring a new perspective to the web.

The Internet of Things—A survey of topics and trends, Andrew Whitmore, Anurag Agarwal;

This book allows me to understand what trends are most popular and why. It also allows me to look at the theory of a connected world with the internet of things, an idea that all appliances should connect to the user wirelessly to allow greater control.

Learning PHP

The main part of this assignment was learning what the different code did. Understanding the different methods of bringing data from a table and presenting it properly on thew website was the main thing that I learnt.

Screen Shot 2015-05-25 at 12.14.28
My first attempt at a thematic php website was the following website.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish01/retrievetropicalfish01.php
This was a template of a table that contained the content

Screen Shot 2015-05-25 at 12.24.37
My next attempt was to use the previous method but lay the content out slightly differently.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish02/retrievetropicalfish02.php
You can see that I have removed the content from the table and gave it an improved structure using css.

Screen Shot 2015-05-25 at 12.26.28
My final attempt at the php Gallery feature was this one.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/disney/disney.php
I was able to set up a database by myself and include the content entirely myself meaning I have at this point a much better understanding how the php works.

Screen Shot 2015-05-25 at 12.26.52
The next stage was to code and understand how a search function works, this was an easier concept for me to grasp.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/animal/logo-search-01.php
You can see here a very basic example of a search function that I built.

Content Layout

Understanding layout of content is going to be a vital part of my brochure so that I am able to present the web trends in a readable, fashionable way. Using a mixture of images, text and white space creates an interesting layout on paper. It is understanding to balance these elements that creates a visually appealing brochure. I have found that if you are to have text, to make it understandable, the best layout is to use columns of two or three. You can see quite a few examples of this method used below;

1 3 2

Some printed material focus their efforts more upon the typography than the other aspects of the design, this creates a different feel to the printed material, you can see some examples of this here;

This example is excellent because it also shows the method of cutout text to reveal an image through the text.
4 8 7 6 5

Another important thing I noticed in print is the shapes used to add additional interest in the subject is the addition of shapes and lines around a person or object. I think this allows the reader to instantly recognise what is at the centre of attention. You can see some great examples of this here;
9 SONY DSC 10

References;
http://inspirationhut.net/inspiration/42-excellent-examples-of-magazine-layout-design-for-your-inspiration/
http://indulgy.com/post/pEfMtH34d1/layout-dansk-magazine
https://www.behance.net/gallery/Magazine-Feature-Magazine/9812813
(http://www.flickr.com/photos/marindsgn/3894231417/in/photostream)
http://www.amandamocci.com/#1906059/THE-UNIVERSE-POSTERS/
http://www.aisleone.net/2012/design/typographic-revolt/
http://www.opus-design.jp/press/item_539.html
http://www.magspreads.net/2013/07/fashion-look-book-layout-design.html
http://milesmind.tumblr.com/post/44590898712

Lines in Web design

Lines are becoming more and more popular in web and print today. They create abstract sites that stand out from the crowd. Differences in thickness, length, direction and colour cause different emotion in the viewer and I think they have such a broad range within design itself I though it would be worth covering in my brochure.

Case 3D have an excellent example of lines somewhat hipster triangles being used in their website so that as you scroll you have bright neon colours mixed with a white version, colour version and dark version of the same image. Using the scroll  you can see this transition;
1  23

Not only is it a brilliant experience for the user, but it also stands out from the crowd and seems to have almost hidden features for the user. For example the About us page has a triangle that shows the next member of staff, and whilst browsing the site I found myself trying make combinations of the faces on the site, you may enjoy a couple of the ones I made here;
5 6 4
Noting the CEO without hair and adding it was fun;
7
This may be me being immature but it may also be a subtle detail that makes them stand out a bit more.

8 11 10 9
Horizontal lines here in the dunlop site are used to break up content into sections which are clickable, moving the cursor changes the area which is the largest. The site has interactive content where you can drive the cares with different tyres, actually really fun!!16
15
This wine website uses lines to separate content that is somewhat compact together, this is not a brilliant experience and has a lot going on, just like some of the bad brochures I described but the difference here, the thing that makes it stand out is the different fonts.

There are different forms a line can come in. I found this awesome write up that discusses the differences and the effects they have on the viewer (http://tympanus.net/codrops/2011/11/17/lines-in-web-design/);

12 14 13

These description help me to understand the purpose of the different lines, I instantly begin to thing how I can use this in line with my logo, and branding the brochure with it. I made a quick mockup here at shows the initial Ideas I have;

17

References;
http://designshack.net/articles/inspiration/30-great-looking-web-designs-built-with-diagonal-lines/
http://www.case-3d.com/#home/en
http://en.dunlop-tire.ru/

Lessons Learnt

Coming onto the course with a little bit of prior knowledge I found it relatively easy to code the website. While I found it somewhat easy, that does not mean it didn’t come without challenges and I learnt quite a few valuable lessons whilst coding the site. I knew already that html was the base of the website which contained the content while the css was simply the styling of the site. I was aware that everything was put into containers called divs, these could be linked with css file to give each container its own style, it is through these basic principles that a website is created. Animation and transitions are not required for this module I thought it would be best to simply refine my current skills to iron out any flaws and complete a website the best of my ability. One of the biggest lessons Learn’t from this experience was the difference between padding and margin elements within a css file. I was using them as if they were the same type of thing, and then realising there were issues on the page where there would be areas of white space that I didn’t understand. This is something I researched and then began to understand that the padding was space within the div around the elements, whereas the margin in the space outside of the div. Another lesson I learnt during this project is that you can actually create layers within the page, and while I still haven’t mastered this yet I know understand that when there is a z-index present in the css file, then it means that something is layered on the webpage.

Adaptive, Fluid, Responsive or Static?

Responsive or Adaptive?

Responsive web design allows you to create a website that will adjust itself to fit the size of the browser regardless of the size of the screen. It means you code it once and it will flow more like a grid with images that will rescale themselves to fit the screen.

Adaptive web design is where you make lots of different versions of the same website so that it fits the different screen resolutions perfectly, while effectively gaining more control of the specific user experiences, it is time consuming. Adaptive design uses breakpoints that mean once you reach a predefined point, the layout will change to fit the screen again.

Something to take note of when making adaptive or responsive sites, is that they all use the same information but use styling to change the information. For example, an image is required at a large size, then the browser will resize it depending on the screen size. Therefore, when possible, it is important to use vectors. It is equally important to remember that you should always design for the desktop and then work smaller down to mobile rather than starting at mobile size.

So overall, fixed websites, the ones I am currently learning how to build have set widths and no media queries (allows the size to understand the size of the device it’s being used on). Fluid websites are a little different, they rely on percentages for relative widths to the browser itself, therefore they don’t need to you use media queries either. Adaptive are built to certain resolutions, then require media queries to determine the device or resolution, these usually rely on set or relative widths. Responsive seems to be a lot more focused on the actual resizing of the display as it is actually designed at multiple levels using again media queries and relative widths.

I found the utility http://www.liquidapsive.com/ which has the same design but allows you to change the way it is coded so you can see for yourself fluid, static, adaptive etc. This allowed me to find the negatives of using every type design. My first finding, one that I was already experiencing when designing my site was when you try to reduce the size of a static site;

1

Adaptive is time consuming and works well for smaller devices but as you can see there are white borders on each side of the design once you reach a certain size.

2

Liquid, because it uses percentages of the width works really well at larger sizes but starts to become illegible when you start to minimise it to a smaller level;

3

Finally, responsive seems to be the go to style as it works when the browser is both really large and really small.

Having understood the different types I thought it would be important to have a look at current responsive sites, as it was the best option from the four above.

Meti Design is a really nice responsive site complete with animation, smooth transitions and a nice 3D animation using frame loads like I noted previously in Sony’s Be Moved Campaign (https://akbrodie.wordpress.com/2014/10/15/website-analysis-4-dangersoffracking-com/). This makes the website look very professional and I found myself wanting one of the products they produce, whether that’s because of the website or not, I am unsure.Below you can see the different screen sizes effecting the page, and how similar the experience looks.

4 5

Skinny ties also have created very good responsive site that promotes the ties they sell. It works just like a responsive site should but has thew addition of a feature that I haven’t seen anywhere else. This feature being the fact that the rollover still works regardless of the screen size, I am unsure if this is pointless or not as when the screen sizes are smaller they generally are touch screen but it turns out that when used on a mobile, the rollover menus come up when the menu items are clicked on. Below you can see the images of the screen sizes and then the different sizes with the rollover menus.

6  8 7
9

Mry is probably my favourite out of the lot though, doing what my research said about starting with desktop and working your way down removing parts bit by bit. The desktop version is complete with zooming circles with flat colours and images in the background while the mobile version has none of this and turns into a box style, therefore creating to completely different experiences for the user depending on how they view the site. You can see this here;

10  11

12

References;

http://mry.com/

http://skinnyties.com/
http://www.metidesign.com/#

InVision – Final Verion Prototype

Creating my design using InVision, a live prototyping tool was very useful as it allowed my design to appear just like a functional site. Having designed the site to be the best of my ability, I didn’t feel by simply show the images did it justice, therefore I exported every possible combination of my design which came to a total of 19 because of the amount of different sections. I then used ‘hotspots’ to link certain parts of the image to another image, therefore, I have created a prototype of my design which is usable and ready to show to clients. Once I had got to this stage, it allowed me to discover issues that I had not found previously, firstly the text is not bold on the “Fluorescent Lightbulbs” in the peace side of the budget section.

1

Secondly when you scroll through the 10 most profitable companies in the US, I have missed the logo from number 5.

2

These are two small issues that I could easily go back to resolved. In line with simpleness the section in which you would purchase tickets works really well, but it doesn’t allow the user to confirm the price or ticket amount just after putting their card details in, this would maybe make a better experience for the user.

This also meant I was able to view the site from mobile devices on the web. I have been able to see a couple of instances where the design doesn’t work and may have to be re-imagined for mobile devices. The first example of this is the contrast of text over images, because the screen size is smaller and the text only slightly darker than the background image, it becomes a little harder to read.You can see this here;

3

Another mobile issue is the size of the buttons are a little too small to press on the mobile version, therefore would become a usability issue for the user, and would take away from the overall experience. You can see this here;

4

The actual working prototype is available here for your viewing pleasure;

http://invis.io/T71Y0V725