DTC 355

Project 3

Mock Business Website

Build a responsive website for a fictional business. Your site should have a designed navigation bar and includes exactly 3 pages: a homepage/landing page, an about page, and a services page. You may use one of the business profile templates I provided or make up your own. If you opt to make up your own, you must develop a logo and color palette that is approved by me. You can use AI tools for content or make it up on your own. It can be inspired by a real business, but should be adjusted to be fictionalized. The business can be anything of your choice: a dog grooming company, a tech start up, a local restaurant, anything. It should use both text and image to promote the business to its target audience. Apply visual hierarchy in your CSS design so that color, typography, layout best expresses your content.

Design matters a lot on this project. Your site needs to look like it belongs to a real business, not a class assignment. I will be grading on how well your color palette, typography, layout, and imagery work together and fit the brand.

Before you start designing, figure out who the audience is for your business. A spa and a snowboard company attract very different people, and the sites should look and feel very different too. Your fonts, colors, imagery, and layout should all make sense for the people the business is trying to reach.

Stay consistent with your brand across all three pages. If you picked a color palette, use it everywhere. If the brand is playful, don't suddenly switch to corporate on the about page. Apply the business website practices we covered in class — clear calls to action, visual hierarchy, trust signals, and predictable navigation. A visitor should be able to tell what the business does and how to take the next step without hunting for it.


Duration: 3 weeks
Phase 1: Design Concept
  • Create a new design file in Figma named 'lastname-firstname-business'.
  • In that one design file, create complete designs of your website for both mobile and desktop.
  • If necessary, you may add a third design for tablet.
  • The design must have:
    • A custom font that fits the business brand
    • A clearly defined color palette tested for accessibility
    • A logo
    • Clear visual structure and hierarchy of information
    • Application of design principles covered in class (alignment, proximity, repitition, etc.)
    • Considers common business user experience practices
    • A minimum of 5 images
  • Your business content must include:
    • A homepage/landing page
    • An about page
    • A services page
  • Set up basic prototyping in Figma so that a user can click through the navigation and move between each page of the site. You don't need to prototype hover states or other complex interactions — just page-to-page navigation.
  • You should apply all concepts learned in the class so far.
  • Remember you will be graded on the quality of your design for this project.
  • Create a publicly shareable Figma link and paste it into the Slack turn-in. Your link must be set to public. If I can't open it, it will not earn credit.
Phase 2: HTML and Responsive Structure

Write the HTML and CSS needed for your project's basic responsive structure. Your grade in this assignment will be based on your understanding of the fundamentals HTML (semantic markup, folder structure), responsive design (responsive units, media queries), and CSS flex or grid for layout.

  • Create a project folder called 'business'
  • Create your file organization: you should have an index.html file, a css folder, and an img folder, and appropiately named HTML files for the other site pages.
  • Using semantic HTML, write the HTML needed for your design.
  • Be sure to include a mobile menu.
  • Apply the neccesary CSS media queries to make the basic structure of your website is responsive.
  • Note: Your site should make use of flex or grid for this assignment.
  • All pages and content must be present.
  • Add different colored borders in the CSS so you can clearly see the HTML's structure.
  • Do not include additional CSS for this assignment. If you opt to move forward with your CSS, please copy your files so you can leave the responsive structure alone for this turn-in.
  • Once your HTML and responsive CSS structure is applied, upload your project to the server via FTP.
  • Push your final files to GitHub.
  • Paste the project URL in the Slack turn-in.
Phase 3: Final

Finalize your project, adding all CSS and incorporating feedback from previous phases. Your grade will be determined by error-free code, responsive design, and effective execution.

  • You must have an external CSS file for both your reset and your site styles.
  • Your site should be fully responsive on all screen sizes, using flex or grid.
  • You should have at least 1 custom font.
  • Your site should look as close as possible to your intended design.
  • Your CSS must be clean, formatted, and organized.
  • You should incorporate feedback from prior turn-ins.
  • Upload your final project to your server space.
  • Push your final files to GitHub.
  • Paste the project URL in the Slack turn-in.