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.

Advertisement

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.

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

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.

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.

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;

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.

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;

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;
 

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;

Noting the CEO without hair and adding it was fun;

This may be me being immature but it may also be a subtle detail that makes them stand out a bit more.

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!!

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/);

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;

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;

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.

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;

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.

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.

 

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;

 

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.

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

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;

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;

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

http://invis.io/T71Y0V725

Understanding Grids

I read the book “Making and Breaking the Grid” by Timothy Samara so that I had a better understanding of grids in general. There are many many uses for grids and layouts and I will be able to implement what I have learn’t in this book into almost every aspect of my work.

There is a massive history of grids that date right back to the Romans and Greeks, and whilst this isn’t completely relevant it allows us to understand where the grids came from and how they became what we know and use today.

Early uses of grids were used in architecture to get the correct proportions, which then moved on to design furnishing and everyday household objects, and then into print. In print, grids were used to give structure to a document both visually and spatially. Every grid is split into different sections, these are margins, flow lines, spatial zones, markers, modules and columns. You can see a diagram of what each section represents here;

Using different combinations of these sections is what makes every grid slightly different to the other, for example if you have maybe 3 columns with a smaller line length surrounded by large margins and spatial zones, you would have a easily readable page rather than having just one column with a longer line length with smaller margins and spacial zones which would make it much harder to dread and take in. Something to take into consideration due to it’s importance is not only the typeface you use but some of the attributes like size, line height and letter spacing.

Manuscript, Column, Modular and Hierarchical are the four main types of grid, of course there are variations within these categories but they are different enough to understand they have their own use and purpose.

The manuscript grid is the simplest of the four as it’s structure is designed to accommodate large amounts of text so can be seen in textbooks most commonly, it is also the same structure that is used for writing essays. It doesn’t even have to just consist of text though, images can be used to implement space into the text to give the eye a rest of reading.

The column grid is probably the most common because of it’s functionality in wide range of aspects, both images and text can be placed within a column grid, and you find that there is a large history of this style of grid in newspapers and magazines and this has seemingly been transferred to the web with such templates as the 960 grid:

This grid allows for up to 12 columns on a page, which allows the designer to have much more control over the layout of the page.

A modular grid is very much similar to a column grid but different in the sense that it also has horizontal flow lines which divide the page into columns into modules. A group of modules can be put together to create spacial zones, which can be allocated different content in a way of having an overall order.

The hierarchical grid is the last of of the four, it is probably less commonly used grids too. It works much less systematically based on the fact that the elements have their own constrains so they are arranged in such a way they look right on the page but the layout probably wouldn’t work for any other purpose. By using spacing and equal margins you can make elements that are somewhat unorganised become arranged in a presentable manner, you usually this type of layout within posters.

Marketing Items & Content Ideas

First item I will include takes design cues from my letterhead research, in general I want to keep in line with my luxurious branding feel so I will create this to hold everything I put inside it. Inside this envelope, I will have a total of three different item. Number one will be similar to the Natwest item for promoting their mobile banking app, It will be shaped like an iPhone, the screen will feature an internet browser with search of a web designer and then the link to akbdesign at the top. On the second page it will be captioned “What I do” and then list with icons the specific things I actually do. These will be:

SEO

Logo Design

Web Design

Marketing

Video Production

Social Media

3rd page – Quote

“AS A WEB DESIGNER, I KNOW THE FUTURE OF BUSINESS IS IN THE INTERNET. I DREAM BIG, AND MOTIVATED DREAMERS MAKE THINGS HAPPEN. I CAN MAKE THINGS HAPPEN FOR YOUR BUSINESS.”

4th page – Contact me

Twitter handle

blog address

The second item I will create is aiming to close the sale, in effect convince the viewer to give their hard earned cash to me in exchange for my services, for this I will use a double sided A6 sized piece of paper. One one side it will be captioned “Am I right for you?” and then have sales lingo such as, “You need a quality service provided by multi-skilled designer who can capture your business visually and use current trends to present it to your clients in the best possible light. You want him to do all this whilst being affordable, friendly and professional with an edge to his the rest of his competitors”. On the second side I will have client comments and ratings of the service I have  provided them in the past.

The final piece with be credit card style item which has a discount for them off the services provided they use it within as certain amount of time, this will make them think they have got a quality service, with a discount and then potentially be pressured into taking the service before they  would have done otherwise.

The science of colours

RGB colours (red, green & blue) are used on the web, but CMYK (cyan, magenta, yellow & black) are used in printing. The reason for this is somewhat scientific, when you add all the RGB colours together, you create white while when you add all the CMYK colours together, you create black. Therefore in print it is cheaper to use less ink, and white is the colour of the paper most commonly printed on, so it would make sense to stick to CMYK so that you can just build the colours up by adding the right amounts of all cyan, magenta and yellow to create the colours and adding equal amounts of each. On the other hand pixels are naturally dark, and require electricity to give off certain colours, therefore black on screen uses less energy than white on screen. So again to allow the colours to build up, you start of with black, then to save energy and power you build up with the other colours. So the reasoning for the different colour specifications is technically to save money.

CMYK

RGB

Obviously the colours are made up of different attributes, the three attributes that can change the quality of a colour are described in the HSI (Hue, Saturation & Intensity) colour model. This can be seen below, the one at the top is the technical description of the version below which you will recognise from colour palettes in computer programs.

You will also recognise the same pattern in rainbows and apple’s loading wheel.

References:

(http://www.maclife.com/files/u129772/1_BenColorCapture.jpg)

(http://www.itc.nl/library/Papers/HENGL-pixel.pdf)

(http://cruxcreative.com/rgb-vs-cmyk-when-to-use-which-and-why/)