Analysis:-
The first thing regarding the design and development of my client’s website , what I did was to analyze the current contents and function of website of the client. It was also a task to see the strengths and weaknesses of the current website and then to improve it. Then the other thing was I looked at the requirements specified by the client, to see what the client wanted me to do for the redesign of the current website. Basically the client wanted a clean website with properly layout structure and continuity in the websites webpages. So I went to the current website of the client and did some analyze on the good qualities and the bad qualities of the current website. I took three into account for the good and bad qualities, they are:-
Good Qualities:-
- The website is very simple and clean with colours that is easy on the viewers eyes.
- The navigational option (navigation button/bar) was consistent throughout the whole webpages of the website.
- There was good amount of information given out about what that website is on about, as well with the same font styles used consistently.
Bad Qualities:-
- Even though the navigation bar was consistent the layout or the structure of the website’s contents were not consistent. Like the use of images and texts were structured badly.
- The placement of the logo was a bit unusual, because it was placed on the under the right side and below the navigation bar. (In some case it fines where the logo is placed either right or left, but the problem here was it was placed below the logo, which I did not like).
- Even though the functions (navigation bar) of the website worked perfectly. There were some issues with the links on the website that it did not work.
The image above is the analysis wire-frame that I had made during our group (3 in each group) talk when we had to see the good and bad qualities of the client’s present website, the content and functions, the scope, how it was organized and the layout and structure of the website. Thus the analysis wire-frame came in handy when I was designing my website for the client. It showed me the areas where the clients old website had problem so that I could improve and make a better website for the client. The other thing was to see what the client wanted, so as I could see his old website I got the idea on what type of website the client was looking for. The client in his requirement stated that the old website the client had was good but it was only hacked, the client did like his old website so I assumed that the client wants something similar to had. Thus I was able t design a website similar to that.
Stakeholder: –
The other things after the analysis before developing and designing website was to think about the stakeholder. Basically who this website is targeting, so I saw in the brief who this was targeting towards. The target (stakeholder) for this website of the client is aiming for people who are above the age of 25+, fishermen, people who love sailing and are interested in boats. In the presentation that the client had done in our lesson, we asked the client how he got his clients for boats, he told us it was mostly word from mouth, so basically the website the client owned had not much effect on getting clients. So I had to see what the client’s website was missing and how I will be able to get the viewers for the client and more customers too. To know the stakeholder is very important when developing a website because what a website looks like will bring in the viewers. I mean it is a boat building website, so it has to be simple and easy to navigate with good amount of information that the viewers will get. If it was a festival website it would be very colorful and cheerful. But here we talking about a business website that sells boat. So I had to think about the stakeholder which was an important measure to take.
Scope: –
As the website is for selling, restoring, consultation and building of boats, the scope was another factor that I had to think about. The scope was basically to see whether the website that I make should also be compatible for mobile and similar type of gadgets or not. So taking that into measure I decided not to make website for phones, because the means of clients website to get popularity was from word through mouth, plus the other thing stated by my client was that it was easier for the client to meet his customer (clients) because when building the boat my client will have to meet his client almost every week thus creating a bond. So it was easier through face-to-face talk rather than making any deals through phone website or website itself.
Content & Function: –
The content and function of the website that I will build will consist of as follows:-
- 8 Navigational Buttons = They are basically the navigation buttons for the main 8 pages of the website that will be just below the header and the logo. The colour for it will be light grey with the navigation button text as dark grey. The 8 navigational button are as follows: –
- Home page:- The home page consist of information about the things of the website as whole, what I mean is that it will display everything from new boats build to new events that has happened about the boat building business as a whole. It will consist of slideshow too to show the boats and new events that has happened through pictures.
- Biography Page:- The biography page will consist information about the client’s details and history about the client’s with his boat building skills. It will consist of some images about the client (website owner) and also the boat that he has made or could make.
- New Boats Page:- New boats page is basically about the new boats the client and his team has made for their clients/customer. This page will consist of boat images (the ones they have made), so when the new viewer or old customer/clients click on the image it will take them to a different page to see the process on that particular boat image that the client (my client) has build for other customer. The page will also consist of search bar so when a user type certain word or boats name it will take them to that page of the boat website and if the search bar cannot find it then it will say that the boat information is not available or has not been made.
- Restoration Page: – This page will only talk about things that my client and his team has restored or can restore if certain fishermen or boat owners come for repair or consultation on traditional wooden boats.
- Design Idea Page: – The design page will be similar to that of the new boats page, the only difference is that it will show the boats about my client and what his has build, as well about the boats which my client can make for his customer/client. There will also be a search bar for the user/viewers to look for certain boats that they want or would like to know about the particular boat’s details.
- Environmental Page: – The environmental page is about the environment. In simple as it is a wooden boat building company it has to be aware about its surroundings and the environment. So this page consist of the client and his business following the welfare of the environment. So if they have used one timber tree to make boat that re-planet 5 trees in its place. Thus, helping to prevent global scale problems. So this page talks about how they follow welfare organizations and prevent any problem regarding the environment and allows user/customer to know that the Tim Loftus Boat building company do support the environment and protect it.
- News Page: – The news page is for the client to update his works (about his boat building works), like what he has made or what project his had been working on and how it is going. So it like his diary for his works regarding his work.
- Contact Page:- The contact page as the name implies is for how to get in touch with my client (tim loftus boat building owner). So it has details and information on my client and his team of boat builder. That means like if a customer or person wanting to know about boats or build one has to get in touch with him. So this page is for helping the user/viewer to get in touch with him.
- Header = The header will consist of the website title that is “Tim Loftus Boat Building” written in font style “Times New Roman”. It will also have the logo for the client’s website that will be together on the header one the right side.
- Content= The contents will have information and images on about the boat building that my client makes for his customer/client. So what I’m trying to say is suppose its a biography page the content will contain information about the owner and what my client has made or could make and his work experiences and history, that just goes same for other pages content, if its a design page than it will consist of images but the information will be what the page name states.
- Footer = The footer will have links to the external websites that is similar to Tim Loftus and also the licenses and copyrights to my client and as well it will contain my client’s email id too.
So the above content and functions that I have mentioned will all be there for the website that I will build for my client.
Website development (Implementations in wordpress.org): –
The above images are all screenshot of the tools and option that I got and the changes that I had made for my client’s website. Basically it is due to help of these tools (images above) that I was able to make the website in WordPress.org. It was very simple to edit with the options and the tool that I got in dashboard of the WordPress.
The options/tools were:-
- Appearance: – This option/tool consisted of various sub option that allowed me to edit or add things to website. The first thing in the appearance was the theme option that allowed me to either choose a free theme or purchase a theme. As for me I downloaded the skeleton theme and upload via the unix server. It was very simple and easy process. The option was the theme option where I was able to edit the header, typography, general and layout and structure of the theme as a whole I was able to edit from this appearance sub option/tools. It also had the doc&info about the details on the theme and how changes could be made to the theme. that was helpful.
- Pages:- The pages option in dashboard helped me create pages easily and the good thing was that I did not even have to link them as they WordPress does it automatically when creating a new page. When creating new page the page contains the same feature as other pages (which is a must in when building websites). That was also done by the WordPress.
- Media:- Here I was able to upload any stuff regarding media. So I was able to upload my images for the client’s website. It was not only easy to upload images, but to edit them too was okay when I uploaded it on the media in the dashboard I was able to edit the images before putting it up in a pages, then further there in the page too I was able to assign the place for the image. Thus this media was a good way to put up images for the client’s website.
- Editor: – This was without the doubt the main cause for my client’s website looks and features. It was in the editor that I was able to do many things like change the position of the images placed, as well create navigation, borders, margins and paddings and many more. Without this editor it would have been impossible for me to make the changes of the layout and structure of my client’s website. The editor contained many PHP template codes and CSS, so reading and understanding what was written was the only little difficulty that I faced. Other than that everything was fine
The above options that I have mentioned are all the tools and options that helped me to develop the client’s website. The images that are above are the screenshot that I have taken to show the things that I have used, also how many pages are include and as well the slider that I had installed from plug-ins. So it all the development process that I went through that I have documented.
Link to My client Website: –
Mangs's Portfolio 