Wireframes

I have started and completed the wireframes for the website, this will make it easier to follow as a basic design. I need to upload these on to a wiki at a later date so they are all stored in one place. I was introduced to a software called Adobe Fireworks, this was useful for the design work as it was just basic standard that had to be completed.

login box WIREFRAMElistings WIREFRAME meet the team WIREFRAMES homepage WIREFRAME

This will help us for future design processes.

Advertisements

GitHub

Today I went in to university to get started on the first part of our home page HTML. But I bumped in to Rob and i sat down with him for an hour, maybe longer going through the basics of GitHub, which was to much of my advantage as Connor and I would work through this to transfer our work so we both have the same files to work off. Also if anything went wrong we could back track our work, find and sort out our problems without loosing all of are current work.

I worked through terminal to upload my files on the GitHub by using the command ‘commit’. Then the functions of push and pull mean I was able to access my work wherever by pulling it back down. Git has ‘repositories’ which act s a directory which allows me to add and edit files either via a command line interface or a graphic user interface. I have never used a command line interface until it was introduced to me through a seminar I had. I then experimented in my own time but I could never get the hang of it. So with my hour with Rob he explained it more so that I could understand easier. I think because there was an example I could follow it the made it easier for m to understand knowing he was doing it right and I was never sure on my own.

This was the Git test that I experimented with which was successful. Over the next few weeks I want to carry on working with terminal as I think I will use it on a regular basis through the process of this project and for future projects.

Screen Shot 2015-04-19 at 21.07.48

Research

For this research to work in favour of the website that has to be created for the assessment, researching 2-3different holiday websites will give us an idea for our own. The 2-3 different websites will vary across all holiday websites. It will give inspiration for the design, structure and overall layout of how holiday websites look. Also be looking for their own login in system, how it is displayed and how easy it is to login and out of the website.

http://www.thomson.co.uk

This is the first holiday website we will research in depth. The first thing that is clear with this website is the colour scheme, different shades of blue and yellow, for a sunny holiday abroad, where you will go for a break and guaranteed sun. Front page is of a very picturesque image, with a luxurious shade hut and a open space which a place to relax, the image matches with the colour scheme of the website with the blue sky and sea then blue and white pillows.

This website has a search bar at the top with different listings options that users can chose from.

search bar

Starting from where they can fly from for their convenience. Then the next option is where the user actually wants to go for their holiday. After all being filled out, by clicking search it will bring up in relevance all your suited options in a very clear manor.

pic4

It is a very responsive website even on a mobile device, the screen will adjust you your screen size. The functionality is very basic but that’s all that is needed for the website because of it’s popularity it can’t be complex.

I would use this for inspiration with the colours because it’s website that implies a sunny holiday.

pic3

Second website I used was slightly different as I wanted one to compare to.

http://www.holidaycottages.co.uk

pic2

A very different page layout and colour scheme are used, it gives a more nature based feel. Again functionality is very good with how it works and the way it works, responsiveness is good again however it does not work well on mobile devices, it changes the whole structure of the website and you lose the majority of the background image, which is bad on the design partSimilar design layout with the content as the first website.

I think the functionality for these websites are all the same maybe with slight differences but it is just the display that gives it it’s own individuality because all the sites aims are the same. This website is great for being user friendly, as once you have clicked on your desired accommodation, on the left hand side it gives you a calendar to pick dates that are available for you to rent it out.

http://www.directholidays.co.uk

pic1

This website again has the same efficient functionality, but the design layout has been changed again for a different edge to the others.

This one uses a lot more colours to get the users attention. Colours that associate with a sunny holiday: blue, yellow and oranges are the domain colours.

This was the first result that the sort button thought was relevant. This is what my team aim to do, create a sort button with at least 2/3 sort field. The automated message to alert people that the rooms are being booked really quickly. Overall the website is responsive as it moves with your screen and also mobile devices.

Meet the team task

This week me and Connor arranged to meet up in one of the computer labs in university and create our meet the team page. This was the process we went through.

Screen Shot 2015-02-26 at 15.36.35

This is what is on the page, with mine and Connor’s description and our photo, unfortunately our other team mate did not make our team meeting.

Screen Shot 2015-02-26 at 15.37.33

This is the CSS element to our meet the team page, with all the styles and arrangement of where everything is meant to go. As you can see on the right of both of these screenshots is my Dakar server. Through the process of creating this page, it was useful to keep saving the files and uploading them on to my public folder on my dakar account to see any edit I had made to the code and seeing what effect is actually had on the webpage, as for me I understand it better if I edit to code then upload it on the server so I can actually visually see the changes. Also being fairly new to HTML and CSS I feel like I need to check what I have done is correct and more importantly what I wanted it to do. Once I have seen it I can then decide if it needs to be edited further or not.

This was our final design for our Meet the team page.

Screen Shot 2015-02-26 at 15.36.26

This is the majority of the code for the meet the team page. Im glad this got completed, as it was set as a starter task so we can now carry on to work on our web application and design the whole code ourselves.

Screen Shot 2015-04-19 at 23.17.29

Meeting my Group

I have now found out my group in my seminar, we then had the remaining time left of the lesson to sit with our groups and get to know them better as we have recently been split up in to different seminar groups from before and most of us were new to each other. So this time was used to break the ice with new people in your group and to also discuss very briefly ideas for our project. At the end of the seminar we were all set a task to do for next week as a starter for our website and to meet up with our groups a few times within the week. The task was to create a ‘Meet the team page’ with our photos and a small description about ourselves. So that will be my task for the week.

Mind Map

After meeting my group today, we briefly discussed ideas as an over all aim for a group. I then went home and made a mind map of what we talked about. This personally gave me a better understanding of the project. From here I am going to start to plan the basic sketches of the future web application.

IMG_9973

Initial Ideas

As I have not met my team yet, this post will be fairly short. My initial ideas are maybe doing something like a holiday place? or a restaurant menu? It will have to be something I discuss with my future group and see what they think to the idea and if they have more ideas that we could develop.