Interface Design Journal

Alice Rezende

[interfacejournal]

Assignment 2

Here is a direct link to the site!

http://co-curator.net/

[interfacejournal]

Layout considerations & other reflections

One of the core ideas behind the layout of my project was that it would resemble other web management tools such as MailChimp and Master Tour. The reason why I was approaching it like this is because I find that both products are extremely useful for real-life professionals.

MailChimp dashboard layout

Master Tour dashboard layout

When compiling inspiration ideas for A1, I came across another dash layout idea which I thought was a really well-resolved concept:

Although I was interested in this idea of transparency behind the blocks of content, as I developed my landing page I became more and more attracted to the idea of flat colours and images. I found that what I am leaning more towards are rounded corners and block colours. I think iconography like the one below really catches the eye.

Keeping this in mind, when designing the logo and favicon of my web product I wanted an image that summed up the spirit of the site (organization, preparation, attention to detail) while retaining a playful, creative image. I decided that, when minified, the logo would be just be a pair of glasses, and when space permitted, it would incorporate both typography and image. This logo for the Digital Writers' Festival was an inspiration:

And my resolved small and big logo versions:

Now that I'm finishing the sections on the site, I am considering colour-blocking each section like I have seen on a number of sites so that colour helps with visually understanding the site. Again, the Digital Writers' Festival site was a source of inspiration:

I am now constructing little galleries made up of image and text for sections like "Current Exhibitions" and "My Exhibitions". I researched long and hard as to wether I should apply hover effects over the images and text, but after reading some articles, I realised that none of those UI effects translate well in mobile form. Then I started considering whether I could apply a toggle button to display more info over each image. Here's a few snaps of my drafts for this:

However, after much deliberation I found that the images would sit too naked if the toggle button would display the event info. An image by itself looks awfully out of context. So I decided to streamline my designs and not apply any effect, and instead focus on the rest of the site. Instead my design for pics + images (gallery pics, artwork pics, event pics etc.) will look something like this:

[interfacejournal]

loving Media Query

Been working on A2 a lot and sharpening my CSS skills. I made a big breakthrough today figuring out that I can set a media query that can specify how tall I want my background-image to be. This in turn allows me to change the 'tallness' of my flat-gradient background based on the type of screen it is viewed for an optimal experience! life is good.

Here's the code that explained everything to me, thanks to http://css-tricks.com/css-media-queries/

My customized code to get my flat background gradient aligning the way I wanted turned out like this (just a snippet):

[interfacejournal]

App Developments - What is my selling line?!

What's my point of difference?

Who are my customers?

Figuring it out.

[interfacejournal]

Working on my Landing Page

I am working on a simple landing page for my application since the rest of my design will stick to a dashboard view the entire time. The structure below shows Bootstrap's Dashboard template, which I am currently hacking to make my own.

The landing page will have four "scroll pages" within itself, similar to the landing page of this code developer site:

http://foundation.zurb.com/

In Foundation's landing page, the "scroll pages" are key to convincing you to use Foundation to create your next site (so much so that I was utterly convinced that I should use it!). I am currently finishing up my landing page graphics, but the overall structure of the page will be like so:

Page 1 -

"An application to get your exhibition to professional levels." - using just the logo

Page 2 -

Where Art Professionals Come Together (desks graphic)

Page 3 - Seamless Attention To Detail In Every Step Of The Way (glasses graphic)

Page 4 -

Share - Visions and tasks, with all your pieces of information in one place Store - information about all your past exhibits and build your folio Coordinate - media and press into your event Web Exhibitions - there’s nothing stopping you from being the best Internet curator 

[interfacejournal]

Logo Name, Type & Palette Tweaks

I was not happy with my project name "ExhiBITs" when I started working on more refined logos this week. Instead, I brainstormed a bunch of other names that weren't as obvious to the concept of an exhibition and had a bigger correlation with the collaborative aspect of my application.

For curiosity's sake, here are a few examples of my brainstorm:

Curatehole

Curdinate

Exhibithole

Cross Eyes

The Cross Curator

ArTcurator

Curatestate

