Design Brief II: Wireframes.
Design Brief: Part II.
Interaction Design Philosophy
Overall the site is based on a simple concept: ‘object oriented content’; in other words, each piece of content is an independent unit, with its own parameters and meta-data, and that can be accessed from different sections of the site, but each with a different set of information/data and a different layout.
Here’s how we see it work.
Concept Home page
Who’s the user?
- Client: VP & entrepreneurs
- Cultural Managers
- Creative/technology community
- Consultants & Business facilitators
What do we want them to feel/know/see?
- High-end work / hi profile clients
- Ideas
- Business / creative
- Solution/opportunity
- Dynamic/active/current
The home page acts as a path to different contents and will project the aforementioned values. It will connect to the ‘content objects’ of the site in a fun to read + editorial way + fast to navigate
Wireframe 1: Home page CONCEPT
ALL AVAILABLE CONTENT (useful or not)
Right column: internal contents (sections & pages); from within the website
- SERVICES: 5 sections Insight, strategy, design/creation/storytelling (?), technology, ongoing support
- PROJECTS: All projects* page (dynamic), project page, related posts
* Current projects versus past
- CLIENTS: all clients – related posts (same)
- COLLABORATORS: All collaborators & partnerships page – related posts
- OBSERVATION: Various short posts (Bluesponge life – including archived thingies)
Left column: external content (Bluesponge related social media channels AND the interwebs)
BLUESPONGE RELATED
- twitter @bluesponge
- Vimeo/YouTube
- Facebook
- Foursquare (?)
- Quora (?)
… other
INTERWEBS
- twitter feeds + lists
- open data
Refer to wireframe:
ALL PURPLE ARROWS INDICATE CONTENTS THAT WILL APPEAR -in one way or another- ON THE HOME PAGE
Wireframe 2: Home page CONTENT
This page refers to all content modules that will appear on the home page
NOTE:
- fields mentioned OUTSIDE the boxes indicate fields specific to that content
- fields mentioned INSIDE the box indicate the ONLY fields that will appear in the modules on home page (the other ones only on specific content page)
To repeat the content modules:
1- INSIGHT (title of related posts from INSIGHT in services) - by latest updated; NOTE: TITLE: 100 characters maximum.
2- SERVICES Strategy, creation, technology, ongoing support (title of related posts from 4 OTHER services: are all mixed in one module) – by latest updated
3- PROJECTS: category, title, big image, (client, one-liner); ( ) means NOT SURE
4- COLLABORATORS: title of last post + sub-title; maybe icon photo of contributor on roll over
5- OBSERVATION: title, credit, tags (if available a photo from post on roll-over)
6- @BLUESPONGE (news): twitter feed from @bluesponge in Twitter
7- PRELIMINARY CONCEPT: Live news from the industry
Connection of selected companies in the broad digital media industry (from majors like Google and Apple to new IPOs like Linkedin, print-on-demand, mobile, gaming, technology, publishing, media, etc.) CONNECTED to related twitter feeds through #tags
- Data visualization, relevant news, with a ‘wink’ to value created. Could be developed basic then evolve to become some sort of an INSIGHT indicator
8- CONTENTS PAGE (magazine like)
Another page (or maybe module) could be developed to navigate content through categories (a mix of 2): museology, sports, ecommerce, design, lifestyle, etc. Probably a separate page though.
Wireframe 3: SERVICES PAGE
Each Service page consists of
Title of service;
Tag cloud/paragraph of all tags taken from corresponding field in PROJECTS as well as all RELATED POSTS to corresponding Service;
Followed by a series of related posts (probably classified with latest on top);
Content according to attached wireframe, with expand and click to page;
Related projects will also be shown in bottom of page (Relationship through related content).
Wireframe 4: CLIENTS PAGE
Each Category will regroup corresponding projects.
A category is taken from the Projects page and consists of 2 fields (currently one) connected with &** (details below). i.e.: Museology & digital culture
Each client is represented by the corresponding Project thumbnail, client name, project Title (all taken from the Project page)
Thumbnail and title are clickable.
Client name is clickable, and leads to lightbox with corresponding projects under (thumbnail and project name); on click, leads to Project page
** All categories must be grouped in pairs, based on Projects; all coupling in Projects must be layed out dynamically in Clients page (and possibly will be used elsewhere; possibly in a page called Contents (magazine’s table of contents like)
Wireframe 5: COLLABORATORS PAGE
A page with all Collaborators organized in alphabetical order
Profile image + name (and maybe a one liner) + contact (twitter or other provided by collaborator)
Profile pic + name, click leads to page or lightbox with two lists:
- Projects: from Projects page
- Related posts: the ones submitted by collaborator.
That’s it for now… We hope all this is worth some feedback from you people.
Hello, your post and interesting content have helped me much with my important mission. Pleaze tell me how to sign in and log off so that I can continue my much good article research. Blog. I second excellent beat! Fuzzy concepts and great drinking thoughts, Cheerio, –you’re friend Spammerstein Jonez.
———
P.S. I actually do like the posts, and they are interesting, good food for thought. Briac, you’re a rigorous SOB; I love it.
Sorry Chris, here’s the link. It’s today’s post actually.
http://bluesponge.com/2011/02/editorial-tone-voice-business-strategy-and-design/
404?: http://bluesponge.com/2011/02/editorial-tone…egy-and-design
This post seems to have raised quite a few comments. I’ve addressed them all at once in a new post today on editorial tone & voice, business strategy and design. Check it here (http://bluesponge.com/2011/02/editorial-tone…egy-and-design)
Thx everyone for their feedback.
Ou est la version française? Un oubli?
@simon: http://bluesponge.com/fr/2011/02/brief-design-2e-partie-wireframes/
I like the object oriented content approach. It’s very much-in these days, and can be nicely filtered to provide relevant content to specific user types. But creating/linking everything this way does take away from the desired editorial approach. It’s hard to have a strong voice when the story can constantly change.
I think that starting by drawing a line of semantic difference between internal and external content is a bit weak these days – just because something is housed on vimeo or flickr doesn’t make it any different really than if it is housed internally. eg. if a portfolio piece has videos and images pulled from and existing on external sites (a good idea for reach and social promotion), where does that fit in in your “map”.
And I agree with Jonathan and Briac, but from a much less rational model. Where is the “ligne directrice”, the creative direction. I’m not thinking about users, I’m thinking about identity, c’est quoi bluesponge? c’est quoi qu’elle veut dire? c’est une “elle” ou un “il”? y’know?
I’d call for a less detailed answer, sort of like “what problem are we trying to solve”, before coming up with a solution.
Yes, one should not rush design if the research is not done. But one should not rush research nor design if the purpose is not set.
Where is the Mental Model…. I see the Interface… I see the Data…. but where have you mapped the User Needs ?
This is a good case of Genius Design but if we take it from a User-Centered Design perspective I would like a more detailed answer.
JB the stalker
Cool, but it’s not clear how everything fits in a business context.
Before Homepage wireframes, who is the user, what you want them to do/see etc:
Why do you have a website?
Set crystal-clear business objectives, and prioritize them
Example
- Persuade new clients
- Maintain relationship with existing clients
- Hire new talents
- Connect with industry
Then, set goals:
S.M.A.R.T. http://en.wikipedia.org/wiki/SMART_criteria
Example
- Get 50% more resumes sent to job@bluesponge.com
- Receive 5 more phone calls from potential lead every week
- Increase reach amongst selected industry players by 200% on our current PR/blogging/social media channels
- Reduce website content management/publication time by a decrease of -3 hours/week on staff time
Etc
Also, it would be cool to see some research data. What were people doing on your previous website (quantitative: analytics, qualitative: interviews)? Where were they coming from? Who were they? Don’t throw this data away in the rebuild process!