interactivedanwen

Interactive Media Work main site (dashboard)/web author blog. Smile and interact?

Sitemap

Leave a comment

 

Some aspects of design maybe too complicated to achieve but I’ll try my best to embed as many planned features as possible.

Advertisements


Leave a comment

Research on other websites

Always learn from the competition just make sure you take inspiration rather than shamelessly clone them. You don’t want to get sued- Quote by me.

In all seriousness, researching competition is really important in terms of inspiration and giving you an idea on what works and what doesn’t. So I surfed around the net for some websites that could inspire me.

NHS 

The NHS website is probably the biggest medical website in the UK. It’s an information website that stores health/ medical information, advice, news, careers in the nhs and more. In short is a huge database for health solutions in the UK.

Visuals and presentation: Clearly there’s an emphasis on a clean look for easy access rather than looking artistic and pretty, the NHS website’s appearance is simple but not any less professional looking. Whilst there’s only a grey background and the colour palette doesn’t go beyond the colours of the NHS logo, the site still looks up to date and aesthetically sound. The shadowing on the bars and panels makes the site look less flat; the huge slideshow advertises information in a sleek way too. Simplicity is the right style for a site like this, however it’s still important to look pretty and professional. Sites with flat colours, unpadded text and general untidy layout gives an untrustworthy impression to users.

Interaction: Hovering on the navigation bar immediately brings up a drop list of other links and categories. This is particularly convenient feature for the user. Also interesting to note is the bold ‘All A-Z topics’ option at the bottom of the list, it allows the whole to be shrunken down for easier viewing. The sub-menus can be moved around, so users can customise the site to their own tastes. What I find interesting is the enormity of the search box located in the corner of the page, it further shows that NHS is a no nonsense site for those looking for information about health.

ATCM  

ATCM is the largest organisation that practises TCM (traditional chinese medicine) and they have many branches in the UK. Their website is a small information hub on Chinese Medicine and there’s also a login for members of the ATCM (my dad included). Unfortunately (or perharps fortunately since they’re a rival) the site for such a juggernaut in Britain’s TCM industry is relatively bad. No actually is rubbish. So much in fact that I was rendered speechless.

Visuals and presentation: The background and colour scheme makes no sense what so ever, it doesn’t match the logo (which itself is filled with white spaces in the wrong places) and neither does it look eye-pleasing. It is almost as if the web author just put the background as his/her favourite colour. Though that’s not the worst of it, the links and navigation element are tiny, hard to distinguish and resembles more of the text that companies don’t want you to read at the bottom of the page than navigation links. If you dare to scroll down the page you’ll be greeted with a banner made in Microsoft PowerPoint 2003 edition. Layout is just as appalling: the text margin on both sides doesn’t even match, one’s wider than the other, though you probably wouldn’t bother reading the text anyway. And why is there a picture of a flower in the top right corner?

Interaction: The links are actually click-able but when you go deeper into the site you’ll discover that some text that are decorated with the underline (what you’d associate with links) does absolutely nothing. They shouldn’t do anything because they’re subheadings, but they shouldn’t have an underline and change of colour upon hovering either that’s what links should do.

BUPA

BUPA is the private equivalent of NHS and it’s the largest private healthcare organisation at that. Therefore it also provides information on healthcare albeit there’s more of an emphasis on payments and insurances as well as what BUPA offers. In that sense it’s closes to the site I want to produce since it’s both marketing based and information based.

Visuals and presentation: The colour scheme takes its palette from the logo: hovering over links will even turn them from blue to green. Navigation buttons are big and professional (subtle shadowing really helps) whilst remaining simple. The contact us box stands out thanks to being the only green box on the page (this still adheres to the overall colour scheme though). Photos of people are relevant to the content and the slide is another neat touch. Much like the NHS site the overall look is very clean and pure. To top it off layout is always consistent through out the site, while all pictures in the boxes are the same size.

Interaction: The members button and login button are located in an easy to see place. When hovered over, links change appearence seamlessly making it  identifiable. Navigation panels’ appearances stay selected so you know which sections you’re on at all times. Every link works and there’s a lot of interaction available to users on the site.


Leave a comment

Task 2- Design Brief

Description of Client:

Dr Xiaotie Huang, male, owner of a chinese medicine shop, in his 50s.

Contact Details:
Phone number: 07780774347 Email: drxthuang@hotmail.co.uk

Reason for website requirement:

Wants a site to advertise his shop and display other information about chinese medicine.

Desired brand identity:

Formal, wise, professional and clear identity/personality must be conveyed. Almost like conveying the website as a doctor.

Audience:
Mainly working class, Mid aged men and women (aged 30-50 years ), people interested in or in need of alternate treatments and Chinese medicine. Resident near the shop (Croydon). People with an interest for Chinese culture (using Chinese imagery such as calligraphy). The audience are not experienced with technology and websites so navigation will need to be clear and simple.

Purpose and aims for website:
To gauge awareness for the shop and inform people about Chinese Medicine. To build relationship with the costumers and promote the clinic and TCM in general.

What the users want:

  • Information on the shop, what it does, sell and knowledge  on Chinese Medicine.
  • An online interactive guide about what type of Chinese Medicine cures what and the potential of it.
  • An accesible website- the target audience did not grow up with techonolgy so the website wold have to be easy to use so that even the most technology illiterate can use it (for one my parents/client needs to be able to use it).

Measuring success:

Adding a widget to the site that counts the number of visitors or use an external software (i.e Google analytics).

Accessibility:
Easy to use interface, users should be able to access information they want efficiently and quickly.

