Interface Design Class Blog

Random Collection of Screenshots

Some Final-ish mock-up’s of the site design style and layout. I find myself leaning very much toward the material design end of the design spectrum. 

Interactive Data Visualizations:

I don’t know how much interactivity I’ll really be able to build into my design but these two sites do a pretty good job of representing the data that they deal with. The first of the two, I believe, was shown in the lectures as an example of good interface design.

The site http://guns.periscopic.com/?year=2013 shows deaths, years of life lost, age of victims at time of death, and much more. The site is showing its age a bit. There is no scaling, it’s a fixed width and while the actual interactive elements are functional and beautiful they are not the most user friendly, especially for touch devices.

Flaws aside it does do a great job at what it is designed for; namely, it draws attention to gun deaths. There is no suprifilous information, no distracting social icons or twitter comment feed, no comments section, no banner adds. The site draws your attention squarely to the problem it represents. Even on older, lower resolution screens the information fits without having to scroll and there is no way you’re going to miss said information.

Next up we have an interactive visualization of the data that was at least partially represented in the infographic I talked about in a previous post ( see: http://slewisinterface.tumblr.com/post/115033820247/comparing-designs ). While dataseedapp.com may limit design in some ways, they certainly allow those working with the site to define colors as they see fit, and in this instance, unlike the other visualization of the same data, the color mood is a somber one. Gray’s, blues and an overall muted palette showcase the kind of information we’re dealing with.

The graphs actively change depending on the active data sets and can be manipulated by the users. While the site does maintain a fixed number of columns and does not reflow to a mobile view, it does stretch and adapt to window resizing. Ultimately I believe the main downsides of this design are simply the limitations imposed by using a prebuilt resource. At the same time though, using that pre built resource allowed the data from the other visualization to come to life. It let users drill down and see what was really going on where, and because of that I think it is just as, if not more effective than the other representation of the same data.

http://mc3.com.au/

 It's a different color scheme than I plan to use, a totally different topic than what I'm working on, and done by people on a totally different skill level than me, but it uses design principals I love. The use of clean, uncluttered information, clearly readable text and screen spanning imagery are all things I love to see, and plan to use.

http://mc3.com.au/project/gevity/

I'm especially a fan of How they handle the individual project pages such as the one linked above. True, the page is heavily image laden, which can be bad for particularly slow internet connections, but the design is clean and concise. The divs are clearly divided without losing the flow of the page. I believe their layout for this page is a great example of showing off the implementation and design of the product they are showcasing.

One issue I have with their homepage is the top nav bar. It looks pretty and it holds to the design of the site, however, because it is see-through text and icons passing under the bar can cause readability issues as elements from the bar and main page overlay each other.  

Another thing that doesn't make much sense about their design, to me, is the hamburger menu in the top left. While that menu type is totally functional it doesn't act like a standard slide out menu you would expect this icon to summon. Instead we have a regular old dropdown menu. This menu doesn't change its style if the window is the size of a phone screen either, so while they used a mobile friendly, or at least mobile familiar icon it does not act like you would expect on mobile. The dropdown menu is also only partially opaque, which follows with the overall feel of the site but again can cause readability issues.

A Hungarian psychology professor once wrote to famous creators asking them to be interviewed for a book he was writing. …