Week 1 - HTML and CSS:
The work that brought my entire portfolio project to a beggining is the work on the 'Fables of Aesop' from the book of Aesop. Being an Interface desing project, you could probably guess that the work did actually involve the fables as much as the primary shaping of some of them to begin what looks to resemble a webpage. This work was my first piece on this course and first time ever using the 'Brackets' software.
For this design I were merely starting my journey using HTML and CSS, alongside being introduced to the module as a whole. And before everything, I of course learnt about how to layout my work in easy and accessable documents so therefore I could begin the process of creating my first 'index.html' page. For this unstyled HTML page, I simly got to grips with titles, creating headers and bodies, headings, paragraph structuring, alongside getting used to HTML formatting. I called this first piece of basic web design, aesop's unstyled.
For the second part of this opening week, I had to add some styling to these Aesop's fables, and the best way to do this on brackets is to add a 'stylesheet' for some basic formatting. The way I planned about this was to add a slightly old aesthetic to the page, and I think for the first time trying this I did succeed to an extent. I began by making the headings a brown colour, as if they had withered slightly, alongside using a serif font that looked quite 'medieval' to myself. Also on the aesop's styled document I added lines to split each of the Fables from one another, demonstrating a use of page division, which also is explored further on in the weeks.
For this design I were merely starting my journey using HTML and CSS, alongside being introduced to the module as a whole. And before everything, I of course learnt about how to layout my work in easy and accessable documents so therefore I could begin the process of creating my first 'index.html' page. For this unstyled HTML page, I simly got to grips with titles, creating headers and bodies, headings, paragraph structuring, alongside getting used to HTML formatting. I called this first piece of basic web design, aesop's unstyled.
For the second part of this opening week, I had to add some styling to these Aesop's fables, and the best way to do this on brackets is to add a 'stylesheet' for some basic formatting. The way I planned about this was to add a slightly old aesthetic to the page, and I think for the first time trying this I did succeed to an extent. I began by making the headings a brown colour, as if they had withered slightly, alongside using a serif font that looked quite 'medieval' to myself. Also on the aesop's styled document I added lines to split each of the Fables from one another, demonstrating a use of page division, which also is explored further on in the weeks.
Week 2 - Navagating and layouts:
In the second week of this project, I began further work on creating another website with the brackets knowledge I had already worked on, however, with the addition of navagation and 'linking' pages together with a home, about and find us page for a bed and breakfast, named 'Peatcutter's croft', and I simply began with the creation of the simple Peatcutter's Croft (unstyled) page where the links where created but didn't in fact take you to any other page.
After this, I began to further my work in 3 ways. Firstly I made the stylesheet to add some vibrancy to the page, and then duplicate the page twice by editing the pages to be different and for the links in the hotbar at the top of the page to in fact take you to new pages. Lastly in this progress, I added a columned layout to my work, making 2 different divisions of the on screen content and then forming a 2 column layout.
Finally, I created a 3 column layout where the content is split 3 ways over the page, to further develop my skills surrounding layout, especially with 'margins' and 'padding'.
After this, I began to further my work in 3 ways. Firstly I made the stylesheet to add some vibrancy to the page, and then duplicate the page twice by editing the pages to be different and for the links in the hotbar at the top of the page to in fact take you to new pages. Lastly in this progress, I added a columned layout to my work, making 2 different divisions of the on screen content and then forming a 2 column layout.
Finally, I created a 3 column layout where the content is split 3 ways over the page, to further develop my skills surrounding layout, especially with 'margins' and 'padding'.
Week 3 - Catch up, CSS3 and typography:
Week 4 - Compatibility, responsive and SEO:
For this week of interface design, I used a pre-made page in brackets for the 'Six great web designs', however, made plenty of edits to the page myself. It also helped me get used to imagery added onto web designs and to get the basics of web design nailed down (background colours, divs, etc). The whole purpose of the week however, was to add fluidity to the page, allowing the images in columns on the page to flow down when the screen is minimised/maximised so you can still see all the images if you were to scroll down.
In this week, I began to try and add interactivity through brackets, creating a forum page on this website on the hotbar place at the top of the page, saying 'FEEDBACK'.
Also, If you were to notice with the Peatcutter's croft 3 columed layout, there is a notice/warning advising you that the page is in fact not the actual Peatcutters official website. This pop up is not created through HTML nor CSS, but Javascript, which I did not in fact create myself, but look forward to doing very soon.
Also, If you were to notice with the Peatcutter's croft 3 columed layout, there is a notice/warning advising you that the page is in fact not the actual Peatcutters official website. This pop up is not created through HTML nor CSS, but Javascript, which I did not in fact create myself, but look forward to doing very soon.
From this week onwards, I began to develop my first initial assingment for this interface desing module. It began by working on going through an 'accessibilty checklist' that marks off the common features that a website should contain to make it accessible for all kind of users. I applied this to the website I planned on revamping called '15th Airedale Scouts' by making notes for my evaluation on the site.
This week I took a chance to fully try and critique my chosen website in preparation for my evaluation report. This was made a lot easier by my previous weeks research on accessibility, but I explored other avenues this week.
Focus mainly turned to coding and the behind the scenes research on the site. I used validators to test the coding, checked for meta data, sufficient coding, and how the site is on other types of browsers and devices.
Focus mainly turned to coding and the behind the scenes research on the site. I used validators to test the coding, checked for meta data, sufficient coding, and how the site is on other types of browsers and devices.
The final stage of my research for evaluating and developing the scouts site I had chosen was regarding the 'Usability' and 'User experience that the site offers to its audience. With Usability, there is also a developed checklist that helped me construct my report that disscusses how appealing and inviting a website is, therefore leading to the constrcution of ideas for my own resdesign on how I can better the site in terms of its usability. Of course, the main purpose of the exercise is to develop my own ideas, however, it has really helped wrap up the final factor I need to consider for my evaluative report.
User testing is a valuable method to use when redesigning a website, however with the completion of my report and it already being finalized, I decided to partake in the user testing just for my own benefit.
From my testing, I wanted to gather other opinions and views so I collected 3 users (personas) to have a blind look at the site.
With my personas being uneducated in website design and the scouts itself, I set out on making my research questions very simple, from "What do you feel the site lacks compared to other sites you have seen?" and "Can you tell me what the websites main purpose is?".
I did tell the personas that there were no right or wrong answers to my questions, and that I wanted fully honesty and engaged participation to make their findings as precise and critiqued as they could be. The way in which I completed the user testing was rather straight forward and conventional for themselves, by simply having them sit in front of a computer screen in an office setting and maximising the site on the screen for to see first hand their expressions and primary thoughts towards the site.
From my testing, I wanted to gather other opinions and views so I collected 3 users (personas) to have a blind look at the site.
With my personas being uneducated in website design and the scouts itself, I set out on making my research questions very simple, from "What do you feel the site lacks compared to other sites you have seen?" and "Can you tell me what the websites main purpose is?".
I did tell the personas that there were no right or wrong answers to my questions, and that I wanted fully honesty and engaged participation to make their findings as precise and critiqued as they could be. The way in which I completed the user testing was rather straight forward and conventional for themselves, by simply having them sit in front of a computer screen in an office setting and maximising the site on the screen for to see first hand their expressions and primary thoughts towards the site.
For the penultimate task of the module in this semester I was intrigued by my lecture on further methods of coding and a slight insight into what the future could hold if I were to persue a career down the programming and coding avenue. This lecture was of course alongside working on dthe development of my website which I found myself slightly struggling with, however, lookng back at my evaluation helped me move forward with the my site and hopefully has advanced it, in addition to some tutorials and re-watching of previous lectures.
I also recieved my grading for my evaluation which included feedback which in turn has hopefully helped with the progession of my website and even this portfolio site.
I also recieved my grading for my evaluation which included feedback which in turn has hopefully helped with the progession of my website and even this portfolio site.
Although this week in the module is called 'one-to-ones' this is the final teaching week for this module in which I completed my web redesign and this portfolio site on. I feel this module has been a learning curve, as I have struggled, learned a lot of the coding side of digital media in which I haven't encounted before, and then progressed to the position that it has left me in today. I feel the course has been highly beneficial and interesting to myself, as I do majorly enjoy creative modules over more academical and literacy based ones that I have occured through years of learning.
I if you would like to view my redesign through this portfolio page, it is here for you to see by clicking on the final link below:
15th Airedale Scouts - me21mws@leeds.ac.uk - redesign.
I if you would like to view my redesign through this portfolio page, it is here for you to see by clicking on the final link below:
15th Airedale Scouts - me21mws@leeds.ac.uk - redesign.