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
   • 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 and beautiful 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.

   • Wireframing Best Practices (Practical UX Weekly on LinkedIn Learning)
     • Illustrator for UX Design (LinkedIn Learning)
     • Wireframing in Adobe XD (LinkedIn Learning)
     • InVision Prototyping Tool — Turn sketches or screen designs into an interactive prototype.
     • How to Create a UX Sitemap — Use index cards or a digital equivalent to map out your content.

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.

   • Illustrator for Web Design
   • Recommended apps besides Illustrator:
     • Adobe XD: Design UI screens and prototpye navigation with links and interactions.
     • Figma: Web app for responsive UI design, interactions, prototypes, and collaboration.
     • Sketch: UI Design and prototypesl; web app or MacOS.
     • Framer: Web app for UI design and prototypes

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
       • Typically used with a static site generator (see below) but can host any static HTML files.
       • Netlify
       • GitHub Pages
       • Cloudflare Pages
     • Domain Registrars ($)
       • Namecheap — Domain registration only
     • 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
     • General overview
     • Explainer video
   • Static Site Platforms
     • Hand-coded HTML
       • Only for simple sites with a few pages. To use page templates or modules, try...
     • Static Site Generators (requires command line use)
       • Introduction to Static Site Generators
       • Eleventy
         • Beginner's Guide to Eleventy — Covers basics of git, npm, and static site generators
         • 11ty Rocks!
       • Jekyll
       • Hugo tutorials and resources
   • Dynamic Content Management Systems (CMS)
     • Wordpress — Free, but requires hosting with database access.
     • Beginner's Guide to Wordpress
     • How to Install Wordpress Locally with MAMP
     • Where to Learn Wordpress Theme Development
     • Become an Advanced Wordpress Developer — LinkedIn Learning Path
     • Some great starter themes
       • These are essentially blank themes designed for making your own themes in a modern development environment.
       • WP Rig
       • JointsWP — Built on Foundations framework
   • 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.
     • 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.
       • Everything list — Extensive list of web tools and technology

2. Deployment

   • Essential checklist:
     • Check all text for spelling
     • Optmize images for fast page loading
       • Squoosh
       • Optimizing images in Photoshop
     • Check contrast of text and background colors
     • Create a favicon
     • Check for broken links
     • Check your site in multiple browsers and screen sizes.
   • For real world sites:
     • Add meta tags for search engines.
     • Create social meta tags and share images.
     • Set up tracking with Google Analytics or Fathom
     • Wordpress launch checklist
     • Check your page speed
     • Check your search engine optimization (SEO) and ensure your site appears in Google searches.

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).