OUGD505: Website Pages (Digital)

When considering the interface, usability needed to be paramount to serve it's primary function. These are some very outlined drafts of how information could be inputted into each page. I have followed a manipulated 5 column grid, creating two barriers down the side of the webpages, which is common for most pages online. The left hand side will act as the menu bar, facilitating the drop down feature. It is not forbidden to place information in this column, however it is impractical to waste the space when the need for visuals is so great. By maximising image size then the work shines through, letting the interface take a back seat and act as silent design. Often, silent design is the most effective.

Landing Page

Drop down menu functionality to improve visibility of images to visually engage the target audience. The icon will act as a hovering motion, and when you click on it you get taken to the pre-generated search page- ie. its taking you to a collaboration!

Version 01 - More confined composition, with the side bar serving its function in the WorkSpace section, acting as the working diary- providing access to emails, files, alerts and diaries. The cubic presentation of the content also confines the information, following a similar format to Google Drive etc. The feature of the collaborators name in the corner could also be colour coded, as set by the individual, aiding collaborative practice as all people work differently. 

Version 02- Less cluttered version of the above, Limited the number of 'Top Hits' to 3 'Work in Progress', yet a swiping function so the user can still easily access files in chronological order. The information featured is slightly different, opening up the individual page to more of a home page style, featuring pending alerts derived from the diary and possibly eStudio/other people. 

Upload Files is clean and simple, allowing you to see exactly what you're doing and source files from any platform. Listening to feedback and looking at problems in current file sharing platforms such as We Transfer, the limit restriction is limiting and may result in original work being misplaced, and when that collaboration ends, you no longer have access to it. By keeping a history of all the files uploaded in chronological/alphabetical order, the user can group information by colour codes to easier detect where their files are. Again, this will be a three click process.. Select medium of upload> select file> Upload (done). Looking at problems in platforms such as Google Drive, a coherent way to grow projects is essential, much like Photo's iOS feature which groups together information by location automatically.

A two column system outlining the most imporant aspects identified from feedback- an easy way to message (message feature), easily search (spy glass) and access to all other personal content (workspace). The composition is in a bold two grid with lots of negative space, as often dealing with files can be quite stressful (according to feedback), so keeping the atmosphere light is crucial.

Simple and easy to follow calendar system, easy to identify alerts by the alert icon

Notes feature allowing short cuts to frequently visited, workspace and search features. Often when people are typing in notes they are just getting down ideas, possibly planning for a future project, and so may feel extra-inspired to find somebody who fits the brief to help. These notes could trigger the start of a collaborative partnership so the facility to do that needs to be immediately in place. Two side grids acting as a calming space, balancing the busy information in the centre.

 Save project in its own file on WorkSpace

 When asking for feedback it was noted that it was good to see what everybody posted on the collaborations page, not just selective for the graphic designers. 

Public Profile

To show off you as a creative so people want to collaborate with you. The information is kept professional but light, yet answers could include funny things without being flagged or taken down.  By including more than just the portfolio, the other users can get a more accurate representation of each person before committing to work with them, as well as basing work or starting work together based on common interests. Linked feeds will be platforms such as Its Nice That, Creative Review, Instagram etc.

More experimental way of displaying portfolio and information- all the crucial information is displayed on the first page, which is a top tip stated in the HTML book. Feature Instagram tags linking to the cross-platform distribution and what the target audience already engages with.  Images have animated transitions as the user clicks through.

These will inform the visuals, allowing a transferability and consistency within design styles. The bottom bar also has links to the portal, Student union and eStudio/Papercut, so the group can facilitate printing and split printing costs from their personal computers rather than via the university Macs, which is another problem identified in crits. The use of wireframes are extremely useful in informing the design, and informing what does not work either.