Devices necessary for access:
Compters (laptops and desktops), tablets and smartphones. Target audience is most likely going to be using computers, (not very tech savvy) since the subject matter is ancient and traditional rather than futuristic. However I mustn’t rule out those that own smartphones and tablets as they’re are enormously popular amongst

Cost to develop and maintain:

Client is allowing me to handle maintaining and developing the website.

Aesthetics:

It’s more important to ensure that the website’s usability is number one priority, clear aesthetics are important but should compliment the user’s convenience when using the website. The website has to also convey Chinese culture so Eastern deco should be incorporated in moderate amount. Green and red colour scheme to match the colour of the shop.

Content:

  • Brief introduction to Chinese medicine. Shop address and contact details.
  • List of illnesses (with pictures) treated and what method are they treated with.
  • Popular products available. Map to shop. Why choose Chinese Medicine page.
  • Pictures of store.
  • Introduction on acupuncture, massages and herbal medicine.

Timescale: 

Gantt chart for web design schedule: https://www.tomsplanner.com/public/dhwebgantt/

Screenshot of Gnatt chart.


Leave a comment

Task 1.4: Building websites practise

There are plenty of online tutorials (W3Schools is especial concise and useful) but I’m the kind that prefers a good book in my hands when learning things so instead I used (mainly) a brilliant book to practise building my first website. Here I screenshot my efforts.

Me coding my first webpage in Dreamweaver. I’m discovering new things every second.

Messing around with basic Javascript.

My first webpage/home page. Pictures link at the top (in the navigations bar) is grey because my mouse (invisible when you take a screenshot) is hovering over it.

The rest of the page of my first webpage. I added a top of page button that actually works! Clicking on the WordPress or Blogger also takes you to either one of my blogs. Gone a bit link mad here.

Upon clicking on one of the pictures links it takes you to this page.

Click on one the, yep you guessed it, videos links and it takes you to this page.

 

The HTML code I typed to create this simple website (home page):

Before this would have all looked too intimidating and nonsensical to me but now thankfully it doesn’t.

 

Now time to show the CSS code I typed to style my site:

It’s shorter than the HTML document but it does tremendous things.


Leave a comment

Task 1.3: HTML report

HTML is simple. So simple that at times that it’s a wonder that complex websites are built from HTML. Nonetheless if HTML had no depth it wouldn’t be as widely used. During the last few task I found plenty of tags and here I’ll be giving them a go myself- and this probably counts as just scratching the surface.

 


<br>: Inserts a line break.

<center>: centre-alignes text.

<b>: Makes text bold.

<font color=””>: Defines the font colour.

<u>: Underlines text. <i>: Makes text italic.

<font face=””>: Specifies the font style.

<table> : Inserts a table.  <td>:

<input>: Used within a <form> element (which contains the url of where to send the information) to to allow user input information such as usernames.

<a> : Used to create links to webpages.

Other tags I’ve found in the previous task such as <meta>, <link>, <html> etc do not actually display on a webpage so I didn’t take screenshot of those. However this doesn’t they’re unimportant since what’s going on in the background in HTML is just as important as what people see.

HTML has evolved through out the years and thus many more advanced features have been tacked on to it by various people. While this is a good thing, considering that HTML can do more things then just basically define the content of the document, it has caused a lot of problems for web-designers. HTML tags can only be applied to a specify section, as websites need to look consistent you can imagine why it would be a headache for developers to type out <font colour> attributes for every heading in a multi-paged site. That’s when CSS comes in.

CSS is used to associate styles rules (or looks) to specific HTML elements. For example p{font-family: Arial} will make all the text in <p> (in other words paragraphs) have the Arial font. CSS rules are divided into to two sections: the selectors that indicates with HTML element the rule is applied to (‘p’ in this case is a selector) and the declarations which defines how the selector is styled (i.e. ‘font-face: Arial’). This obviously makes it much quicker for web-authors to style a particular element of the website whether it’s making all the headings red or indicating the font of every paragraph on the site. It can also be used to control the background colour and in CSS3, even the opacity of the backgrounds can be manipulated.

You can’t write a report about HTML without mentioning XHTML (released 2000) and HTML5 (work in progress). XHTML was created to make web authors follow more strict rules in order to build more compatible and effiencient websites. Rules include not using deprecated elements; closing tags must be used for every element and all attributes had to be in lower-cases. There were two versions of XHTML, the Strict XHTML (every rule must be follows) and Transitional XHTML (presentational elements like <center> could still be used). XHTML would be considered the ultimate version of HTML until HTML5 came along…

Bad: <p>My coding is <b>bad</p></b>
Good: <p>But my coding is <b>good</b></p>

^XHTML had another strict rule that required elements to be well formed and placed.

HTML5 doesn’t require web developers to close all tags (they’re very bad about making their minds up about this) and adds new elements and attributes to HTML’s wide selection of tags. For instance you can now embed videos with the <video> and audio with  <audio> tags whereas before you had to use Flash (which proved to be a compatibility nightmare). HTML5 is still in infancy but it’s already been utilised all over the web and predicted to replace the popular flash when it comes to adding multimedia to a website.

HTML5-logo.svg

Javascript (not to be confused with is another essential web language for those who are serious about creating professional websites. Javascript is used to add interactivity to otherwise static webpages (the amount of interactivity you can add with HTML is limited); allow communication of data between browser and server; make things move on the website; reate forms (pop up windows that ask for your username, search boxes and the like). It is defined by the <script> tag in HTML. It is widely used to make dynamic websites that need constant update on information (i.e. Movie sites) or just highly interactive. Nearly all big sites utilise Javascript.