More selected projects

Your Portfolio is empty. You can start adding Items throught your Wordpress admin panel!

All Posts in Design

July 6, 2016 - Comments Off on How to Troubleshoot InVision Sync

How to Troubleshoot InVision Sync

If you're like me, you might work somewhere that uses InVision for prototyping apps and websites. It integrates with Sketch through a tool called InVision Sync. This tool can solve a lot of workflow issues when uploading screens, but sometimes has its issues. In the past week, I've had some major problems with one of my projects at work. When I turned to the InVision documentation to figure out how to resolve syncing issues, there were no definite answers. I also had great difficultly finding solutions by Google searching. I want to document some measures you can take to get your project back up and running smoothly as soon as possible.

1) Manually Save in Sketch

Auto Save is pretty awesome, but sometimes it sends too much info to the Sync client at once and confuses it (or at least that's what it feels like). A good ol' Command (⌘) + S will occasionally get the message across and get the sync going.

2) Pause & Resume Syncing

Sometimes simply going to the InVision options, clicking "Pause Syncing," waiting 10-20 seconds, and then clicking "Resume Syncing" will do the trick.

pause_sync

3) Log Out and Back In

If the pause/resume method won't work, this slightly more extreme method can fix it.

logout

4) Quit InVision Sync, Then Reopen

quit

Sometimes this will initialize the gloriously successful file sync you have been looking for your whole life.

 

What to do Next

If none of the above solves the problem, you might be suffering from what the InVision documentation refers to as a "broken sync." From what I have read, once you get your project here, you can't do anything to fix it.

InVision's advice on avoiding a "broken sync"

This is not true though. This is not the end of the road. Your project can be saved. Stay calm. 

5) Rebuilding the project

If you think you are suffering from a broken sync, here's how to fix it:

  1. Save your Sketch file locally. Make sure you take the "Assets" folder too if you got anything important in there.
  2. Go to InVision and archive the old prototype, you don't want to mix it up with the new one.
  3. Create a new project and give it a new name. Probably not a good idea to name it the same as your broken project.
  4. Once your project is created, there should be a new empty project folder in your InVision folder on Finder.
  5. Then you can move over your files you saved locally. Be careful though, losing the file structure in that folder can break your sync again.
  6. After that, you should start seeing your screens appear on your InVision project in the browser.
  7. Unfortunately, there is no way to transfer your old links and transitions. You have to go back and manually re-create them.
  8. You should be back up and running after this! Happy prototyping :)

February 29, 2016 - Comments Off on Mobility Map Mobile Prototype – Call for User Testers!

Mobility Map Mobile Prototype – Call for User Testers!

I made some pretty big strides in getting a large amount of the screens for my Mobility Map prototype done this week! Here is walkthrough of my prototype as it appears this evening.

 

 

As usual, you can have a more ~interactive~ experience if you head over to my inVision prototype.

Moving forward, there are several things I'm going to need to be doing as we approach my ambitious deadline to have desktop, tablet, and mobile prototypes I am proud of by spring break. I am going to start collecting feedback on my mobile prototype through some user testing, but at the same time this week, I'll be translating my concepts for a phone screen to that of a tablet.

User testing is going to be pretty informal, and just using the commenting feature built into inVision. I'm probably going to make a post of all the feedback I get, and how I'm going to make changes to address it.

If you are interested in testing, follow the link to the prototype on an iPhone 6 or a desktop computer. Below is a quick video on how to use that feature if you haven't before. If that isn't working, feel free to just comment on this post or email me.

 

Overall, I feel that I am in pretty good shape! It's really cool to see this coming along.

February 15, 2016 - Comments Off on Thinking About Accessible UI Animation

Thinking About Accessible UI Animation

I basically have given myself 2 weeks to work out my mobile mockups. The way I intend to go about this is to do quick sketches if needed to help myself visualize the identity applied to the UI concepts and information flow I worked out last semester. Here's some examples of what I did for the home screen and menu right before starting to lay it out in Sketch.

IMG_0221IMG_0222

I've also been working on how the animation for the menu items is going to work.

Making the design decisions associated with the motion has been done with accessibility in mind. since I started this project, I've been looking out for resources on motion design for UI and its relationship to accessibility. One of the best resources ob this topic along with good explanation can be found in Val Head's A List Apart article on the subject (she also put out a great list of resources about it!). She explains the issues with current UI design trends (parallax, scroll jacking, etc.) and provides examples in how the implementation of these motion effects could be problematic for the user experience of people with disorders that result in motion sensitivity (vestibular disorders, vertigo, dizziness, migraines...).

There are also suggestions in the article about how we can create meaningful UI animation that contributes to the users experience. In terms of accessibility, it is very important to keep the animation consistent, and make the user feel like the animation that takes place is logical and does what they expect. In my example above, all my transitions make sense in that they are chronological and logical. If the user opens the menu, it slides in from the right, and if you close it it slides away back to where it came from. If you try to visit the add a point screen, you will be advanced to the next screen on the right via a slide animation, and when you want to return to the map, it will reverse the way you slid in. I intend to continue to follow this concept through all my screen transitions.

I'm going to avoid any automatic animation. The user should be in control of when things start moving around. Animations should also not go on for more than 5 seconds according to WCAG Guidelines, unless there is a way for them to be paused. I don't think there's any real need for this kind of animation for what I am making, but I felt it was worth mentioning.

 

 

February 8, 2016 - Comments Off on Refining Identity and Starting to Apply it to the UI

Refining Identity and Starting to Apply it to the UI

This week, I have been working on furthering the visual identity elements, and thinking about how I'll be applying them in the user interface of Mobility Map.

