As
always, evaluating your work is an important and necessary process for any
project or piece of work as it helps you to summarise the overall project and
reflect on what you have learnt and what challenges you have overcome.
When
starting my web design project, I felt very out of my depths and struggled to
grasp the technical vocabulary and felt like I was learning a completely new
language, which is exactly what it was; ‘Hypertext Mark-up Language.’ It took
me a long time to get my head around HTML and I began to feel very behind on my
work as I was reluctant to experiment due to lack of confidence. However, I
forced myself to begin watching Youtube tutorials and hired some relevant texts
to start to understand the basics. Instantly I began to understand that the
only way that I was going to learn is by trial and error and physically using
Dreamweaver. After I’d grasped the basics and had a clear idea from my proposal
as to what I wanted to create, I slowly began to gain some confidence and stopped
avoiding difficult challenges. By week 6 of production I had produced 6 basic
page layouts and began producing my content. It took my two weeks to research,
collect images and write up my website script however, it was part of the
process that was just as crucial as the design itself. At every stage I
tailored my content specifically to my target users of 9-11 year olds, to
ensure that the website would be consistent and stuck closely to my proposal. I
feel like the hours I spent into ensuring this was done properly has paid off
as my presentation feedback told me that there was no doubt that it was aimed at children
and they could see a lot of research and thought had gone into every stage.
After
feeling more comfortable with HTML, I had to get my head around another
difficult process; CSS, (Cascading Style Sheets). Initially this stunted me, as
I was unaware that HTML could not create the design for the website, and I felt
that I had to start from stage 1 and learn something that was not only
completely new but contradicting to HTML rules. To separate the two in my mind,
I told myself that metaphorically the HTML was the skeleton of the website and
the CSS was the clothes and accessories. This enabled me to understand that
without CSS the website would look like a shell and therefore understanding CSS
was my next challenge. After a lot of persistence I grasped the idea and used an internal style sheet, as
I preferred to have all my content together. Although some may see this as
more time-consuming than an external style sheet, I felt comfortable coding
this way and that was the most important thing for me considering it took me a
long time to feel secure in what I was doing.
Creating
my Robot characters was a fun and positive part of the web design process as
they were my main way of targeting my users and were something that I felt I
could create and produce successfully. From sketches to Photoshop images, I
feel like my Robot characters ended up exactly how I wanted, each
representing a different era, and during my presentation feedback they appeared
to be the most popular and received the most positive feedback. The feedback was received for my Logo, which involved creating a different robot holding a
globe to correspond with the website title ‘The Global Robot.’
During
my production stages I came across numerous challenges and times were I felt
like I had come to a halt and began giving up on my project. However, it was
these difficulties that provided huge learning curves for me and actually
allowed me to step back from the situation and find a solution or search for
help. This table documents these situations.
Issue:
|
How I dealt with issue:
|
Lack of confidence in HTML & CSS
|
Spent hours reading online articles, renting books and watching Youtube tutorials. Also asked for helped from colleagues and tutors who provided me with physical assistance and recommended helpful websites.
|
Trying to explain difficult concepts in simplistic terms for children
|
I researched my ideas, wrote out a website script and then went through and re-worded any parts that I thought were too complex or boring. For example instead of writing, ‘The mouse in computing, is a pointing device that functions by detecting two-dimensional motion relative to its supporting surface’ I would write ‘here is something that doesn’t like cheese, doesn’t squeak and isn’t afraid of cats..the mouse!’ and then explain how it worked in simple terms.
|
Not knowing target users technical knowledge and ability levels
|
I held an interview with my 9 year old cousin and asked him questions based on my website content, whilst specifically asking what terms he understood or found difficult. I then based my content on what I had found.
|
Trying to ensure each page/era had the same amount of content
|
The 1950’s obviously had a lot less inventions then the 2000’s so I took the most interesting and relevant inventions and ensured that each page had roughly the same amount of content. I also picked things that 9-11 year olds would most be interested in e.g. computer games instead of modems.
|
Trying to find colour images for old technology
|
It was difficult to find any images of 1950’s technology that were in colour, however in my feedback I was told that this is not an issue as children need to see black & white images to respect that we did not always have colour. I included both colour images and black & white to support both sides.
|
Lack of interactivity
|
I created roll-over speech bubbles that revealed a question and answer when the mouse hovered over them. I also included videos on each page.
|
Speech Bubbles pointing in wrong direction
|
I wanted the speech bubble to come out of the robots mouth and I had over-looked the fact that if the robot is on the right the speech bubble needs to point in the opposite direction. I resolved this by flipping the text and the bubble horizontally in Photoshop.
|
Image files coming up as broken
|
I realised that every time I moved my files around on my memory stick, Dreamweaver could not source the files. I therefore created set files and ensured I correctly ordered them and kept them in the write locations under a ‘www’ folder.
|
Positioning Images
|
I added each image into a set of tables to ensure that they did not move and did not rely on a series of individually positioned div’s and id’s.
|
Saving images for web
|
I saved each image as resolution 72 and made the background transparent to remove the white backgrounds. I then cut out all the white outlines that had been left on the image.
|
Lack of professional appearance
|
I added a thin black border around every image to make them look neat and located. I carefully considered colours and texts and re-made a professional navigation bar. I also added a footer with copyright details at the bottom.
|
Messy text positioning
|
By modifying the text to ‘justify’ the text automatically positioned itself around the relative images.
|
Too much text on page
|
I tried to insert images into the text to break it up and inserted videos to split the pages in two.
|
Not being able to see the ‘O’ in ‘The Global Village’
|
I specifically chose background colours that did not clash or interrupt the existing colours from the logo.
|
As well
as evaluating all the positives of my project, I think it is also important to
reflect on some of the areas that could have been improved or changed. One area
that I feel like my website may lack slightly is an extra element of
professionalism. I feel that the footer at the bottom works well for this,
however my header could have had a better positioning and maybe even some
separate icons to click on. A lot of websites have Facebook and Twitter links
at the top of their site, and because this was a child’s educational website I did
not think social networking links would be appropriate. However, maybe adding
separate links or images to the top header would have made it appear more
interesting and less like a title page. Another area in which my website may
have improved is less paragraphs of text. I wanted to get as much information
on the website but maybe if I had condensed the text or positioned it
differently it would not dominate the page as much. A final element which I
think may have improved my website is more interactivity and if I had the
design skills I would have liked to make the robots move in some way.
This
web design project has been one of the most complicated and challenging
projects I have ever completed, and at times I did not think I would be able to
complete what I had set out to do. It has taught me a completely new language,
and a different way of thinking that has inspired me to learn more about coding
and designing for the internet. I feel like I have successfully produced a
website that has stuck closely to my proposal and is representative of my
target users. It has helped me understand themes of usability, accessibility, innovation and functionality including how to correctly use colour, text and layout. Web design at times can be frustrating, stressful and incredibly
demanding, however it can also be hugely rewarding when you sit back and
admire what you have created from a set of codes. I am immensely proud of my
website and I am aware that there is still room for improvement and are
possible areas to develop, however as a first attempt of web design I am
confident in what I have produced. I can now appreciate the time, effort and
knowledge that go into creating websites and I have the ability to look more
deeply into a webpage interface whenever I am using the internet. I have enjoyed
designing for the internet and I am motivated to continue learning and
developing this skill.
No comments:
Post a Comment