Category Archives: Weekly Reflection

Weekly Reflection – Week 12

This week I had not formal lecture again but I did get set a task of replicating a small website in my seminar. It was a small 4 page website that used basic HTML and CSS. It taught me a few good techniques actually. Like how to use the CSS tag “float” to position content on a web page and how to can set a HTML class to an object and then use CSS to style that particular item differently from other similar items. For instance I might want to centre all my text on my page, for that I would use something like this:

HTML

<p>Lorem ipsum dolor sit amet, facer insolens nominati per ne, at vis dolorem contentiones, nec tincidunt cotidieque eloquentiam et. Fuisset laboramus hendrerit eu has, per quas habeo ne. Ex mea postulant maiestatis. Inani platonem has no, alia fuisset cu has. Eos ei causae sanctus docendi, ea ferri maiorum sadipscing ius. Mea natum elaboraret delicatissimi no.</p>

 

 

<p>Dicat exerci mucius usu at, sea viris minimum adolescens te, eleifend incorrupte an sit. Pri ad dictas referrentur suscipiantur. Ut nisl euripidis similique mea, sed at volumus officiis suscipiantur. Blandit elaboraret ei vim, sea vocent splendide ei, ius eu dicat interesset sadipscing. Case posidonium per ut, no vix tritani necessitatibus. Mea unum sonet eu, hinc iudicabit no vix.</p>

 

CSS

p {

text-align:center;

}

Lets say though, that for some reason I wanted the second paragraph to align to the left. Then I could use this code:

HTML

 

<p>Lorem ipsum dolor sit amet, facer insolens nominati per ne, at vis dolorem contentiones, nec tincidunt cotidieque eloquentiam et. Fuisset laboramus hendrerit eu has, per quas habeo ne. Ex mea postulant maiestatis. Inani platonem has no, alia fuisset cu has. Eos ei causae sanctus docendi, ea ferri maiorum sadipscing ius. Mea natum elaboraret delicatissimi no.</p>

 

 

<p class=”left”>Dicat exerci mucius usu at, sea viris minimum adolescens te, eleifend incorrupte an sit. Pri ad dictas referrentur suscipiantur. Ut nisl euripidis similique mea, sed at volumus officiis suscipiantur. Blandit elaboraret ei vim, sea vocent splendide ei, ius eu dicat interesset sadipscing. Case posidonium per ut, no vix tritani necessitatibus. Mea unum sonet eu, hinc iudicabit no vix.</p>

 

CSS

p {

text-align:center;

}

p.left {

text-align:left;

}

That way only the second paragraph would align to the left. This is a very basic application of the class tag but it could be used to create a much more advance style. I do think however that it may be better to create a new div rather than a separate class to provide better overall control. Making lots of different classes for similar objects could clutter the code and make things difficult to find if there was a mistake made or you wanted to make changes. Even so, it’s a new technique I’ve learnt and I used it to great effect to turn a 2 column page into a 3 column page using only one CSS sheet.

Weekly Reflection – Week 11

I’ve had no formal lecture in week 11, instead as a group we critiqued each others medium fidelity mock ups we had done weeks earlier. I received mainly positive feedback in regards to me designs but I also got some criticism, which I understood and thought was valid. I did two designs for a mock children’s clothing company and you can see the result of the first design here, and the second one here. The criticism I received was in regards to my product listings pages, particularly on my second design. It was noted that I had obscured some of the categories of products which could make it hard for people to find. I hadn’t taken that into account when I first designed the page but it became totally obvious was it was pointed out. Going forward I think I really need to concentrate on the usability of my designs and to make sure users can find the information they need. If I were to redesign the product listings page I would do it vastly different. I’d make all the categories   visible, while not giving prominence to any individual category.

Having my work critiqued by other people has shown me that a fresh pair of eyes can pick up things you didn’t notice. In the future I’m going to apply this to other designs I do and let other people look at them before I finalise them. There is a certain level of pride involved with design work and because of this some people find it hard to take criticism, I would like to think I am not one of those people. I think as long as the criticism is  constructive then it will benefit the design in the end by allowing you to improve and refine what you already have .

Weekly Reflection – Week 10

