In this phase, the primary goal is to lay a solid foundation for the project by defining its purpose, audience, and design. This involves brainstorming ideas, creating user stories, and setting up the project environment.
-
-
What are My Tasks?
-
Ideation and User Story Definition (1.5 hours):
-
This task involves brainstorming and refining project ideas, defining user stories that capture the project's essential features and functionality, and documenting these stories in the README. This process helps clarify the project's goals and ensures that the development is user-centered.
-
-
Initial Planning and Wireframing (1.5 hours):
-
You will outline the website's structure and design through wireframes. This includes sketching key pages, choosing color schemes and fonts, and planning content placement. Documenting these decisions helps in creating a clear design blueprint and facilitates a user-centric approach.
-
-
Environment Setup and Version Control (1 hour):
-
Setting up the development environment includes creating a GitHub repository, organizing project files, and linking necessary resources. Proper documentation of this setup ensures that the project is well-organized and version-controlled from the start.
-
-
What Should Be in Place By The End Of This Phase?
-
-
A clear understanding of the project's purpose user stories and target audience.
-
Wireframes, images, fonts, colors, and design decisions chosen and documented.
-
A fully set up development environment (IDE project) with version control (GitHub repository) in place.
-
+
+
+
-
+
+
-
What do I need to do now?
+
Pass Grade: Expected Pass Performance (Do's):
-
Brainstorm and refine project ideas.
-
Define and prioritize user stories and their acceptance criteria in a way that reflects the website's goals (Must, Should, Could).
-
Create a project repository on GitHub. Include a README for documentation.
-
Add the project definition, user stories, and acceptance criteria to the README (User Stories section).
+
4.1 Think about the specific needs of your target audience.
+
4.1 Use user stories and their acceptance criteria to guide the development process.
+
4.1 Include the project overview as well as the target audience in the README
+
4.1 Include user stories and their acceptance criteria in the README.
-
-
Pass Guidance: What do I need to do (and not do) to work towards creating a fully working and useful website?
-
Associated Pass Criteria:
-
-
4.1: Write a README.md file for the web application that explains its purpose, the value that it provides to its users, and the deployment procedure.
-
-
Justification:
-
-
4.1: Documenting user stories in the README aligns with the need for clear documentation and understanding of the project's purpose and value.
-
-
Note: Ignore the deployment procedure for now. You can get to that later.
-
-
Pass Grade: Expected Pass Performance (Do's):
-
-
4.1 Think about the specific needs of your target audience.
-
4.1 Use user stories and their acceptance criteria to guide the development process.
-
4.1 Include the project overview as well as the target audience in the README.
-
4.1 Include user stories and their acceptance criteria in the README.
-
-
-
Pass Grade Areas for Improvement (Don'ts):
-
-
Skip this step; clear planning is crucial for success.
-
Overlook the importance of user stories in guiding development.
-
Forget to include a brief overview of the project and its intended audience as well as the user stories and acceptance criteria.
-
-
-
-
-
Associated Merit Criteria:
-
-
1.1 Design a website with a flow of information layout and interaction feedback that is clear and unambiguous
-
1.2 Implement a website whose purpose is immediately evident to a new user. E.g. make the landing page relevant to the site’s primary goal.
-
1.3 Implement a website that provides an excellent solution to the key project goals, demands, and expectations.
-
4.1 Present a clear rationale for the development of the project, in the README, - Key project goals, target audience
-
-
Justification:
-
-
1.1: Clearly defined user stories help in creating a structured, navigable and useful website.
-
1.2 Ensures that the project prioritizes user-centric design and clear communication of purpose from the outset.
-
1.3: Effective user story prioritization ensures a balanced project scope, which is crucial for a functional and user-friendly design.
-
4.1: Clearly defining the target audience helps tailor the website to meet their specific needs, enhancing user experience and relevance.
-
-
Merit Grade: Expected Performance (Do's):
-
-
Ensure the user stories are clearly defined and cover the key user scenarios. (LO1.1, LO1.3)
-
Prioritize user stories effectively to balance project scope and complexity. (LO1.2, LO1.3)
-
Clearly define the target audience and their specific needs in the README. (LO4.1)
-
-
-
Merit Grade Areas for Improvement (Don'ts):
-
-
Create vague or generic user stories. (LO1.1, LO1.3)
-
Fail to prioritize user stories, leading to an imbalanced project scope. (LO1.3)
-
Ignore the specific needs and characteristics of the target audience. (LO4.1)
-
-
-
-
-
-
Associated Distinction Sections:
-
-
Real-world application: Provide a clear, justified rationale for a real-world application and a comprehensive explanation of how it will be developed.
-
-
Justification:
-
-
Real-world application: Providing a clear, justified rationale for a real-world application and a concise explanation of how it will be developed ensures a focused and coherent project vision, guiding all subsequent design and development efforts effectively.
-
-
Distinction Grade: Expected Performance (Do's):
-
-
Concise Real-World Application:
-
Develop a brief, focused explanation of the real-world application. Limit this to one or two paragraphs that clearly state the problem being solved or the need being addressed.
-
Example: "This project aims to create a responsive website for a local bakery, which will enhance customer engagement by providing up-to-date information on products, promotions, and events. The site will cater to both desktop and mobile users, ensuring accessibility and convenience."
-
Clear Target Audience Definition:
-
Define the target audience succinctly, focusing on their needs and how the website will meet these needs.
-
Example: "The target audience for the bakery's website includes local customers who prefer online browsing and ordering, as well as tourists looking for unique local experiences. The site will provide easy navigation, attractive visuals, and relevant content to engage these users effectively."
-
Distinction Grade Areas for Improvement (Don'ts):
-
-
Avoid Overly Lengthy Documentation:
-
Do not write extensive pages of text. Keep the rationale and development explanation focused and to the point.
-
Prevent Ambiguity:
-
Ensure the purpose and development process are clear and specific. Avoid vague statements that do not add value to the understanding of the project's goals and implementation.
-
-
-
What do I need to do now?
-
-
Sketch wireframes for each key page (or each key section for single-page applications) using Balsamiq.
-
Ensure wireframes include intuitive and strategically placed navigation options.
-
Ensure wireframes include features that reflect the Must, Should and Could user stories.
-
Choose color schemes, images and fonts using tools like color contrast checkers to meet accessibility standards.
-
Briefly document design decisions in the README.
-
Add your wireframes to the README.
-
-
-
Pass Guidance: What do I need to do (and not do) to work towards creating a fully working and useful website?
-
Associated Pass Criteria:
-
-
1.2 Design a website that meets accessibility guidelines.
-
1.3 Design the organization of information on the page following the principles of user experience design.
-
1.4 Ensure that foreground information is never distracted by backgrounds.
-
4.1 Write a README.md file for the web application that explains its purpose, the value that it provides to its users, and the deployment procedure.
-
-
Justification:
-
-
1.2 Ensuring the website meets accessibility guidelines is fundamental for inclusivity and usability.
-
1.3 Organizing information according to user experience design principles ensures the website will be user-friendly and intuitive.
-
1.4 Maintaining clear foreground information ensures content is easily comprehensible and not overshadowed by background elements.
-
4.1 Documenting design decisions in the README is essential for future maintainability and understanding the design rationale.
+
Pass Grade: Expected Pass Performance (Do's):
+
+
1.3 Create wireframes for each key page (or key section if creating a single page application) using Balsamiq.
+
1.3 Prioritize and structure information clearly.
+
1.3 Ensure that the wireframes include intuitive and strategically placed navigation options.
+
1.3 Ensure that the wireframes reflect the Must, Should and Could user stories.
+
1.2 Ensure chosen color schemes meet accessibility standards.
+
Ensure good contrast throughout allowing content to take center stage on the screen.
+
Select color schemes that complement the layout.
+
1.4 Ensure that foreground information is never distracted by backgrounds.
+
Select images that reflect the website’s purpose.
+
Maintain an information hierarchy supported by consistent imagery and text.
+
Keep designs simple and elegant.
+
4.1 Briefly document your color and layout decisions in the README.
+
4.1 Add your wireframes to the readme.
-
-
Pass Grade: Expected Pass Performance (Do's):
-
-
1.3 Create wireframes for each key page (or key section if creating a single page application) using Balsamiq.
-
1.3 Prioritize and structure information clearly.
-
1.3 Ensure that the wireframes include intuitive and strategically placed navigation options.
-
1.3 Ensure that the wireframes reflect the Must, Should and Could user stories.
-
1.2 Ensure chosen color schemes meet accessibility standards.
-
Ensure good contrast throughout allowing content to take center stage on the screen.
-
Select color schemes that complement the layout.
-
1.4 Ensure that foreground information is never distracted by backgrounds.
-
Select images that reflect the website’s purpose.
-
Maintain an information hierarchy supported by consistent imagery and text.
-
Keep designs simple and elegant.
-
4.1 Briefly document your color and layout decisions in the README.
-
4.1 Add your wireframes to the README.
-
-
-
Pass Grade Areas for Improvement (Don'ts):
-
-
Start coding without a clear design plan.
-
Neglect accessibility standards when choosing colors, images and fonts.
-
Create wireframes that result in difficulty in Navigation from one page, or if using a single page application, one section to another.
-
Avoid images and text overlays with poor contrast ratios that are incomprehensible.
-
Avoid presenting information without considering categorization priority.
-
Avoid varying information across different pages, resolutions, or devices.
-
Ensure content is not difficult to understand against the background.
-
-
-
-
-
Associated Merit Criteria:
-
-
1.1 Design a website that incorporates a main navigation menu and a structured layout.
-
1.2 Implement a website whose purpose is immediately evident to a new user. E.g. make the landing page relevant to the site’s primary goal.
-
1.3 Implement a website that provides an excellent solution to the key project goals, demands and expectations.
-
4.1 Present a clear rationale for the development of the project, in the README, - Key project goals, target audience.
-
-
Justification:
-
-
1.2 Ensuring the website’s purpose is immediately evident to a new user is crucial for engaging the audience and guiding them towards desired actions.
-
1.3 Meeting project goals ensures the site fulfills its intended purpose and provides value to its users by addressing their needs effectively.
-
4.1 A clear project rationale in the README helps document the thought process behind the project, providing context and justification for design decisions, ensuring cohesiveness and organization while also meeting user needs and accessibility requirements.
-
-
Merit Grade: Expected Performance (Do's):
-
-
1.2, 1.3 Ensure color schemes, images and fonts are chosen to enhance user experience and accessibility.
-
Make sure that the purpose is clear from the outset. Information hierarchy is supported by consistent imagery, colors and text.
-
The website design is thoughtfully designed. Overall UX design is simple and elegant.
-
Site meets all stated ways to add value for the user.
-
The site has been developed for a well-defined target audience and meets the overall expectation with minor bugs.
-
4.1 Provide a clear rationale for design decisions.
-
-
-
Merit Grade Areas for Improvement (Don'ts):
-
-
Ignore accessibility standards in design choices.
-
The thought and purpose behind the project are not evident and difficult to comprehend.
-
Provide weak rationale for design decisions.
-
README file is missing clearly articulated entries for the initial planning sections.
-
-
-
-
-
-
Justification:
-
-
Accessibility: Thoughtful selection of color schemes, imagery, and fonts ensures the website is both visually appealing and accessible to all users, including those with visual impairments.
-
Design: Applying principles of good UX design, such as clear information hierarchy and user control, ensures that users can navigate the site intuitively and find information easily.
-
-
Distinction Grade: Expected Performance (Do's):
-
-
Accessibility: Ensure color schemes, imagery and fonts are chosen to enhance user experience and accessibility.
-
Design: The design of the web application demonstrates principles of good UX design, including information hierarchy and user control to the extent that the user will be happy to repeatedly return to the site.
-
-
-
Distinction Grade Areas for Improvement (Don'ts):
-
-
Accessibility: Ignore accessibility standards in design choices.
-
Accessibility: Use color schemes with poor contrast that make it difficult for visually impaired users to read content.
-
Accessibility: Choose imagery or fonts that are visually cluttered or hard to read, detracting from the overall user experience.
-
Design: Overlook the importance of a clear information hierarchy, leading to a confusing and frustrating navigation experience.
-
Design: Ignore user control principles, resulting in a design where users cannot easily navigate or interact with the site effectively.
-
-
-
-
-
-
What do I need to do now?
-
-
Create a basic project structure with necessary files and folders (assets, css, images).
-
Link CSS and any external resources like Bootstrap, Google Fonts, and Font Awesome.
-
Document the setup process in the README (Setup and Installation section).
-
-
-
Pass Guidance: What do I need to do (and not do) to work towards creating a fully working and useful website?
-
Associated Pass Criteria:
-
-
3.2 Use Git & GitHub for version control of an interactive web application up to deployment.
-
4.6 Place CSS code in external files linked to the HTML page in the HEAD element.
-
4.9 Group files in directories by file type.
-
5.1 Use consistent and effective markdown formatting to produce a README file in English that is well-structured, easy to follow, and has few grammatical errors.
-
-
Justification:
-
-
3.2: Using Git & GitHub from the start ensures proper version control.
-
4.6: Linking CSS in external files is a best practice for maintainability.
-
4.9: Organizing files by type from the beginning is crucial for project organization.
-
5.1: Clear, consistent documentation is essential for project maintainability and clarity.
-
-
Pass Grade: Expected Pass Performance (Do's):
-
-
3.2 Commit regularly to GitHub with meaningful commit messages.
-
4.9 Organize files logically from the start, e.g., create an assets folder with subfolders containing CSS and any locally stored images.
-
4.6 Create and link CSS in external files placed appropriately in the HEAD element.
-
Use consistent and effective markdown formatting in your README file in English that is well-structured, easy to follow, and has few grammatical errors.
-
-
-
Pass Grade Areas for Improvement (Don'ts):
-
-
3.2 Make a few big commits instead of consistent regular commits.
-
Use CSS ineffectively by relying too much on in-line styles.
-
4.9 Ignore directory structure conventions and place files haphazardly.
-
5.1 Edit your README file with inconsistent formatting or many grammatical errors.
-
-
-
+
-
Associated Criteria:
-
-
No associated Merit Criteria apply here.
-
-
Justification:
+
Pass Grade: Expected Pass Performance (Do's):
-
No associated Merit Criteria apply here.
-
-
Merit Grade: Expected Performance (Do's):
-
-
No associated Merit Criteria apply here.
-
-
Merit Grade Areas for Improvement (Don'ts):
-
-
No associated Merit Criteria apply here.
+
3.2 Commit regularly to GitHub with meaningful commit messages.
+
4.9 Organize files logically from the start. E.g., Create an assets folder with subfolders containing CSS and any locally stored images.
+
4.6 Create and link CSS in external files placed appropriately in the HEAD element.
+
Use consistent and effective markdown formatting in your README file in English that is well-structured, easy to follow, and has few grammatical errors.
+
-
-
-
Justification:
-
-
No associated Distinction requirements apply here.
-
-
Distinction Grade: Expected Performance (Do's):
-
-
No associated Distinction requirements apply here.
-
-
Distinction Grade Areas for Improvement (Don'ts):
-
-
No associated Distinction requirements apply here.