SCS6079 Digital Practices MA Digital Media & Society

workshop 3 icon workshop 3: Web development in WordPress / Furthering design

  1. WordPress theme design
  2. Branding and UX
  3. Site planning for IA

WordPress theme design

Intro to themes as templating systems for CMS

illustration of templating system
  • database as storage for all content (text/media files)
  • theme as design layer, independent from content
  • easy updates and backups of content
  • easy design updates / changes
  • performance relies on all components

Themes in WordPress

illustration of theme design for templates
  • design implementation as theme
  • files split into template parts, forming the final page
  • theme files pull content from database and control presentation
  • section/page-specific templates for custom requirements

Overview of HTML/CSS

browsers on timelime
  • separation of content and design
  • HTML: markup of all content (text/media)
  • CSS: design of layout and UI, independent from content
  • W3C standards for an Open Web Platform
  • build in accessibility from the start
  • inclusive design for all - people and tech (devices/browsers/connections)
  • annotations in code for effective workflow

Transferring HTML prototype to WP theme

illustration of theme design
  • prepare design as HTML/CSS prototype
  • check / add code comments and annotations, inc fonts, colours and brand info
  • transfer layout structure to relevant theme file/s
  • update CSS for correct file paths
  • check for additional content presented via WordPress

Branding and UX

Brand design on the web, across multiple channels

Brand & style guides

Creating UX to fit the brand message

Planning/designing for accessibility & UX

Site planning for IA

What makes a good website?

points to consider
  • your own browsing habits & online activities
  • browsing habits of people you know and how those vary from your own
  • common praises/criticism of others
questions to answer
  • what aspects contribute to an effective website?
  • what does a typical user expect when viewing website?
  • when can a website be considered successful?
questionmarks filled with words

Content out: planning for effective IA

illustration of content flow
  • site creation starts with thorough planning
  • content and users to guide all aspects of production
  • information architecture essential for usability/access
  • IA informs UI design. note: IA ≠ UI
  • recurring cycle of work: plan - review - test - iterate

Site maps & wireframes

screenshot of gliffy UI

content curated / created © Prisca Schmarsow | eyedea studio london | 2017