Skip to content

Latest commit

 

History

History
90 lines (67 loc) · 7.29 KB

project-redesign.md

File metadata and controls

90 lines (67 loc) · 7.29 KB

Web Design Project

Overview

In this assignment, you will either redesign a previous web project or create a new web page from scratch. This project focuses on enhancing your web design skills and applying best practices in layout, typography, color, and overall user experience.

Getting Started

  1. Identify a Project:

    • Choose a previous web project that you feel could benefit from a redesign, or define a new web project that interests you.
    • Consider the purpose of the website, the target audience, and the key features you want to include.
    • Document your goals for the redesign or new design, outlining what improvements you aim to achieve.

  2. Define Project Goals:

    • List the essential elements your web page must include (e.g., navigation, content sections, footer).
    • Consider any specific functionalities or interactive elements you want to implement.
    • Consider what you are going to "redesign". Focusing on an area to improve is a good idea. Think about one of these:
      • Focus on improving typography - Update and impove the typography of your site. adjust the type face, line height, font sizes, font weights, color etc.
      • Focus on layout - Improve the layout of your site, use a grid, use flex, think about the columns and structure, consider making a single page type site.
      • Work on the color and background - Consider using backgroundimages, choose a color palette, use graients.
    • Documentation! Important! - You must document the changes you are making. Take screenshots of the pages you are going to improve for comparison.

Mocking Up Your Design

  1. Create Mockups:

    • Use design tools such as Figma, Sketch, or Adobe XD to create high-fidelity mockups of your web page.
    • Focus on the overall layout, including headers, footers, content sections, and navigation.

  2. Iterate and Refine:

    • Share your mockups with peers for feedback and iterate based on their suggestions.
    • Ensure your design reflects a coherent visual style and aligns with your project goals.

Challenges

As you work on your redesign or new web page, focus on the following challenges to improve your design:

  1. Typography:

    • Choose a limited number of font families (ideally 2-3) that complement each other and enhance readability.
    • Pay attention to font sizes, line heights, and letter spacing. Ensure your text is easy to read across different devices.
    • Experiment with font weights and styles to create a visual hierarchy (headings vs. body text).

  2. Layout:

    • Explore different layout techniques such as grid and flexbox to create a responsive design that adapts well to various screen sizes.
    • Consider the visual flow of your design; ensure users can navigate intuitively from one section to another.
    • Use whitespace effectively to separate elements and create a clean, uncluttered appearance.

  3. Color:

    • Develop a cohesive color palette that reflects the brand or message of your website. Limit your palette to 3-5 main colors.
    • Consider color contrast for accessibility; ensure sufficient contrast between text and background colors.
    • Use color to establish visual hierarchy and draw attention to key elements (buttons, headings, etc.).

  4. Imagery and Graphics:

    • Select high-quality images and graphics that enhance your design and relate to the content.
    • Consider the use of icons for navigation or to illustrate concepts; ensure they are visually consistent.
    • Experiment with image placement, size, and alignment to create visual interest.

  5. User Experience (UX):

    • Think about the user journey; design with the end-user in mind, considering how they will interact with your page.
    • Ensure that navigation is clear and intuitive, allowing users to find information easily.
    • Test your design with potential users to gather feedback and make necessary adjustments.

  6. Responsive Design:

    • Ensure your design is responsive and works well on various devices, including desktops, tablets, and smartphones.
    • Use media queries to adjust styles based on different screen sizes and orientations.
    • Test your design across multiple browsers and devices to ensure consistency and functionality.

  7. Accessibility:

    • Keep accessibility in mind throughout your design process. Use semantic HTML and ensure that all interactive elements are keyboard-navigable.
    • Add alternative text for images and consider using ARIA attributes where necessary to enhance accessibility for screen readers.

Reflection on Process

Write a short reflection on your process.

  1. Goals: Explain your goals and if they were met.
  2. Problems: Talk about the problems encountered and how they were solved.
  3. Self Assessment: Self assess the results.

Web Design Redesign or New Page Assignment Rubric

Criteria Does Not Meet Meets Expectations Exceeds Expectations Points
Originality of Design The design lacks originality or shows minimal effort. It closely resembles existing styles without any unique elements. The design demonstrates some originality and creativity. It reflects personal style but may incorporate common design trends. The design is highly original, showcasing creativity and a strong personal style. Unique elements enhance the overall experience. /10
Typography and Color Scheme Typography and color choices are inappropriate or poorly applied, leading to a lack of readability or visual appeal. Typography and color choices are mostly appropriate and enhance readability, though some areas may need improvement. Typography and color choices are highly effective, contributing to excellent readability and visual harmony throughout the design. /10
Layout and Structure The overall layout is confusing or poorly structured. Elements do not align properly, and the design lacks cohesion. The overall layout is functional and mostly well-structured. Elements are aligned appropriately, creating a cohesive design. The overall layout is expertly structured, with a clear hierarchy and alignment. The design flows seamlessly, creating an engaging user experience. /10
Use of Design Tools Little or no effort is demonstrated in the use of design tools. Mockups are poorly executed or lack detail. Adequate use of design tools is demonstrated. Mockups are clear and mostly detailed, though some areas could be refined. Expert use of design tools is evident. Mockups are detailed, polished, and clearly convey the intended design vision. /10
Reflection on Design Process The reflection is superficial or lacks detail about the design challenges faced and how they were addressed. The reflection provides some insight into the design process, including challenges faced and solutions applied. The reflection is thorough, offering deep insights into the design process, challenges faced, and thoughtful solutions. /10

Total Points: /50