Browser Testing:

Safari:

Chrome:

Comments

Top 5 comments left on blogs:

Project Management 5

Final Submission and reflection

What did I learn as a result of this assignment/project?

The main thing I learned during this project was how HTML and CSS codes works, and how to use it. As an absolute beginner it was interesting to see how it works and realise how much work goes into a website that the user doesn’t see. I also learned a lot about time management and balancing assignments towards the end of the semester, especially ones that take a lot of time, such as this one.

 

What key difficult technical obstacles did you encounter and how did you overcome them?

My main obstacle was getting the hang of HTML and CSS, with all the rules and shortvits (e.g. closing <divs> and <p> for paragraphs, etc. I also struggled a lot with the spacing of my site, and getting it to look like how I planned in brief 1. The nav bar also took a lot of work, with changing the colour of the links when you hover over them and spacing it out. It was also difficult to understand a lot of the tutorials online, as my minimal knowledge of HTML and CSS meant I didn’t understand a lot of the language and key words they use. Another major obstacle I encountered was when my laptop was stolen, including all of my progress and notes on HTML. This set me back a lot and meant I had to start from scratch and gather a whole lot of information on HTML from online and others, as well as meaning I was pressed for time.

 

What would you do differently if you had another opportunity to complete this assignment?

If I had another opportunity to do this assignment I would focus more on my layout and content on my website, as mine is a bit plain with empty spaces and the information is minimal. However as a result of the lack of time I had, I didn’t have time to add more information in through HTML and CSS.

Project Management 4

This week I’m focusing on CSS and making my site look presentable, as I think I’ve got the basic HTML structure. My main challenge has been making everything fit together neatly, for example my What’s On page:

I wanted each of the 4 black boxes to be the same height, however I discovered the text was affecting this, as there’s a different amount of text in each box.

I think that I am finally getting the hang of the basics in HTML and CSS, which has sped things up a little bit, yet I am still struggling with making my pages look how I wanted them to in my Brief 1 designs.

WIP Project Management 3

Have had a major setback this week, with my laptop and hard drive being stolen. This is pretty frustrating with the time I’ve put into creating my website, and means I have to start again from scratch. It’s also nearing the end of the semester which means all of my other papers have assignments due as well, meaning I’m going to be really pressed for time.

Other than that I’ve been learning how to use Skeleton to format my site using CSS. It took a lot of time to figure out how to link through my CSS file to my HTML file but I eventually got it working. This means that when I get to doing CSS this time I can now fix most of my spacing and layout issues and get my site looking better aligned overall.

WIP Project Management 2

As an absolute beginner to HTML, beginning the build of this website has proven very difficult. Over the past week I have put some time into watching tutorials and have now completed my homepage for my website, as well as navigation for the other pages. It’s also proven to be extremely hard to fix a mistake made in HTML when you can’t find the mistake in the first place.

I have also decided to change some aspects of my site, due to web responsiveness and usability.

In Brief 1, I originally designed 5 pages, but in experiencing how long it has taken so far to create one page, I feel it would be a better use of time to focus more on 4 pages, so I will get rid of the contact page.

Also, the font I used in my Brief 1 mock ups is not supported for web use, so I will have to decide on a similar font.

 

WIP Project Management 1

Usability testing:

By doing usability testing I’ve found that the navigation of my website is pretty explanatory and easy to use, however I am planning to make a few changes. I will keep the Navigation bar present throughout the whole website, as the home page doesn’t currently have it. I will also make links more obvious, perhaps by making them proper buttons.

I have discovered that usability testing is an accurate way to gain an understanding of how outside users will be using my website, as I am so familiar with it. It points out things that may confuse or be overlooked by users and helps to fix any errors that I have made during the planning stages.

https://jesssmith2017.wordpress.com/

.

Research

Heart of the city is a site that aims to promote culture around Auckland. They cover a range of topics including food and drink, activities, music events, art and shopping.

To access the menu you press a button on the right hand side, and the menu options appear. I like this aspect as it gives users time to focus on the homepage before they search through the site.

This site has a lot more options than I would need in mine, as mine only focuses on music, but I would consider using this aspect in my site as it is a clear and effective way to navigate around pages.

 

In reviewing their music section, I found a number of aspects of the design that I liked.

The font used is Open Sans, which is a basic, easy to read font. The font size is easy to read, and they use a good combination of bold and normal words to make certain things stand out. I also like how the font is all black, and put on different coloured backgrounds to make it stand out.

The layout of the separate music events is informative, but still brief enough to be able to easily understand the event in only a few lines. It’s interesting how they have places events and venues with each other. If I were to do this, I’d put the venues on a different page to avoid confusion, however I do like how they have put the date on the events to differentiate them from the venues with a striking yellow box.

I like that the background colours are light and toned down, which makes it easy to look at and read. This also doesn’t take away from the coloured photographs, which are a main point of interest for users of the site.

I like how users can interact with this site and enter the date, type of event, and how much money they want to spend to find the perfect option for them. This enhances the user experience and gives the user a more personal relationship with the site.

 

 

Reflection

What did I learn as a result of this assignment/project?

During this assignment I learned how to design a website, and how much detail and accuracy is needed for it to function properly.  For example for links, you have to be certain that the links will take you to the correct page for the website to make sense and be easy to use for the user. I also learnt how to use InVision to get a clear idea of how a site will look and function. I learnt a lot of attention to the design of the website is needed to make sure it looks good and is easy and enjoyable for a user, while getting it’s purpose across.

What difficult technical obstacles did you encounter and how did you overcome them?

I encountered some trouble with linking the pages together on InVision, especially the low fidelity prototypes, as I got confused which which links went to which pages and had to keep starting again. I overcame this by referring to the high quality ones.

What would you do differently if you had another opportunity to complete this assignment?

If I had another opportunity to do this assignment I would spend more time on my high and low fidelity prototypes, especially the mobile ones, as I felt they were the last things on my list to do and I was rushing to get them done. As a result they were not done to the best of my ability and were a bit messy. I would also maybe play around with colours on my site as at the moment it is a bit too black & white.