Week 10 was my first real look at usability and accessibility. These are both principles of web design. Usability looks at the experience of the user, is the website easy to navigate, can you find what you need quickly. Accessibility is very similar to usability, as it also focuses on whether a site is easy to use but in a different way. Does it use colours that are friendly to people who are visually impaired,  is it possible to navigate without the use of a mouse. So to more clearly define the two, a website is considered to have good usability if a person using that site can achieve what they set out to do quickly and with minimal effort. A site is said to be accessible if a user with disabilities can use and interpret the information.

I had never really considered accessibility when thinking about websites before. Usability is an obvious thing to think about when using the web because there is nothing worse than trying to work your way through a poorly design website. I had mentioned in an earlier post that direct.gov was one of the worse site to navigate because the information you wanted was buried under a mountain of other information and had not clear links to the things you needed. To my delight though, I have just found out that direct.gov no longer exists and has been replaced with gov.uk, which at a quick glance seem to be a lot better. When it comes to accessibility thought, it’s never crossed my mind that a site may be difficult to navigate because of personal disabilities rather than the site under achieving a basic design principle. Now its been brought to my attention thought its kind of opened my eyes. Its made me look at website in a different way and question some of the design choices. I’ve seen a lot of website with white backgrounds and grey text, in fact my blog has just that and so does a lot of WordPress. Its made me question, is that easy to read? For me its fine but I have good vision, for someone with bad eyes is it easy for them? After thinking about it, I’m actually not too sure it would be. The colours blend together and gives a poor contrast. So I’ve taken the decision that from here on my text will be in solid black. This should give better contrast and make it much easier to read for all. I’ve also made the decision to make my own WordPress theme which will hopefully provide better contrast overall. 

I’m going to be using this tutorial to help me do it, The ThemeShaper WordPress Theme Tutorial: 2nd Edition. The tutorial teaches you CSS and PHP, CSS I’m pretty new too and PHP I don’t really know at all, so this should be good for me and hopefully help me to learn something new. 

Update: After publishing this post I sat back as far away from my computer as I could and tried to read what I had wrote. In comparison to my older posts, I found that the black text made it far easier to read. It may sound silly sitting away from your computer trying to read the screen but by doing this I proved that better contrast means better accessibility.

Weekly Reflection – Week 9

Week 9 saw the introduction to web prototyping. Prototyping a website is the process of putting down you initial ideas quickly in a very rough format. This allows you to make changes easily and without much effort.

We devised mock up using the website moqups.com. Its a website that allows you to create visual web page mock ups quickly, using a simple drag and drop function. A series of pre-made objects, such as buttons and text input areas, allow you to apply different elements to you mock up. Although a simple tool, you can build a web page quickly and with little effort.

Although I found moqups.com easy to use I don’t think I’ll use it again. I felt as though it was actually hindering me rather then helping me. All the objects of the age are pre-made and so this restricted my imagination. For me just drawing by hand is much better because I’m not limited to what I can do and it allows me to go annotate my work. I can even write the code on the paper or make changes easily.

I understand the importance of prototypes. By doing one it gives you the opportunity to showcase an idea to someone or quickly get down what you’re thinking. They are certainly something I’m going to use because it will help me to identify the code I’m going to use and how to organise it. I still haven’t mastered coding from scratch so learning how to effectively prototype  has been beneficial to me

Weekly Reflection – Week 8

The devil himself could not make a more evil and frustrating website

This week we looked at making the web functional. I used to work for a bowling alley as part of the sales and marketing team. At the time of joining the team the website they had was terrible! Customers couldn’t find the information they needed and I would get tons of calls from people who always had the same very simple questions. All the information was on the website, they just couldn’t find it. Not long after joining that team the company got a new director and I convinced him to get us a new website. Throughout my brief to the designer I constantly emphasized one sentence, “make it functional”. I wanted users to be able to find the information they needed, without have to endlessly search the site and get frustrated in the process. The website turned out pretty good, the repetitive phone calls stopped, people could find what they wanted and it was all designed from my original brief. You can look at it here. So I understand the importance of a functional website and how frustrating it can be when you can find the information you want. Even as a user myself, I hate going on the direct.gov website for anything. Its cluttered with so much jargon and crap that its really hard to find what you want. You get to the point where you can’t find what you need so you end up spending 20 minutes looking for a phone number to ring, only to find yourself speaking to a robot… Very frustrating! The same can be said for the DVLA website too. Pure evil manifested into code. My advice, avoid at all cost!

