Planning & Designing Websites!

Aim: To be able to create website designs for a stated customer.

Objectives: 

Understand the importance of the design process.

Explain what documentation is required.

Explain the purpose and create the navigational diagram for a stated website.

Create the house style for a stated website.

Create a screen design for a stated website.

Returning from a mega-busy weekend, I have managed to complete the entire pass-criteria section of U20's second assignment, remaining with the merit and distinction criteria. In addition, I have also completed Emily's maths homework and have revised a bit around matrices.

So coming in on a Monday morning, I quickly sat down and proceeded with A2. However, a little later Zoë stopped us began to explain the principles of the third and last assignment, task one. This was all about creating a website for a company named Phoenix Games. For the starter, we were split up to discuss different documentation methods that are required and then give feedback to the class. As I worked with Matthew T, Chris M, and Edward L, our findings were design brief (purpose), navigational diagram of the webpage, screen designs, house style, CSS layouts, flowchart, and pseudocode. I had found the starter activity's procedure to have been flawless, however I felt the group was too big. This is evidenced as half of the group participated little to none. Zoë then went through these documentation methods in a bit more detail with a PowerPoint and had thus, given us some more activities.

One of these were to create a flowchart of a user filling out a feedback form and sending it as an email. The conditions said that if all the fields are not filled in, it would prompt the user to redo the form. Until the condition is met, the email would not be sent. For this I had used Photoshop's shapes features to create a flowchart easily. The next activity was to take one of the code's we have customised in our JavaScript examples and convert the scripting language to pseudocode. Pseudocode was relatively easy because it is essentially every day English combined with simple programming/coding-synonyms. I managed to convert a confirmation box. For these independent activities, I found it easier overall because we had learnt this last year throughout majority of the units such as programming (flowchart and pseudocode) and animation (design brief).

Flowchart by Danny Chan

JavaScript Converted to Pseudocode by Danny Chan

After all this, the real assignment began! I created a new word document and immediately typed away (more succinctly). Furthermore, using Photoshop I was able to firstly create a navigational diagram - this is a visual representation of how a user would access other pages within the same website. It also shows the structure and how things are connected. Next, as the client's (Phoenix Games) webpage requires five individual pages, I have created five separate onscreen designs: homepage, about page, product page, order page, and contact page. I have approximately adapted the same house style to all pages for a consistent theme and design.

Website Navigational Diagram by Danny Chan

House Style Design by Danny Chan

Implementing it into word document, I annotated my choices and moved onto explaining how my CSS would appear as. Just as I was getting into it, I was disrupted by Catherine (thank God), she took me, Liam B and another girl from Level 2 downstairs for a photo-shoot. Extremely proud and honoured to be on the front future prospectus! After returning to class, the day was ending and therefore I have started to pack up and plan my work.

Reflecting through today, I have found that my only weakness was partially unconfidence in my own decisions. Though this trait is not bad because I ask Zoë about anything I am unsure of. On the other hand, my strengths was to quickly grasp the work and work through it. There wasn't any inspiration, but compulsorily it would be myself as I am believing that the designs I do for the website will turn out all OK, despite my experience of coding is not particularly professional, I am willing to learn.

For the next two days I am off, I will be working on the second assignment primarily to get it done and submitted for Wednesday. If I have any spare time, it would all be devoted into a bit of my art and a bit of the third assignment.