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
notes
  • 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
notes
  • 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
notes
  • 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
notes
  • 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
notes
  • 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