I've formed sort of a "style guide" and built more onto the visual identity I have developed so far. As I'm working through my identity, I'm checking it against simulations of the most common forms of color blindness.

Screen Shot 2016-02-08 at 12.12.21 AM Screen Shot 2016-02-08 at 12.13.31 AM

I added some ideas for what I want body copy to look like, as well as thinking about how my stylistic concepts apply to the UI. In the style guide, I included a more finalized sample of a Mapbox theme optimized for accessibility. I was influenced by this terrific blog post that walked me through some ideas for using Mapbox Studio to create a more accessible basemap. It uses a primarily monochromatic color scheme, and uses Lexie Readable (a typeface optimized for legibility for dyslexic people- a little Comic Sans-ish but pretty sound when all uppercase) for the labels.

logos

I currently am having difficulty getting the map to label the buildings properly, but I have submitted a ticket to the Mapbox team, and hope to receive assistance with it soon. I also hope to create another theme that uses the DIN Round Pro from the logo instead of Lexie, and perhaps one that isn't optimized for color blindness. The idea would be the user could select which basemap they prefer.

This week, I'm getting my mobile prototype off the ground in Sketch. I've got my project set up with inVision Sync, so I can see it update on the prototyping platform in real time as I make changes to my Sketch file. I started applying my Home screen concept to the Sketch file, which then transferred over to inVision seamlessly!

Screen Shot 2016-02-08 at 11.57.38 AM  Screen Shot 2016-02-08 at 12.08.50 PM Screen Shot 2016-02-08 at 12.09.16 PM

This week I'm going to finalize basic interactions with the menu and make some interactivity decisions for the home screen, which will then be applied throughout. I'm probably going to be looking into animation acceptable for use with vision impairment along the way. I'll share my resources as I come across them, as usual.

 

February 3, 2016 - Comments Off on Designing a Logo Following Inclusive Design Principles

Designing a Logo Following Inclusive Design Principles

Background

For those unaware, I am a current senior at SUNY New Paltz working on my Graphic Design Thesis. For the project, I am prototyping an web app I'm calling Mobility Map. Think Waze, but for physically disabled individuals in pedestrian settings. This semester, I am focusing on what the user interface and information structure would be if this app were to be built.

A large component of this project being a success is making sure that I make my visual components readable and usable for people with a variety of impairments that could inhibit their user experience. This past week, my task was to come up with my font, color, and logo selection that I would use throughout the Mobility Map Interface. I'm going to walk you through my process, so if anyone is interested in how this is done, or doing research for a similar project, I can be of help to them!


Process

As with any logo concept, I started with sketching! Here's a look at some of my ideas before I got onto the computer.

 img002img001IMG_0201

(Above) The sketches done in pen were older, and helped inform the ones to the right done in pencil. Originally, I was too stuck on my idea of what a mobility impairment is. It isn't necessarily someone in a wheelchair. Mobility impairments can be shown in different ways, and there really wasn't a simple way to convey that aspect in the identity. I also don't want to alienate users who don't necessarily have a documented mobility impairment, but need to use it on a case by case basis (a user category I've been thinking about is able bodied people on skateboards or bikes).

(Below) After working on these concepts in pencil, I started translating my favorite ideas into type and vectors on Illustrator. There, the ideas kind of went off in different directions. I also experimented a little with color, just to give myself a better idea of how the elements would interact.

 

Screen-Shot-2015-11-06-at-4.27.03-PMScreen Shot 2016-02-03 at 3.09.32 PM


Font Selection

When it came to typeface selection, I wanted to select something that would be extra readable, and welcoming. This led to me looking for something maybe with a history of being used as signage, like Highway Gothic or Frutiger. I also like the "friendliness" conveyed by Museo or Proxima, but a concern was coming across as childish or silly.

121401_fg0x     2478437a7313d272936c684b6b2b4e

Screen Shot 2016-02-03 at 3.45.28 PMIn the end, I went with DIN Round Pro, which is a typeface derived from a German typeface called DIN, which stands for "Deutsche Industrie Norm." The font was originally intended for use in industry in Germany, most popularly on Autobahn signage. (source) I think this modern, rounded twist on an industrial, readable sans serif serves well to what I'm trying to accomplish.

Another factor that contributed to the selection of DIN, is that there is a lot of differentiation between the characters. My typeface selection was influenced by this guide for typography for the visually impaired. I tmade many valuable points, such as how illegible serif fonts could be when italicized, as well as how it's best to use sans serif with high x height and differentiation between characters. (see left)

 

 

 


 

Color Selection

Screen Shot 2016-02-03 at 3.09.46 PMAnother concern when making decisions in the appearance of an interface is making sure the colors you use don't make your product unusable for people with vision impairments of varying types, including low vision, color blindness, and dyslexia. Contrast between elements and theor backgrounds is crucial to color schemes being useful. There are a variety of tools available for devising accessible color themes, and these 3 are my favorites:

Color Oracle- desktop application that allows you preview what your screen looks like if someone with the 3 most common forms of color blindness would see it

Color Brewer- color scheme generator with intent to be used in geospatial data presentation. I has some filtering options for people with color blindness

Color Safe-  assists in making typographic color selections to meet WCAG Guidelines of text and background contrast ratios.

 

I applied the color scheme to my favorite progress logo, and really liked the result!

Screen Shot 2016-02-03 at 2.46.34 PM

 


Finalized Identity

After picking out the colors I wanted to use, I applied that to my favorite logo concepts. Here is the result:

 

Screen Shot 2016-02-03 at 3.06.17 PM