Design for Web boards
7
DESIGN FOR WEB / DIRECTION BOARDS Website Content From previous mistakes designing the website I realised I needed to edit the content, so that each page had a similar amount of text. The outcome can be seen below. Home Page This website will briefly explain the four key developments and the peo- ple who made them that took surgery from an optimistic form of surgery, to the science it is today. Anatomy In 1536, Andreas Vesalius made the first comprehensive studies into hu- man anatomy. He took the rotting body back to his house, boiled the skin off the body and re-assembled the bones one by one to create and accurate human skeleton. After he had successfully identified all parts of the hu- man skeleton. He did the same process with other dead bodies for the muscular, organ and nervous systems. Through his investigations Vesalius was challenged the work of Galen. This deemed over 1300 years of medical training deeply flawed as Vesalius had corrected over 200 mistakes which Galen had made. In 1543 Vesalius published ‘De humani corporis fabrica’ (on the fabric of the human body). Vesalius had changed surgery with the book having completed the first comprehensive study of human anatomy. Bleeding When a human loses 3 litres of blood without it being replaced they die. When guns started to be used in wars during the 16th century se- vere blood and limb loss became more common than before. Before this time hot irons were used to cauterise wounds. During the 16th century the same tools were used to cut hair as were used to amputate a limb. In 1537 a French barber surgeon called Ambroise Pare was sent as a battle- field surgeon to the Siege of Turin. As a surgeon he amputated limbs, at the time this was an enormously risky procedure, it meant pain and even more blood loss. His patients frequently bled to death before he could boil the cauterising oil. During his time as a battlefield surgeon Pare brought back to use of Ligatures to stem blood loss. The technique took nearly 100 years to be adopted as common practice amongst surgeons. Pain In 1827 16 year old Scottish medical student James Young Simpson at- tended his first operation, a breast removal. With no pain relief the surgeon had to perform the operation quickly. Simpson found the experi- ence so horrific that he temporarily gave up medicine, he then began to think about the importance of pain relief. In 1846 he received news that American dentist, William Morton had performed the first painless surgery using a substance called Ether. Ether was a very effective anaesthetic which had one drawback, it was extremely flammable. This was a problem in the gas lit hospitals of the time.Ether also irritated people’s throats and made them thrash about, not what the surgeon wants during delicate surgery. The need for a better anaesthetic was apparent. Simpson tok advantage of this and discovered Chloroform in 1847. The discovery was first made 15 years earlier by Doctor Samuel Guthrie after he mixed 2 gallons of whiskey with 2 pounds of chlorinated lime and fed it to his daughter. Shortly after she passed out. Guthrie advertised it as a stim- ulant and failed to realise Chloroforms anaesthetic qualities. Infection In 1847, the 29 year old Ignaz Semmelweis began working in the maternity unit of the Vienna General Hospital. He noticed hundreds of women were dying of Childbed Fever. The cause and cure for the disease is unknown. In the hospital there are 2 units, 1 run by midwives, the other by doc- tors. The mothers in the doctors part of the hospital are 9 times more likely to die of childbed fever. A doctor friend of Semmelweis cut his hand whilst performing an autopsy, he was dead within a few days. His autopsy results revealed the symptoms of childbed fever. As a response to this Semmelweis posted a notice on the surgery door instructing doc- tors to wash their hands in chloride of lime before and after they saw to their patients. This notice was very unpopular with Semmelweis’ peers. Doctors found the hand washing tedious and time consuming and found it to be pointless. Semmelweis hung around the wards day and night and forced his colleagues to wash their hands properly. The hand wash- ing worked, deaths from childbed fever fell from 10% to less that 3%. In 1860 Semmelweis published a book about his findings, ‘Etiology, Concept and Prophylaxis of Childbed fever’.
-
Upload
david-gaskell -
Category
Documents
-
view
223 -
download
1
description
Design boards I have produced for my final outcome to the web design brief.
Transcript of Design for Web boards
DESIGN FOR WEB / DIRECTION BOARDS
Website Content
From previous mistakes designing the website I realised I needed to edit the content, so that each page had a similar amount of text. The outcome can be seen below.
Home Page
This website will briefly explain the four key developments and the peo-ple who made them that took surgery from an optimistic form of surgery, to the science it is today.
Anatomy
In 1536, Andreas Vesalius made the first comprehensive studies into hu-man anatomy. He took the rotting body back to his house, boiled the skin off the body and re-assembled the bones one by one to create and accurate human skeleton. After he had successfully identified all parts of the hu-man skeleton. He did the same process with other dead bodies for the muscular, organ and nervous systems. Through his investigations Vesalius was challenged the work of Galen. This deemed over 1300 years of medical training deeply flawed as Vesalius had corrected over 200 mistakes which Galen had made. In 1543 Vesalius published ‘De humani corporis fabrica’ (on the fabric of the human body). Vesalius had changed surgery with the book having completed the first comprehensive study of human anatomy.
Bleeding
When a human loses 3 litres of blood without it being replaced they die. When guns started to be used in wars during the 16th century se-vere blood and limb loss became more common than before. Before this time hot irons were used to cauterise wounds. During the 16th century the same tools were used to cut hair as were used to amputate a limb. In 1537 a French barber surgeon called Ambroise Pare was sent as a battle-field surgeon to the Siege of Turin. As a surgeon he amputated limbs, at the time this was an enormously risky procedure, it meant pain and even more blood loss. His patients frequently bled to death before he could boil the cauterising oil. During his time as a battlefield surgeon Pare brought back to use of Ligatures to stem blood loss. The technique took nearly 100 years to be adopted as common practice amongst surgeons.
Pain
In 1827 16 year old Scottish medical student James Young Simpson at-tended his first operation, a breast removal. With no pain relief the surgeon had to perform the operation quickly. Simpson found the experi-ence so horrific that he temporarily gave up medicine, he then began to think about the importance of pain relief. In 1846 he received news that American dentist, William Morton had performed the first painless surgery using a substance called Ether. Ether was a very effective anaesthetic which had one drawback, it was extremely flammable. This was a problem in the gas lit hospitals of the time.Ether also irritated people’s throats and made them thrash about, not what the surgeon wants during delicate surgery. The need for a better anaesthetic was apparent. Simpson tok advantage of this and discovered Chloroform in 1847. The discovery was first made 15 years earlier by Doctor Samuel Guthrie after he mixed 2 gallons of whiskey with 2 pounds of chlorinated lime and fed it to his daughter. Shortly after she passed out. Guthrie advertised it as a stim-ulant and failed to realise Chloroforms anaesthetic qualities.
Infection
In 1847, the 29 year old Ignaz Semmelweis began working in the maternity unit of the Vienna General Hospital. He noticed hundreds of women were dying of Childbed Fever. The cause and cure for the disease is unknown. In the hospital there are 2 units, 1 run by midwives, the other by doc-tors. The mothers in the doctors part of the hospital are 9 times more likely to die of childbed fever. A doctor friend of Semmelweis cut his hand whilst performing an autopsy, he was dead within a few days. His autopsy results revealed the symptoms of childbed fever. As a response to this Semmelweis posted a notice on the surgery door instructing doc-tors to wash their hands in chloride of lime before and after they saw to their patients. This notice was very unpopular with Semmelweis’ peers. Doctors found the hand washing tedious and time consuming and found it to be pointless. Semmelweis hung around the wards day and night and forced his colleagues to wash their hands properly. The hand wash-ing worked, deaths from childbed fever fell from 10% to less that 3%. In 1860 Semmelweis published a book about his findings, ‘Etiology, Concept and Prophylaxis of Childbed fever’.
DESIGN FOR WEB / DIRECTION BOARDS
Images of a surgeon and syringes. This is connected to surgery. These graphics will make up the home page image.
Above are four images of the people who made the core developments in the history of surgery. I will draw portraits, and include them in my website as the images on each page.
DESIGN FOR WEB / DIRECTION BOARDS
ANATOMY
BLEEDING
PAIN
INFECTION
I took the elements that can be seen on the previous page and cre-ated this evil doctor character.
The evil doctor would become an key part of the design. Being used in the logo.
The portraits I drew which are ready to be used in the website design.
HOME
ANATOMY
BLEEDING
PAIN
INFECTION
The buttons I will use for the website. The colours relate to the corners of the website logo image. This way people will have another signifier for what page they are reading.
DESIGN FOR WEB / DIRECTION BOARDS
206 PIXELS X 206 PIXELS
206 PIXELS X 409 PIXELS
10 PIXELSPADDING TOP
5 PIXELSPADDING LEFT AND RIGHT
1024 PIXELS X768 PIXELS
616 PIXELS X768 PIXELS
103 PIXELS X 51 PIXELS
103 PIXELS X 51 PIXELS
103 PIXELS X 51 PIXELS
103 PIXELS X 51 PIXELS
103 PIXELS X 51 PIXELS
103 PIXELS X 51 PIXELS
BLEEDING PAIN
INFECTION
This website will briefly explain the 4 developments and the people who made them that took surgery from an optimistic form of surgery, to the science it is today.
HOME ANATOMY
ANATOMY
BLEEDING
PAIN
INFECTION
The scamp
For ease when coding the website and when creating the images I made a digital scamp that tells me the measurements of the website. I designed the scamp around the content, this way I have reduced the amount f scrolling needed to an absolute minimum.
Design example
A mock-up of the page design I created in Illustrator. At this point I was ready to code the website in Dreamweaver.
DESIGN FOR WEB / DIRECTION BOARDS
HTML Code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>A Brief History of Surgery</title> <link href=”stylesheet.css” rel=”stylesheet” type=”text/css” /> <script type=”text/javascript”> function MM_swapImgRestore() { //v3.0 var 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_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,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_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;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.0 var 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> </head> <body onload=”MM_preloadImages(‘images/home1.png’,’images/anatomy1.png’,’images/bleeding1.png’,’images/pain1.png’,’images/infection1.png’)”>
<div id=”container”> <img src=”images/homepage.png” width=”1024” height=”768” alt=”loopy doc-tor” /> </div id> <div id=”header”> <img src=”images/websitelogo.png” width=”206” height=”206” alt=”header image” /> </div id> <div id=”navigation”> <a href=”index.html” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘home page button’,’’,’images/home1.png’,1)”><img src=”images/home.png” alt=”home page button” name=”home page button” width=”100” height=”50” border=”0” id=”home page button” /></a> <a href=”anatomy.html” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘anatomy page button’,’’,’images/anatomy1.png’,1)”><img src=”images/anatomy.png” alt=”anatomy page button” name=”anatomy page but-ton” width=”100” height=”50” border=”0” id=”anatomy page button” /></a> <a href=”bleeding.html” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘bleeding page button’,’’,’images/bleeding1.png’,1)”><img src=”images/bleeding.png” alt=”bleeding page button” name=”bleeding page button” width=”100” height=”50” border=”0” id=”bleeding page button” /></a> <a href=”pain.html” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘pain page button’,’’,’images/pain1.png’,1)”><img src=”images/pain.png” alt=”pain page button” name=”pain page button” width=”100” height=”50” border=”0” id=”pain page button” /></a> <a href=”infection.html” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘infection page button’,’’,’images/infection1.png’,1)”><img src=”images/infection.png” alt=”infection page button” name=”infection page button” width=”100” height=”50” border=”0” id=”infection page but-ton” /></a> </div id> <div id=”column1”> This website will briefly explain the four key developments and the people who made them that took surgery from an optimistic form of surgery, to the science it is today. </div id> </body> </html>
DESIGN FOR WEB / DIRECTION BOARDS
CSS Code
@charset “UTF-8”; /* CSS Document */ body { font-family:”Courier New”, Courier, monospace; font-size:9px; font-weight:bold; text-align: justify; color:#000; line-height:1.3em; } #container { height:768px; width:1024px; background-color:#FFF; position:absolute; margin-top:0px; margin-left:0px; } #header { height:206px; width:206px; background-color:#FFF; margin-left:103px; position:relative; } #navigation { width:206px; height:160px; background-color:#FFF; margin-left:103px; position:relative; }
#column1 { width:196px; height:392px; background-color:#FFF; position:relative; margin-left:103px; padding-top:10px; padding-left:5px; padding-right:5px; }
DESIGN FOR WEB / DIRECTION BOARDS
Final website
The five pages of the website as they will appear in a browser. This brings the web design brief to a close, it has been a steep learning curve for sure.
