Digital Communication – Assignment 6 – Evaluation of Website

Task 1: 4 page functioning website to promote Brighton as a digital hub

Website can be found as a .zip file uploaded on Smart Assessor.

 

Task 2: Evaluation for the design process

Criteria 3.1

Technical Qualities

I build my website using the text-editing software Notepad ++. I choose this software because I was familiar with it. The software supporters tabbed editing, which allows a user to work with more than one files in the same window. The software helped me with technical details of the coding such as automatically creating a close tag for settings such as heading, paragraph or meta tags. It also separated my code into different colours such as text in brackets were in purple, tags were in blue and attributes for elements in red. This gave me an indication that my code was correct. For example, if I had incorrectly wrote a line of code, I would be aware it was incorrect because of the colour of the setting or attribute. I learnt many different coding techniques during my web build project. In HTML, I created tags for titles, links, lists (including a navigation bar) and images.

I tested the web build while writing the code for the website itself by saving each page as a .html document and having them opened in my browser. I had to save each document I was editing and then refresh the browser before testing a feature I had created. Each HTML, CSS and image documents had to be saved in the same folder for this to work correctly.

split screen
A common look on my computer screen when coding for my website build. This enabled me to test the features while coding.

 

Aesthetic Qualities

I also learnt CSS techniques including using text attributes such as text decoration and font-family, and layout attributes such as padding, margin, display, and float to alter the layout of elements on the page. This was something I had a problem with throughout my web build. There were several elements I wanted to float to the left, to the right and some to the center all in different orders. Despite at first the elements not positioning themselves correctly, I used W3 schools to research the best methods to correctly re-position elements. An attribute I used to center elements was “display: block;” and setting a padding attribute. I also used float attribute to move elements to the left or the right of the page. Both of these attributes were used when writing the CSS stylesheets.

coding up close
CSS attributes to center the header image

Page Content

The content of my website includes headers, titles, paragraphs of text, images, links and embedded elements such as a video and a Google map. For elements where there are more than one of them on a page, I had to include a ‘class=’ inside the ‘div’ tag in order to differentiate between the elements when styling them in CSS. My ‘events’ page was the page that had the most content. This page promoted and detailed a number of digital events in Brighton. Each event was accommodated with an image, a heading, a paragraph of text and an external web link. If I was going to build this page of my website again, I would add another image for each event and write more promotional content. In its current state, the user may not receive enough information from this page. The disadvantage of this is that visitor may not feel satisfied and are likely to leave and browse another website instead. Overall, I believe the page content is of good, professional quality.

 

Planning and Preparation

The planning of my website was part of the pre-production stage and included moodboards, wireframes, research and planning notes. With the website having the theme ‘Brighton as a digital hub’, this enabled me to get straight into researching Brighton’s digital activity. This gave me the idea of promoting Brighton’s events including conferences, festivals and conventions as the main content of the website. A moodboard of logos from digital companies gave me influence to create my own logo for the website. This is where the colour-scheme for the website was decided as blue and light grey were used in the logo and then stayed consistent when creating the web build incorporating the colours into the navigation bar.

This slideshow requires JavaScript.

The screenshot above shows a wireframe that was created in the pre-production stage when ideas where created for the content and layout of the home page. The second screenshot is of the finished home page after the coding and production of the website. It is clear that there were a few changes made between the two stages of the project. Firstly, the social media links were added as part of the navigation bar in order to leave the header logo separated. It looks more professional with the logo centered and separate to the body of the page. A slideshow of images that were planned had changed to four images separate. This was because I did not have enough time to learn the coding for the feature and I had prioritised other features of the website such as the styling of text and images in the events page. Three text boxes were replaced with one text box floating to the right of the images. The reason behind this was that I wanted to save content for the more detailed events page.

Overall, the planning and preparation for the project enabled me to gather consistent and smart ideas as a basis for the content, while allowing myself to produce a professional promotional website effectively.

Moodboard logo designs
Moodboard created in the pre-production stage used as influence when creating our website’s own logo.

Time Management

Managing my time was essential to the project. I set a target to complete the website build in a week with three hours each day allowed for work on the website. I managed to achieve this target. Initially, I would have had an extra day to work on the production stage of the project. However, due to an increase in duties in my workplace, I had to cancel the day in the production studio. This affected my website build because I had less time to learn how to code effectively with HTML and CSS. If I had more time to work on my website build I would send more time experimenting with these techniques and features (i.e. CSS3) to improve both the content and layout of the website.

 

Technical Competence

In order to complete the project effectively I had to ensure I understood the training provided. There were two training courses I worked with to build my skills in coding in HTML and CSS. W3schools provided tutorials for all features of these website languages. I also made the decision to purchase an online course from Udemy, created and taught by Rob Percival. This allowed me access to watch and learn from video tutorials which included speech support from the instructor and coding activities to test the learner. These two courses benefited my coding skills, improving them in a quick time period, while allowing me to put what I had learnt into practice and part of my website build. I personally found W3schools more useful as there were text tutorials and it was easier and quicker to skip features that I did not want to include in my website.

 

Testing of the website

After completion, of the website build, I decided to test it to look for faults with the content or the navigation. One problem I faced when testing the website was that when I copied the files over to a different computer using a different resolution monitor, my images in the events page were positioned incorrectly. The line breaks were not working as each image was positioned slightly to the right of the previous image. To solve this problem, I had to separate each image but adding a ‘clearfix’ div tag to the HTML for each image. In the CSS stylesheet for the events page I had to write the code ‘.clearfix{clear:both;)’. When I saved the documents and refreshed the page, this separated each image and therefore each section (image, heading and text) without causing the layout to collapse. This result of this is that the page looks professional and neat. I knew all navigation features were correct because the site ran smoothly in terms of clicking from page-to-page and clicking on email and web links.

coding up close 2
HTML coding from my website that shows how I solved my problem during the testing stage – ‘clearfix’ is inserted in the div tag.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s