HND1: Website and Digital Media

An additional bit of research.

Knowing there are some people who are visually impaired may struggle to understand what I am talking about in my website, I have tried to make it as easy to understand as possible, however in order for them to be able to understand the picture, I would need to describe my images underneath, because Wix doesn’t have a specific application to help people who are visually impaired, I would need to make it more obvious on my portfolio. Although this may not be ideal to have more information than I need, I feel it is more beneficial.

Screen Shot 2015-05-20 at 10.18.12

Screen Shot 2015-05-20 at 10.22.10

Screen Shot 2015-05-20 at 10.40.09

Screen Shot 2015-05-20 at 10.46.00


Final product.

Site address:



Portfolio page

Portfolio page

Photography page

Photography page

About me

About me

Wordpress blog link

WordPress blog link



Article page

Article page



Mobile View



Menu bar

Menu bar

Portfolio page

Portfolio page

About me

About me

Articles page

Articles page



Feedback on my website.

Good points:

  • Nice and simple design
  • Easy to read and look


  • Consider using a more professional photo
  • Contact menu can have more links like Facebook etc.
  • Maybe on the portfolio page, the pictures could go in a slideshow to show more of them
  • Spell ‘Fotography’ correctly
  • Be careful on the slogan at the top – may look like I am limiting myself to just photography?

I took on board with these comments, and I changed my photo to a single one of myself and made sure the other person wasn’t showing.

The feedback about the contact, although it would be nice to do this, I would need to set up a Facebook profile link first. Because I don’t want to have my personal Facebook linked to my website, I think it would be better to make a Facebook ‘like’ page people can click on and write on.

The third comment I wanted to do for my homepage, however there was not a setting available for this unless I perhaps upgraded.

I put Fotography because it was almost like a mini saying for the page, however because I want to keep it professional I put in the correct spelling for now.

The slogan at the top I considered taking out, but I wanted to also keep it, because it was a mini saying that I think relates a lot to me. Although it may look like I am purely interested in photography, as you look through my work you will see that I do far more than just this.

Making my website.

Starting out my website portfolio, I began with the homepage. I got a template online for free and I will use that as a baseline to form my own website. By having this as the baseline for me to work on also, I can keep roughly to the compositions. I have also decided to use Helvetica throughout my website as well, as it is a simple font to use for a website design, which is also very clean and crisp to look at.

The menu bar I wanted to keep really simple and not attract too much attention. I thought about having the selected word highlighted and have a rigid line in the shape of an arrow underneath, so you can see what page you are on at a glance. On the header also, I added my logo and put it in the corner. By putting things in the header area, it will not move no matter what page you are on – like a master page, but in a selected area.

On the footer also, I decided to add a few social icons, so people can share my work if they like the look of it. By doing this, I can hopefully gain more publicity and more people will be interested in seeing my work.

I also had a go at adding little effects such as a dropdown menu, I found it really hard at first to work, but after a few tweaking and playing around I got the idea of it. I really liked this style, because I have a lot of categories I can develop on for my portfolio work, it can categorise everything neatly and keep it all really simple.


I kept playing around with the homepage, because this will also show all of the images that I have produced so far. I decided on keeping my work in a neat grid format, making it easy to see and allow only the images to be the main focus. I want to keep to the theme of simplicity on my website, because I have found that simple websites appear to be the most effective.

For the pages of my portfolio, I wanted to keep the brief short and concise. I prefer having the text on the left, as the majority of people read from left to right. Keeping the image separate is also an important factor, because it doesn’t work too much against the design. I also thought about having buttons on my page such as a ‘next’ and a ‘back’, so you can go back to all of the images, or move onto the next one if you wish.

When I put it into a mobile view page, I noticed there were a few errors such as making sure that the type still fit etc, but this was an easy fix of adjusting the type slightly. I think that the layout works a lot better when everything is almost listed in the mobile site, making sure that nothing will overlap when you view it in this way.

When I look at some of my more personal pieces of work, I am unsure of what to write about them as I was not given a set brief to do this… instead, I have taken inspiration from Erik Johansson’s website in having a simple sentence to justify the picture. Because there was no particular reason in me making the image apart from to show what I am capable of, having a simple sentence is the entire page needs.

For my app page, I wanted to include the video tutorial I had used to navigate your way around so that the viewers saw the full potential of this app and to the extent I went for this project.

I also wanted to incorporate my blog into the Wix account, I wanted to keep my old blog separate to show the projects I do throughout my university course, but the blogs I will be posting on Wix are more like articles written related to more personal topics.

What to write in the portfolio page.

When writing about your work, you need to explain what the work is representing and the journey throughout. If you are designing someone else’s brand, you need to explain a brief history about it and what the brief is about.

What was the goal/point? What ideas did you get for it? What specific details did you include and why? What themes did you use?

If you included other features, be sure to explain why you introduced other features alongside with it that compliment what you have made. If the packaging were made into an animation, you would need to explain who helped you create it and what the idea behind it was about.

When you are talking about the piece of work, it has to stay precise and keep it simple. Personally, I prefer the way that Sagmeister & Walsh and Pearlfisher have described their work. What they have written is precise and to the point, only explaining the details which viewers only need to see.