There was something that I learnt this week that I found interesting. Studies have found that if we as users don’t find what we are after in 3 clicks then we look elsewhere. I like the idea of everything being reachable in 3 clicks. All websites should be designed with this concept in mind. Of course that may not work for every websites but its a great philosophy to follow.

Looking back at the past 8 weeks I think I’ve come along way in terms of my development. At the start of my course I knew nothing of CSS, now I can use basic code to style web pages. Something I couldn’t do before was create web sites using HTML, I can now. I’ve learnt about the incarnation of the world wide web and its founders. I’ve learnt about things that you may not immediately associate with the web like, colour theory and typography. So far I feel like I’m learning at a bit of a slow pace and I’m only taking baby steps but its all in the right direction and that’s what matters. I think I’m taking the Neil Armstrong approach, its one small step for me, one giant leap for my career.

So far I have enjoyed my uni course. I work almost everyday I’m off from uni just to pay my bills, which can be a bit of a strain, but if I keep positive and look at the end goal of getting a degree and a job I’m happy with then that’s all the motivation I need.

Weekly Reflection – Week 7

This we well delved further into CSS. I’m beginning to see how powerful it actually is.

We were given 4 paper website templates that we had to code into HTML and then add CSS elements. I annotated the papers with HTML a few weeks back and this week I wrote the CSS for one of them on the back of the paper. Once that was done I coded the website into Dreamweaver. To be honest even though CSS is still pretty new to me I found that once I started to code it out I could do it with little effort. I had already wrote it down on paper and I think this certainly helped me out. By handwriting it, it helped me to identify where to start and in what order to do things. When I moved on to one of the other templates that I hadn’t annotated with CSS I found it hard to work out a good structure to my code. I was uncertain of where to start and once I had put something down, then what to do next. I think to overcome this I should write it out on paper first. With the template in front of me I can quickly identify what needs to be done. This is something I’m going to do more often going forward. Print the page off and annotate it. Then once I’ve got the hang of how things should be structured then I’m sure I will find it easier to start coding right away.

So far this has been one of my biggest challenges on my course Its not the actual CSS code that I find hard but rather identifying a good working structure. I want my code to be neat and tidy and easy to understand. By keeping it that way it will put me in good practice and my work will be a better standard for it. I know now what I need to do though, write things out by hand before attempting to code them. That’s one positive thing I can take from this weeks learning because I know if I keep it up I will improve.

Weekly Reflection – Week 6

This week was all about Cascading Style Sheets or CSS as its more commonly known. CSS is a way you can style certain properties within HTML code. It was developed out of the concern that HTML had issues with determining the look and feel of a page. CSS is there to give you better control over the visual presentation of HTML constructed web pages.

Like many things on my course so far, this is the first time I’ve really worked with CSS. On first impression I would have to say I liked it. I liked it a lot! Its a great way tidying up your code and its gives you so much control over how your web page looks. Most of the things you can do in CSS you can do in HTML but the method is much more fluid in CSS and it speeds up the whole process. I like the idea of being able to get all my content in a page and then make some adjustments to the CSS code and change the whole look of the page in a few short lines of code. In theory, I could be wrong here and I am feel free to correct me in the comment section but I’m sure you could have two pages filled with identical content and all the same HTML but just two different CSS pages that would make them look totally different. If that true, that’s pretty amazing really because it allows you to edit an entire page after its been created using a few lines of CSS. CSS is defiantly an interesting new thing for me.

I actually really enjoyed the coding of CSS. I must have been born to be a web designer because I find all this stuff strangely therapeutic. Is that weird? I’m not sure. Anyway, its something I defiantly want to expand my knowledge in. I think it could become a very powerful tool set to have once I master it.

Have you learnt about CSS too? What did you think? Have you found it therapeutic or am I just a weirdo? Am I just a weirdo in general? Let me know in the comments!