Wire-Frames & Designs
This page contains all the wire frames and designs that I have done in order to help me with build the client’s website. I have done the design in paper, Photoshop, mockflow (website) and Microsoft word. All this wire frames were necessary for me to make because it will help me to build the client’s website step by step without having any difficulty. The web design page contains the wire frame and designs showing how the structure or layout of my website will look. It will have simple wire frame displaying simple layout and structure as well as detailed wire frame that will display how the website’s structure will be. Like where the navigation bar, logo, header, images, text, content and footer will be placed. The other thing that will also be in this web design page will be the previous and final mock-up designs. This mock-up designs will show how my website when I will make look like. So it almost like the real website but not functional.
Simple Wire-frame:-
The above images are simple wire frame that I had done using the Microsoft word software. I have just made the simple wire frame to show the structure of how my website will look. The wire frame is so simple that the client cannot understand what the navigation bar will contain or the content the footer. So even though its a simple wire-frame as I have stated, it is just too simple and the client may not understand. So when I displayed my simple wire-frame to my peers and tutor, they could not understand it and when I got the feedback, I did make few changes, but I did have a detailed wire-frame already, but I made it more in depth (images below). The other thing is I have also put the hand drawn structure/layout of how my website will look (images above). I did that because I wanted to make sure that I did not forget how the design will look when I will start building the website or its mock-up design. As it was also the first thought that came to my mind when I was thinking on what to design. Thus the hand drawn rough layout of the website will come in handy while developing the client’s website.
Detailed Wire-frame:-
The above images are the detailed wire-frame. It is showing how my layout and structure with text and everything will be. Why I have said detailed is that it has more variety of contents and function that is being displayed. Like where the navigation system (bar tab) is placed, or how many navigation buttons it consist, where the images are placed, the content, the footer and header, also where the text will be placed or written and the images too. Basically the detailed wire-frame that I build was after I got feedback from my peers and tutor, as they could not understand my simple wire-frame, which I thought they wouldn’t, but I had to place it in the visual web design page because it was to show the basic layout of the client’s webpage. In other words I can say that this detailed wire-frame can be metaphoric for skeleton of a body and the mock-up designs (images below) can be said the flesh and organs just like the human body. What I mean to say is that the detailed wire-frame is the inner part (just like human bones supporting like a pillar), whereas the outer part (like colour, images, navigation buttons, logo and header symbolized as cover) are the mock-up designs. So in simple terms they are the basis for building my website.
Mock-Up Design:-
The above images are the mock-up designs of my client’s website. I had to make this because I wanted to show the client an example of how it will look before I make the real website or also to help me make sure that whether the client is happy or is the website that I had designed is what the client is looking for. So this way I minimizing my concerns and problem that may or may have occurred if I would just make the website without showing any prototype design or what it make look like, and just giving or showing the client after completing the website directly. It would only spell trouble for me. So thats why I made the mock-up designs.
The images above is mock-up designs for the entire website for my client. It is showing how the header will look, where the logo is placed and what it looks like, it is also showing the colours that I will use, the navigation system is also shown whether it will be rounded edges or pointy edges. Plus the images and the text how it is placed in the content. So the mock-up design that I have made is just to make sure the website that I will design is to the client’s liking. It is because most clients would have different visual imagination of what they want for website. So the mock-up design was an easy answer for helping me to solve this problem. The mock-up designs are always used to prevent the problems or concern that may occur if the client is not satisfied with the website.
The mock-up designs were all made using the adobe PhotoShop software. As I have been using it for a long time it was easy to use it thus I was able to create the mock-up design. The only problem was to think about the colour, text and images that I was going to use.
Typography & Colour:-
The typography for the clients website would consist of two types or just one type of font style. If there are more than one or two style of font, then the website will not look professional, rather it would look like those cheap magazines. So I will minimize the font style to two or just one style (most probably one style of font). I will use the “Times New Roman” font because it looks professional and will go well with the website that is selling & repairing (many more) boats. The “Times New Roman” font also looks simple like “Helvetica ” font, which is used widely around and famous too. Thus I will use the “Times New Roman” font. So as I will only be using one font style, I will have to change the font size to differentiate between what it is going to be used for. For example:-
- Header: Font-size 48px with black colour;
- Navigation: Font-size 16px with light blue colour;
- Paragraph-header: Font-size 30px with black colour;
- Paragraph: Font-size 14px black colour;
The colour choice I will use for my client’s website would be similar to what the client’s previous website consist. I’m using the colour similar to what the client’s previous website consisted of, because the client wants a clean website colour with pleasant and warm feel towards the user/viewer who will looks at the website. So the colours that I have used are: –
- #9dbbe7 (light blue)= This colour code is for the whole background.
- #617397 (grey) = This colour code is for the container for website.
- #ffffff(white) = The colour code is for the navigation, content and footer.
FeedBack: –
The feedbacks were all given by my peers and tutor. For some lesson we had done some presentation as well as grouping and giving feedbacks on the designs helped a lot to improve. From the feedbacks I got few merits but some criticism which I thought was good. As I was able to improve many things, like the layout and structure of my wire-frames were unclear and not detailed, the structure and layout was too simple that my peers and the tutor could not even understand how the content and functions would be used or done. Thus looking at the various things I was able to improve my designs.
The changes that I had done were the layout was a bit too simple and unclear on how the user would find out information about certain boats and what type of boat the client sells and has made and sold. So I had to add some features like search options, and as well about the boats the client and his team had made. I also added number of boats name in the side bar (new boats page) so when the user clicks on the boat’s name it will take them to another page that has the details about that boat. Thus this way I was able to improve. For the fonts and the colour I was given merit feedback so I did not make any changes to that.
Changes: –
The few changes that I made were for the new boats page and news blog page (images of before and after below): –
The above images are some of my webpages that I had made changes to. It is basically the before and after changes done to my mock-up design pages.
Final Visual Design: –
The above images is the final design for my mock-up images. So the website that I will make for the client will look exactly like that (images above). There won’t be any changes, the website I had design looks like what the client had wanted or described. I have used warm colours and has clean layout and structure.
Mangs's Portfolio 