<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Transitional//EN” “http://www.w3.org/ TR/xhtml1/DTD/xhtml1transitionaldtd”><html xmlns=”http://www.w3.org/1999/ xhtml”><head><meta http equiv=”ContentType” content=”text/html; charset=UTF8”/><title>Nathan Bolton Design</title><link href=”stylesheet.css” rel=”stylesheet” type=”text/css”/><script type=”text/ javascript”>function MM_preloadImages() { // v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();vari,j=d.MM_p.length,a=MM preloadImages.arguments; for(i=0; i<a.length; i++)if(a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++]src=a[i];}}}function MM_ swapImgRestore() { //v3.0var i,x,a=document. MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x oSrc;i++) x.src=x.oSrc;}function MM_ findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent. frames.length {d=parent.frames[n.substring (p+1)].document;n=nsubstring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.formslength;i++) x=d.forms[i] [n];for(i=0;!x&&d.layers&&i<d.layers. length;i++) x=MM_findObj(n,d.layers[i]. document);if(!x &&d.getElementById) x=d. getElementById(n); return x;}function MM_swapImage() { //v3.0var i,j=0,x,a=MM_ swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)if ((x=MM_ findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</ script><script src=”js/jquery-1.7.2.min.js”> </script><scripttype=”textjscript”>$ (document).ready(function() {$(‘parent’). click(function() {$(‘.sub-nav’).toggleClass (‘visible’);})}); </script></head>
color=”#636467”>90 Years of BBC Radio</a> </font></li><li><a href=”this is fedrigoni. html” style=”text-decoration:none”><font color=“#636467”>This isFedrigoni</a></font> </li></ul></li><br /><li><a href=”about. html”style=”text-decoration:none”><font color=”#636467”><b>About</b></a> </font></li><br /><li><a href=”contact. html”style=”text-decoration:none”><font color=”#636467”><b>Contact</b></a> </font></li></ul><div id=”content”><div class=”slideshow”><script type=”text/ javascript” src=“http://c520866.r66.cf2. rackcdn.com/1/js/easy_rotator.min.js”> </script><div class=”dwuserEasyRotator”style =“width: 800px; height: 550px; position: relative; text-align: left;” data-erConfig=”{ autoplayEnabled:true, pro_infiniteLoop:true,a utoplayPauseOnHover:false, lpp:’102-105-108101-58-47-47-47-85-115-101-114-115-47-110-97116-104-97-110-47-68-111-99-117-109-101-110116-115-47-69-97-115-121-82-111-116-97-116111-114-80-114-101-118-105-101-119-47-112114-101-118-105-101-119-95-115-119-102-11547’, wv:1, autoplayStopOnInteraction:fal se}” data-erName=”Index Gallery” data-erTID =”{gpy47npmf9941495647831}”><div dataertype =”content”style=“display: none;”><ul dataerlabel=“Main Category”><li><img class=” main” src=”images/WEB GALLERY/xfs_800x550_ c100_BBC_04.jpg” /><img class=”thumb” src=“ images/WEB GALLERY/xfs_800x550_c100_BBC_04. jpg” /></li><li><img class=”main” src=” images/WEB GALLERY/xfs_800x550_c100_LWE_04. jpg” /><img class=”thumb” src=“ images/ WEB GALLERY/xfs_800x550_c100_LWE_04.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_imprint_03. jpg” /><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_imprint_03.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_IC_06.jpg” /><img class=”thumb” src=” images/WEB GALLERY/xfs_800x550_c100_IC_06.jpg” /></ li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_LWE_01. jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550_c100_LWE_01.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_IC_02. jpg” /><img class=”thumb” src=”images/ WEB GALLERY/xfs_800x550_c100_IC_02.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_BBC_07. jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550_c100_BBC_07.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_LWE_03. jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550_c100_LWE_03.jpg” /></li><li><img class=”main” src=”images/
< The Analogue Website > <body><div id=”container”><div id=”logo”><ahref=”index.html”><img src=”images/logo_solid.png” width=”120” height=”120” alt=”Logo” /></a> </div><ul id=”nav”><font color=”#636467”></font><p><li><a href=”index. html”style=”text-decoration:none”><font color=”#636467”><b>Home</b></a></font> </li><br /><li class=”parent”><font color=“#636467”><b>Projects</b></font> <br /> <ul class=”sub-nav”><li><a href=”Iconic Cities.html”style=”text-decoration:none”> <font color=”#636467”>Iconic Cities</a> </font><li><li><a href=”Life with Energy. html” style=”text decoration:none”><font color=”#636467”>Life With Energy</a> </font></li><li><a href=”imprint. html” style=“text-decoration:none”><font color=”#636467”>Imprint</a></font> </li><li><a href=”90 years of bbc radio. html”style=”text-decoration:none”><font
WEB GALLERY/xfs_800x550_c100_Fedrigoni_01. jpg” /><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_Fedrigoni_01.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_imprint_07. jpg” /><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_imprint_07.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_IC_03. jpg” /><img class=”thumb” src=”images/ WEB GALLERY/xfs_800x550_c100_IC_03.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_BBC_01. jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550_c100_BBC_01.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_imprint_01. jpg”/><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_imprint_01.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_Fedrigoni_05. jpg” /><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_Fedrigoni_05.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_BBC_03. jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550c100_BBC_03.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_Fedrigoni_02. jpg” /><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_Fedrigoni_02.jpg” /></li></ul></div><div dataertype=”layout” data-ertemplateName=”NONE” style=””> <div class=”erimgMain” style=”positi on:absolute;left:0;right:0;top:0;bott om:0;“ data-erConfig=”{__numTiles:3, scale Mode:’showAvailable’, imgType:’main’,__ loopNextButton:false, __arrowButtonMode:’ rollover’}”><div class=”erimgMain_slides” style=“position: absolute; left:0; top:0; bottom:0; right:0;”><div class=”erimgMain_ slide”><div class=”erimgMain_img” style=“position: absolute; left: 0; right: 0; top: 0; bottom: 0;”></div></div></ div></div><div class=”erabout erFixCSS3” style=“color: #FFF; text-align: left; background: #000;background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;”>This <a style=”color:#FFF;” href=”http://www.dwuser. com/easyrotator/” target=”_blank“>jQuery slider</a> was created with the free <a style=”color:#FFF;” href=“http://www.dwuser. com/easyrotator/”target=”_blank”>EasyRotator </a> software from DWUser.com.</div></div> </div></div></div></div></body> <body><div id=”container”> <div id=”logo”> <a href=”index.html”><img src=”images/ logo_solid.png” width=”120” height=”120”
alt=”Logo” /></a></div> <ul id=”nav”><font color=”#636467”>-</font><p><li><a href=” index.html”style=”text-decoration:none”> <font color=”#636467”><b>Home</b></a></font> </li><br /><li class=”parent”><font color=“#636467”><b>Projects</b></font> <br /><ul class=”sub-nav”><li><a href=”Iconic Cities.html”style=”text-decoration:none”> <font color=”#636467”>Iconic Cities</a> </font><li><li><a href=”Life with Energy. html” style=”text decoration:none”><font color=”#636467”>Life With Energy </a></font></li><li><a href=”imprint. html” style=“text-decoration:none”><font color=”#636467”>Imprint</a></font></li><li><a href=”90 years of bbc radio.html”style=”textdecoration:none”><font color=”#636467”>90 Years of BBC Radio</a></font></li><li><a href=”this is fedrigoni.html” style=”textdecoration:none”><font color=“#636467”>This is Fedrigoni</a></font></li></ul></ li><br /><li><a href=” about.html” style=”text-decoration:none”><font color=”#636467”><b>About</b></a> </font></li><br /><li><a href=”contact. html” style=”text-decoration:none”><font color=”#636467”><b>Contact</b></a></ font></li></ul><div id=”content”><div class=”slideshow”><script type=”text/ javascript” src=“http://c520866.r66. cf2.rackcdn.com/1/js/easy_rotator.min. js”></script><div class=”dwuserEasyRota tor”style=“width: 800px; height: 550px; position:relative; text-align: left;” data-erConfig=”{autoplayEnabled:true, pro_ infiniteLoop:true, autoplayPauseOnHover: false, lpp:’102-105-108-101-58-47-47-4785-115-101-114-115-47-110-97-116-104-97110-47-68-111-99-117-109-101-110-116-11547-69-97-115-121-82-111-116-97-116-111114-80-114-101-118-105-101-119-47-112-114101-118-105-101-119-95-115-119-102-115-47’, wv:1, autoplayStop OnInteraction:false}” dataerName=”Index Gallery” data-erTID=”{g py47npmf9941495647831}”><div dataertype=” content”style=“display: none;”><ul dataerlabel=“Main Category”><li><img class=”main” src=” images/WEB GALLERY/xfs_800x550_c100_ BBC_04.jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550_c100_BBC_04.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_LWE_04. jpg” /><img class=”thumb” src=“images/ WEB GALLERY/xfs_800x550_c100_LWE_04.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_imprint_03. jpg” /><img class=”thumb” src=“images/WEB GALLERY/xfs_800x550_c100_imprint_03.jpg” /></li><li><img class=”main” src=”images/ WEB GALLERY/xfs_800x550_c100_IC_06. jpg” /><img class=”thumb” src=”images/
The Analogue Website: Brief Overview Brief
Background Information
Concept
Materials
Create a bespoke publication that communicates how digital design can be created as a printed product.
In todayâ&#x20AC;&#x2122;s fast paced and ever growing technological society, digital design has proven to be vital. The ability to access information via different mediums at any point in time, and at any location is becoming more apparent in our current environment.
Using the background information / coding of a digital product to create a printed product.
Creating a bespoke publication needs high quality materials and craftmanship. For this I will use GFSmith paper in various weights and colour that complement each other and will make the publication be more tangible through the texture of the stock.
The printed product should take on the qualites that have been discussed throughout my dissertation. The focus of the brief should be to show how print and digital design can be used together, but also how the two offer different aesthetics and finished products.
New technologies are being developed at a vast rate causing designers to respond with advanced methods of communication to deliver content to their audience; as we speak the approach to digital innovations is becoming more focused and widely used. Through this turn of digitalisation, we have seen printed products being transformed into its digital equivalent. Examples can be seen through various established magazines such as Computer Arts, Print and Wired. These examples have taken their original printed state and redesigned them as a digital product, in doing so they can change how it is interacted with by using motion, sound and video to create a whole new experience for the user.
By using the coding from a website and directly translating the design of a website to a printed page, it will show how a digital product can be printed. The aesthetics of the printed product will take on those of the digital product, in essence the website will be printed. The aim of doing this is to show how print and digital can be combined together. We see printed products turned into a digital alternative, but not often the other way around, this brief and concept will illustrate how this is done.
In contrast, how can a digital product be produced as a print?
Nathan Bolton _ COP3 Practical
The Analogue Website | 01
Dissertation / Practical Rationale My dissertation looks at the effect that digital design is having on print and discusses wether the medium of print is still relevant within our digital age. By researching throughout the time of doing my dissertation, I was able to create a balanced argument for both sides, I found that print is still relevant within the industry and that at the moment it is making a come back as printing techniques such as letterpress and screen printing have become a lot more popular and being used again. A second finding was that companies that focus on publishing are using both print and digital design together in order to create a strong business plan and in essence create a product that is much more effective and one that can reach more people within the world. Taking this factor into account, I wanted my practical element to open the same enquiry as my dissertation has. In order to achieve this I have focussed on the idea of print and web working together. One subject that I have discussed within my dissertation is that print has seen a decline in the large print runs and it is now much more focussed on the quality of the product. This has created a surge in high quality and bespoke designed publications, this has also lead to more independent publications being released. Within the design industry technology has changed publishing and recently magazines and publication have turned digital. This has taken the original printed publication and replicated it to create a digital product. On the other hand, you donâ&#x20AC;&#x2122;t often see a digital product being translated and created into a printed product.
Nathan Bolton _ COP3 Practical
I found this idea really interesting and thinking how a website could basically be printed and still communicate the same idea really intrigued me. This was the direction and creation of my practical element. The basis of the project will be a website - the digital product. I will design, create and code a website that is for myself, this will carry my own branding and showcase my work. The website will be a simple design so that the focus is on the imagery of my work. By doing this it will hopefully make it easier to translate the design of the website to the printed page.
The whole idea and communication of the practical element is to show that digital design can take on the characteristics of a printed publication. We see digital design as a external product, because it lives on a screen, you never to get physically hold the product or own it. The use of printing techniques, page formats and stock will show the user how texture, ink and stock can influence how you interact and understand a product. This is making a digital product be as tactile as print and essentially hold the same aura that print does.
The publication will be directly influenced by the website, the layout of each page within it will create the layout of the pages within the publication. In order to communicate the translation of the website to the publication, I will include the website pages on a translucent stock to over lay the pages that corresponds to it. This will show how the website design has influenced the layout of the printed publication. Elements within the publication such as the typeface will take representation of a digital nature and how the coding of a website aesthetically looks. This will carry through to the page formatting. The format of the publication is going to be A2. I have choose to use a large format as the tactility of a publication is the essence of it, making it large format, physically means the user is interacting with it. The stock of the publication will be GFSmith stock, the stock colours are that of my branding, orange, grey and off white, these will be used in various weights to represent the importance of pages of the websites.
The Analogue Website | 02
Website Design
Home page The Home page presents my work in full. This is the main focus of the home page. The images work in a slideshow and automatically scroll through them in a random order. This will show a good overview of my own practice.
Nathan Bolton _ COP3 Practical
Project Pages The Project pages break down my work into each project. This is accessed by clicking on the Projects link and selecting the project. When presented with the page, there will be a slideshow of images showing the project, with a brief explanation of it.
The Analogue Website | 03
Website Design
About Page The About page is split into three sections, the first talks about how I started graphic design and my time within it so far. The second is about my own practice. The final section displays my work experiences and awards. This gives a good overview of myself as designer.
Nathan Bolton _ COP3 Practical
Contact Page Finally the Contact page shows my contact details and other links to social media sites and online portfolioâ&#x20AC;&#x2122;s.
The Analogue Website | 04
Publication Content From using the code that creates the website, I will use this as the body copy and content for the publication. This will be laid out on the paid in exactly the same as it appears on a screen. Hence showing how the digital product can be translated to a printed page. Throughout the publication I will have the website page printed onto trace which will overlay the page of code that relates to it, this will show the user how the two match each other and make the communication of the product much stronger.
Website design
Nathan Bolton _ COP3 Practical
Printed page with website code
Website design overlay on printed page - showing how the two relate and show the translation from digital to the printed page.
The Analogue Website | 05
Publication When the publication is first viewed you can see that there are two products within the overall publication. On the front cover there is a wrap around book sleeve. This is the same content as the publication, but put into a different context and printed through the process of screen printing. The idea of this was to show that the same content can be designed in a different way, but still communicate the same idea. Also by having this screenprinted product, along with the digital printed publication, it shows the arguement of print vs digital.
Nathan Bolton _ COP3 Practical
The Analogue Website | 06
Publication The final publication presents the website coding to the user as a printed product. The publication is designed directly from the website design itself. When using the overlaid print of the website pages, you can see that the design lines up to the coding. This helps communicate the content of the website and shows that it can be translated to a printed product.
Nathan Bolton _ COP3 Practical
The Analogue Website | 07