I arrived at Co.Curate keeping in mind words like 'collaborative' and 'cooperation'. It also resonates really well. Upon researching types for the logo (and subsequently for a lot of headers in the app), I had in mind a sleek, simple type that also showed a little bit of creative character. This type logo for Node, for example, inspired me.

I found some really cool typefaces: Elega, Eurofurence, Sifonn and Bouwen, all of which I tested above. Bouwen by Neal Fletcher gave me some really great results, and I incorporated a pair of round glasses to the logo because I think that my user is someone that is both an organizer and an examiner that pays a lot of attention to the intricate details that go behind organizing an exhibition. 

Finally, I ditched my old blue pastel/pink colour palette in favour of a simple, sleek scheme comprised of four main colours (blue, black, red and white) and two additional colours (light blue and orange).

[interfacejournal]

Project Architecture Tweak

I have tweaked my Project Architecture slightly. Here is the example to reflect those changes:

[interfacejournal]

Three specific bits of Javascript I will need:

1. Sidebar menu - Drop-down plugin for specific sections (i.e., Artists/Curators section)

2. Main Dashboard view (probably only for the desktop view?) - Shuffle plugin for viewing multiple sections within one section. I like this one:

http://vestride.github.io/Shuffle/

3. Sheduler section - Calendar plugin. This one looks like it isn't too fussy:

http://kylestetz.github.io/CLNDR/

[interfacejournal]

I like how this site adapts its content to different sizes. I am looking to build the same kind of clean responsiveness, so I will definitely investigate this website's code.

[interfacejournal]

UI Animation and UX: A Not-So-Secret Friendship

This is a super handy article moving forward into designing my interactive app.

"One way to use animation skillfully is to reserve it for the most important moments of the interaction—the ones most critical to the main message, or the ones that most need that extra bit of attention from users. For example, Fitbit’s dashboard both on the web and in the app uses animation to highlight updates to users’ data and new achievements, but not much else. It’s a pretty safe bet that those are the most important things to someone checking their Fitbit dashboard. And that’s a good place to start, because animation carries so much attention-grabbing power when it comes to hierarchy."

[interfacejournal]

Assignment 1 is done!

Hello world! If you can't find a link to my finished Assignment 1, it's because Tumblr hides it well. Here is an easy way out.

[interfacejournal]

This website is a branch of Independent Curators International (ICI), a not-for-profit organization that produces art exhibitions, publications and training. It is primarily a portal to curators and artists alike that have an interest in curatorship activities. It came up on a Google search where I was looking for relevant sources that discussed the curator-artist relationship. What I like about it is that its main aim, like my app, is to "connect merging and established curators, artists, and institutions, to forge international networks and generate new forms of collaboration."

Their 'Collaborators' page is currently under construction but the aim is to show what each curator and artist listed has been involved in, which I find a significant web resource.

It would be interesting to put something like that into place for my app - a database of collaborations. I am trying hard not to focus on the social aspect of my app, though, since I think sometimes it can lead to "personal marketing" strategies.

[interfacejournal]

Case Study 2: Master Tour app

Though Master Tour is primarily catered to tour managers and musicians, the App is centered on “once-off” events that work quite similarly as organizing an exhibition. Because of this, and due to the entertainment nature of both an art exhibition and a music event, I found some of Master Tour’s strategies worthy of borrowing.

The beauty of Master Tour lies in synching calendars, run sheets, specs, and other bits of vital information between the tour manager and his musicians. Instead of chasing down information from old e-mails, everything sits in one place specific for tour management. Genius.

[interfacejournal]

User Case Scenario and Desktop Design Iterations

[interfacejournal]

UI Sketches

[interfacejournal]

Site Map Iterations

[use-your-interface]

[interfacejournal]

UI Design Trend #3

Hover / Scroll / Swipe Animations

I really love this "nudge" effect that is possible through the use of hover activated animations. The particular "nudge" action depicted in this example would probably only work on a desktop browser, as the frame on a mobile browser might be too small of an area for a finger to hover over and perceive the animation.

Swipe and scroll activated animations work well on small screens, though.