De La Warr Pavillion ‘Ladybird by Design’

 For one hundred years, Ladybird books have delighted children, their parents, grandparents and teachers alike, taking readers on a journey of discovery and enlightenment. Affordable and accessible, Ladybird books hold a significant and affectionate place in the collective psyche of the nation, conjuring up, through written word and illustration, life in Britain in more innocent times.

 The De La Warr Pavilion is currently displaying over 200 original illustrations that cover a selection of Ladybird books from the late 1950s to early 1970s. Focusing on those books, which reflected the world in which the reader lived, the exhibition will feature selections from the People At Work series, Shopping With Mother, the Science and Nature series as well as the Well Loved Tales and Key Words series.

On Friday 8th May, we took a detour to the De La Warr Pavillion near Hastings. The visit was for us to see all of the illustrations, which Ladybird had published from some of the most talented artists from the 1950’s. As I saw some of the pictures, you could see notes and thoughts of when the artist themselves was producing the picture, you can see the pencil marks under the paint and even where they may have adjusted the picture that you would never see in print.

What I noticed in some of the books was the stereotypical views that the artists had portrayed in a lot of them, especially in books that related to families, children and development. The level of detail in every picture is fascinating to look at, looking closely; you can see the careful strokes to perfect every level of detail in what they had produced. Because the pictures were (in the majority) in watercolour, it would have been extremely difficult to go over and perfect what was already a mistake.

Undoubtedly, Harry Wingfield’s ‘Shopping with Mother’ 1958 was my favourite collection. Displaying every page in the order of the book against the wall, you can see in detail the precision of his work. It shocked me to how much bigger the canvas’s were to how I pictured them, considering the book sizes; the level of design and the concentrated focus of composition on every page, regardless of who painted the picture, is what makes the Ladybird books so distinctive and popular.

With Harry’s pictures, I noticed the depth of colour he used, exaggerating the shadows and highlights to bring out specific areas of the image. Going back to the point of stereotypes, his book portrays this especially. As you look at the tiny details, you notice things such as the boy wanting a hammer, and the girl paying for the flowers, etc. The amount of detail and meaning he put in every picture makes you appreciate the time and effort he had put in, like the rest of the artists. I believe they deserve far more credit than they are given.

If I were to be critical, I would say that the landscape images and some objects such as the image with the blocks were my least favourite. Putting them against the images of people, they appear a little flat and bland in comparison. If they were completely separate, I would agree in thinking they were fantastic, however because the images of animals and people have such a huge amount of detail in every corner, you can see the difference between them.

Although Ladybird books are old fashioned and not what people want to read anymore, they deserve to be credited at the very least for the illustrations. The books themselves despite, are still hugely interesting, and they are the foundations to all of the books written today! Ladybird books were some of the first books to display factual information as a story, than to have a fictional story such as Cinderella.

By going on this trip, although I couldn’t draw these illustrations in a million years, it is inspiring to see these types of images be displayed in front of your very eyes, especially when they are in their original format and not manipulated in any way. These pictures are fun to look at. And you can spend hours gazing at the detail in the strokes, making you appreciate the time and effort the artists took to create a few pages of a book for everyone to enjoy.



Coding practicing.


Because I had never tried coding before, I had a little look online for some free tutorials to get some relative basic understanding. Code Avengers is an excellent tutorial that takes you through the steps of coding to set up your own app. I thought this was a good site to experiment with, as it is showing how you use computer software’s to link to an app design. It also helps you to be able to use all different forms of multi media also, adding in sounds and images.

I thought I would spend an hour or so having a look at some online tutorials to help me get an understanding of the basic of using HTML in coding and setting a page up. Although I had only spent this much time doing so, I had learnt all of this and was able to understand these FEW basic codes:

<br> = break sentences

<p> = paragraph

<!doctype html> = tells the compuer you are using the latest html

<title> = this is the text that will appear on the web browser tab

<h1> = main heading 1

<h2/3/4> = subheadings etc

<sup> makes square roots of numbers (e.g.) appear small up top

<sub> similar, but at the bottom

<strong> makes the text bold

<link> links HTML documents to a CSS style sheet


A HTML always needs a ‘!doctype title’ and ‘title’

Also, when you place an end tag, it has a / at the beginning such as </tag>

What are attributes?What are attributes? Attributes provide more information about something. For example rel = relation: this specifies the type of file it is linked to. The href = hypertext reference: this sets the file it is linked to by anchor/link tags.

I also had a look at w3Schools, which is another great example of learning coding and getting the basic understanding for your own development. I copied and pasted the coding I had used in the other site onto a practice sheet here, and everything apart from the theme came up.

This was because I needed to go on the CSS site, meaning only the colours and theme would change. I went onto a CSS site and tried it, but it didn’t work due to the file now being saved in a local file. I then experimented with the styles and colours instead on here. I changed some of the settings, but it didn’t recognise the ‘dark’ word before a colour… but it worked when I set it to a normal colour, which I found interesting. It worked on the heading colour however.

Although I could see myself spending hours playing around on both of these websites, coding is something that could take years to master. Although it does interest me to learn more, I would rather practice when I have more spare time than to make a whole website in 3 weeks from scratch.

I really liked how you have to be really specific with everything in coding. I thought by using coding it was a great sense of achievement to see what the outcome was, and that the smallest mistake could change the whole appearance of the page. With coding, you can be precise with where and how you want everything, including also sound recordings and animations, and putting them in the specific places on the page you want them to go on.

Screen Shot 2015-05-01 at 13.32.34

Screen Shot 2015-05-01 at 13.32.51Even when putting my images up on WordPress here has a title, and when you save it, the title will come up if you click on the image. The alternative text shown here is what will be shown when the image is not displayed.