Web Design and Development

Many professionals work primarily as a designer (visual layouts and styles) or a developer (building the functional website or web app through coding). For smaller projects, you can do it all yourself, and there are some options for code-free development, but it's worth considering what skills you want to focus on. Some projects may function better as interactive prototypes or speculative mockups, which you can read more about on other pages.

You might also create a website to supplement or present other types of work, such as illustrations, podcasts, or photography.

Types of Web Projects

  • Landing page or informational site
  • Business or eCommerce site
  • Experimental site
  • Net art
  • Interactive storytelling
  • Web app

Production Requirements

  1. Research

    • Brainstorm ideas and research relevant work or subject matter.
    • Collect inspiration images or clips to show the visual style you're aiming for.
    • Write a short synopsis of narrative work.
    • Creating mood boards
    • Site of Sites — Great curated selection of websites
    • Godly — Trendy gallery of websites
    • SiteInspire — Gallery of websites, filter by type
    • SeeSaw — Another great gallery of sites.
    • Nice Every Nice — A gallery of UI patterns and components (e.g. hero sections, navigation...)
    • Dribbble — Community design showcase, usually mockups and not actual sites.
    • Awwwards — Curated elaborate websites
    • One Page Love — Curated collection of one page websites.

  2. Outline Content and Wireframe

    Prepare content like text and images prior to designing so you know what you're working with; think about how to organize content logically among pages or sections. A wireframe should be low fidelity: sketched on paper or in design software with labeled boxes.

  3. High Fidelity Mockup

    Compared to a simple wireframe, a mockup should look exactly like the finished site. This gives you a blueprint to refer to while developing and lets you experiment with layouts and visual styles faster than you can while coding. It also lets you get feedback early in the process.

  1. Development

    Penn State students have free personal web hosting offered through the university. You have to request for your server space to be activated, and you can host static websites at a domain like "https://personal.psu.edu/user123"

    If you want a more professional-looking domain, or wish to use a dynamic CMS like Wordpress, you'll have to buy your own hosting plan and domain.

    • Web hosts and registrars
      • Free JAMstack Hosting for Github repos
      • Domain Registrars ($)
      • Shared Hosting ($$ – $$$)
        • Typically includes domain registration; use an FTP client to manage files
        • BlueHost — Good all-purpose host
        • Siteground — Slightly fancier and more expensive
        • Green Geeks — Solar powered servers! ☀️
    • Static vs. Dynamic Sites
    • Static Site Platforms
    • Dynamic Content Management Systems (CMS)
    • Code-Free Development
      • Webflow — A powerful visual development tool. Contact your instructor to inquire about free educational access to the full app.
        • Contact your instructor to be added to the free PSU Webflow Team account (equivalent to a premium account). You will lose access to this at the end of the course, but can export your work beforehand.
        • Webflow also offers a massive discount for students if you want to just use a personal account. Not sure how long you can keep that after you graduate.
      • Framer — Design sites with a Figma-like canvas interface; does not have a student plan.
      • Squarespace, Wix, Weebly, and Carrd — These tools are meant for non-designers; they are more limited than anything listed above. If you want to use these, you should emphasize the content of the site as part of your creative work since your web design would be largely constrained by templates.

  2. Deployment

  3. Documentation

    • Take some nice screenshots!
    • Or record your screen to document animated content, or take us on a quick site tour.

Proof of Concept

A high-fidelity mockup or interactive prototype will be a good proof-of-concept.

If you're learning a new development tool, creating a simple test page would also be a good idea (likely running locally on your computer).

results matching ""

    No results matching ""