Planning for structure & design
MAR 13th 2026
WEEK 5
- content planning
- information architecture
- design considerations
Content out planning for effective IA
useful apps
notes
- site creation starts with thorough planning of all aspects, priority on content, followed by structure
-
IA informs UI design. note:
IA ≠ UI
[ IA: information architecture | UI: user interface ] - IA defines content structure, labeling and indexing
- UI is derived from the site navigation (informed by IA)
- content and users to guide all aspects of production
- information architecture essential for usability/accessibility
- recurring cycle of work: plan - review - test - iterate
notes
- plan an approach for content review
- don't rely on your own preferences/interests/taste!
- find connections in context
- define a logical structure for content, then plan site/UI
- focus on structure first, edit naming/phrasing to fit
- continue to review - test - iterate
links
This is a very useful approach to content production. Once you are
clear about your structure and content, bear in mind the differences
in people within your target group and review your content again.
This will help you adjust your language and phrasing to create the
right feel to deliver your site's mission.
Read up on the
Six Thinking Hats.
Moodboards
Moodboards are popular in many areas, from interior to fashion, and of course, graphic and web design. They are used to express visually what might be difficult to describe in words. Collecting any kind of visual (photographs/graphics) which encapsulates an aspect of the planned design and combining them in a collage can establish a direction and guide the next steps.
BeFunky provide an all-in-one online creative platform as a paid-for
service and offer the use of their tools with some limitations for
free. We can use their
Collage Maker
to create our moodboard and save the final image as jpg/png/pdf.
(Just make sure not to close the webpage as you might lose your
inputs.)
concepts to explore
texture ✱ space ✱ people ✱ mission/goal/message ✱ sense of time/urgency ✱ emotion ✱ re/action ✱ mood ✱ light ✱ focus
What will your website look/feel like?
While only good content will make a good website - design plays a vital role in the user experience on your website. Before you start by simply looking around at your options - take some time to consider the kind of atmosphere and feeing your final site should express. Explore your ideas for visuals by creating a moodboard.
to-do list
-
find a visual direction
With your brief now almost ready/confirmed, work on moodboards to experiment with different approaches to colour and space. -
collect moodboards for review
Select one of your moodboards and ask others to share their views. It will be interesting for you to understand whether your collage of visuals does indeed express your planned meaning. -
post & share
With your post published, leave a comment on this post: "m~m~moody…" and share the link. Make sure to phrase your link text correctly with nicely prompting words. -
give & receive feedback
Check on other people's posts and leave them some feedback notes on their moodboards. Good design never just happens, and never in isolation - so support each other by leaving your thoughts and comments as input to the ongoing work ツ
Time to get serious :)
At this point, you should be clear about your brief and have begun to consider your site's goal and target group. If not, you can use this method to finalise your decision.
Before starting on content production, it's best to brainstorm and explore all possible angles. Mind maps are great tools to capture early ideas and to make note of the various angles and details. At this point, there are no bad ideas ~ only ideas!
Get opinions from others at any stage of your project, as much as you can. This can be us, your teachers, or your fellow students in the classroom. Ask for feedback and let it guide your work.
topics to explore
choice of topic ✱ sociological angle ✱ target group ✱ mission/goal/message ✱ types of content ✱ media types ✱ tone of voice ✱ digital context ✱ design direction ✱ assumed web use (device/app)
handy tool
The best mind and site maps are often sketched on paper - and if you prefer that, please don't let this sway you! If you'd like a digital tool, LucidChart will be worth checking out. If you use your academic email to sign up, more features will be unlocked. Whimsical is also worth a look - it offers 4 free boards which you re-use as many times as you like.
to-do list
-
make a final decision on your project brief
Make note of the title of the brief itself + start to think of a new title, one that might become your site's name or tagline. -
create a mind map of possible content
Brainstorm time! Jot down all of your ideas, no matter how far fetched or silly. Best to make notes as some ideas might lead to others. -
review the mind map, ask for feedback
With your own notes in hand, ask around for other people's input. Ideally, this would be your target group - but you can also help each other out, a second opinion is always useful. -
create a draft version of the site map
Review your site map taking on board any feedback, make note of the stronger ideas and aim for a logical approach to the structure of your content, in view of your site's goal. -
plan for content production
Make notes on ideas for media, such as photos to take or edit, as well as textual content. Keep in mind the overall time you have until the early 2021 submission.
Reminder
We are now half way through our module and you should now have a clear vision of your website. If you are still unsure or want to talk through your concept and possible path to a good website, please talk to us during the workshop, or email me (p.schmarsow@sheffield.ac.uk).
TIP: have a look online for inspiration ~ check out these examples by MindMaps Unleashed
PROJECT PROGRESS
✭ PLANNING: site map
✭ DESIGN: layouts and colours
* deadline next week
confirmation of brief / submission of proposal
WEEK 6 - MAR 20th 2026