ixd2-appstate-sp18

[ixd2-appstate-sp18]

Zeplin

https://zeplin.io/

Zeplin is a paid developer tool that allows to bridge the gap between design and code. This allows for placing your design into a system that will read the different layers and aspects you want the viewer to see on a web layout/phone app. This setup is similar to Sketch in that it will help you keep your designs on a guide to make coding much more simpler. Sites like Pinterest use this program to help with the varying size of their elements when users post their own files to their database. By going through sites with this program attached to their website, you can tell there is a level of organization and style that makes the user experience easy just like it does for the designers.

[ixd2-appstate-sp18]

UserTesting

UserTesting is a platform that provides video and metrics of users interacting with your website or mobile application. Along with prototyping, user testing is a critical part of UX and UI design, and UserTesting offers a convenient means of collecting this data. The program is fairly flexible. Depending on the plan, it gives its users the option to develop their own evaluation, or it will create the necessary tests for you. Apparently, the program also has access to a team of individuals proficient in user testing, who can provide feedback as well. UserTesting claims if you use their program, you can “get quality insight within hours, not weeks.” Testing your website or application can sometimes be time-consuming and somewhat frustrating. UserTesting’s digital method of collecting the information ultimately tries to make the process easier, not only for designers, but businesses as well. It allows you to connect with consumers around the world,and can even filter your target audience based on geographic, demographic, or socioeconomic status.

Designed to help those collaborating on more complex projects, UserTesting collects the data in one place and also provides an easy way to share the information with your design team. The program does seem to be geared more towards UX and UI designers in advertising and marketing. It seems to be targeting larger businesses and corporations who rely heavily on consumers and need to conduct a considerable amount of user testing in order to effectively target their audience. Some of their customers include Spotify, Hulu, CNN, Yahoo, PBS, National Geographic, and Nestle, among numerous others. Clearly, many big companies find it useful. Overall, it seems to be an effective tool in a market that regularly needs to conduct user testing in a quick and effective manner.

[ixd2-appstate-sp18]

ThingLink is an interactive tool that allows you to embed content (such as videos, text, or other image) inside of another image. This was originally created to entice customers to click on more content within the image. This allows them to receive more targeted and engaging content and also fits more content within a webpage, thus keeping users on the site for a longer amount of time. ThingLink boasts that it is able to turn a simple piece of content into something that is far more interesting and engaging.

This is an interesting concept, and I think that it could be a really cool way to add a level of interaction to a website. However, I think that there could be a very fine line to use ThingLink well. For example, it can easily begin to pop up when the user did not intend to interact with that part of the image. This can be frustrating when the user is trying to take in the image as a whole. Also, it can easily set a precedent or an expectation that fails when there is not this second layer of interactivity for the user to experience on every single part of the image. The user will quickly get to the point where they expect something to pop up, and when it doesn’t, they will most likely be shocked in a negative way. However, I think when used correctly, this could add a really cool layer to many projects. One that specifically comes to mind is Emily’s project on Omelas. This could probably be implemented in a way that would give the user a little more control over the content that they see in her site.

[ixd2-appstate-sp18]

Frank Collective is one of the studios that we got to visit in New York, and since I was one of the people assigned to them, I explored their website quite a bit. I thought it was pretty cool! When you first get to the website, a little slide with their signature “Hi, we’re Frank” pops up before sliding up and revealing a menu. From there, you can explore a little bit (hovering over each little phrase turns it blue and tells you what the page actually is). You could also pull out the little hamburger menu to get around.

One thing I LOVE about this website is the page where you meet the employees. Each photo is done in black and white with a gradient overlay, and those colors change as you scroll down the page since different sections have different colors. Then, when you hover over their photos, a black and white gif of them doing something that I assume reflects their personality starts to play. I think it’s a really nice touch and definitely goes along with their overall vibe. When you go through the website, you get the feeling that these are some pretty fun, laid-back people (that still get work done!). 

[ixd2-appstate-sp18]

This week’s site is focused on a designer’s personal showcase of his work. His portfolio website displays a clean aesthetic for the viewer who may be interested in his style. The layout of the home page takes advantage of not muddying up your first interaction with too many visuals. It works to have a uninteresting background so that you can focus on the interesting work. The hover over each project suggests his favoritism for the color choice. Once you click on a piece of work you are taken to an area displaying his process to how this design came about. Allowing for your site to be mobile-friendly is an important aspect in today’s society. With phones being the most popular tech device you need to be sure and cater to their needs. In the coming weeks I will be putting together my own portfolio website and it helps to dive into the mind of another designer and see how they present their work.

http://peterkstudio.com/ 

[ixd2-appstate-sp18]

On this site I stumbled across some really awesome interactive mouse effect demos that include all the code you need in order to implement them onto your web page. Most of the effects include some kind of particles with simulated physics and can be manipulated in order to fit your needs. Some of the experiences are broken, and some far more useless than others, however the zoom and pan mouseover code, as well as the Hover.css codepen are much more likely to come in handy on a project. If nothing else some of the aesthetic particle effects, with a lowered opacity, may play an interesting role in your site if they were to be play in the background while a user explored your domain. The code pens that come alongside the demos conveniently split HTML/Css/JS so that you can see what's going on and edit the effects real time.

[ixd2-appstate-sp18]

Crypton

Crypton is an interactive website exhibiting a  “cryptocurrency trading bot based on machine learning” of the same name. The website is beautifully designed, and clearly illustrates a relatively complex, abstract concept: cryptocurrency, a digital currency regulated by encryption techniques rather than an actual bank. The website successfully reflects the digital nature of cryptocurrency. It uses a monospace font, a scrolling interface, and simple, eye-catching graphics to illustrate the bot’s functions. The Crypton bot seems like an innovative, experimental technology, and the website’s playful approach coupled with its sleek, minimal design emulates Crypton’s aesthetic. The infographics used to explain Crypton’s capabilities are compelling but also easy to understand. The white, black, purple, and pink color scheme provides a refreshing color palette, and one that differs from more traditional techy color palettes which often incorporate greens, blues, and yellows. From what I can tell, the website uses HTML and CSS, along with JavaScript to create the more complex, interactive aspects of the site (the typewriter text effect, sliding scroll, and the moving infographics). Overall, I would say this is a successful digital interactive experience that manages to be visually compelling while also functional.

[ixd2-appstate-sp18]

GrandArmy

The website I’m focusing on this week is GrandArmy, a multi-disciplinary creative agency that is based in New York, New York. Their work and their website are equally beautiful in their own rights. Specifically, the website features really great interactive hovers to reveal titles and other basic information about their projects. Another cool aspect of this website is that they gave the user access to their project list and the description of the current project at any point on the page. This gives the user easy access to the most important information and also surprises them when they click on the book and the information slides out in a really nice, clean animation.

Also, just as a nice little easter egg, as the project titles are revealed on the hover, many of the projects include both the official title as well as a little bit of a sarcastic, tongue-in-cheek title. This not only feels very fitting for the personality of GrandArmy, but it also gives the user a little bit of insight on the project before even clicking into the case study.

[ixd2-appstate-sp18]

My interactive site of the week from Blue State Media, a Manhattan based design studio. The main interesting feature of this site is the changing div sections on the main page. They feature vibrant videos and images, keeping the user engaged with the content. 

[ixd2-appstate-sp18]

Lettuce & Co (weird name) is an event planning company based out of Australia. Their website is really nice and uses parallax scrolling in a different way than I have seen. I think that this website’s use of this technique adds an element of interaction that makes the user spend more time on the site than a regular gallery would. Although some of this web design may be distracting at times, I think this different way of creating a gallery is interesting and is definitely a wow-factor when clients look at their website. They have the pages laid out on grids when you actually click on the project, so that is definitely a nice organizational aspect to the website. 

http://lettuceandco.com.au/

[ixd2-appstate-sp18]

Sketch is a web layout tool, and will run you a little less than ten dollars a month for a personal license, however there is a free trial if you are interested in trying it out. If you want to get into the web development field this tool can be essential in saving you time by making your workflow far more efficient.

With sketch you can organize different elements of your webpage into groups, and change those elements across the entire website simultaneously. You can also quickly create shapes, buttons and effects with streamlined creation tools. Sketch allows you to preview your web pages on different screen resolutions, with preset previews including popular phones and laptop sizes. It also allows you to view all of the different screen size previews side by side in one window, which I found to be a really interesting feature. You start can start out with a preview grid of your choice and drag and drop elements onto your page while customizing them with an interface similar to photoshop, which is much more user friendly than having to change css and using live preview. If you are planning on ending up in web development I would highly recommend checking out the free trial.

[ixd2-appstate-sp18]

Unheap

http://www.unheap.com/?badge=all

Unheap is an expansive library of various different jQuery tutorials, plugins, and pre-built code. Its motto is: “a tidy repository of javascript plugins,” and it really does function as this. The website is similar in function to Code Pen, which I believe seems to be more popular and well known. However, some of the best parts about Unheap is the fact that it is so cleanly designed and extremely user friendly, arguably more so than Code Pen. Unheap has a really intuitive navigation bar on the left side of the screen that sorts the different tutorials into different categories. This gives the user the option to either explore all of the plugins at once or to easily narrow down their search based on what type of content they are looking to add. Another really nice feature of this is the fact that when a user clicks on a specific tutorial, they are taken to a page that not only gives them an overview of the plugin’s function, but they are also shown other plugins that are similar. This is a really nice and helpful touch that helps ensure that the user will find the best tutorial to fit their needs.  

Also, just as an added bonus, the website itself uses some really cool jQuery. That’s probably to be expected on a website that’s literally all about coding, but I just think it’s a nice touch. Most notably, they animated the screen’s responsiveness so that as the screen changes sizes, the content grid animates as it shrinks and grows.

[ixd2-appstate-sp18]

http://www.octoplus.ch

fThis website is really freaking cool. The studio, Octoplus Group, describes the site as “starting from single letters, we help brands to tell their story through a combination of strategic know-how, creativity and digital skills”. When you enter the website, you’re met with a blurb about how every letter tells a story while the page loads. Once the page loads, you see a white page with numbers. You can navigate the page with your mouse. When you click on a letter, the colors on the page inverts and an image appears. You click and hold to be taken to the page (which happens with a really cool color transition on the image.

I think that the techniques used in these first few interactions with the page make the experience very different from your typical portfolio website. For example, clicking and holding to go to a new site (with a little bar that shows you the loading) is a subtle thing, but different enough that it really changes the experience.

The pages for the projects is pretty straight-forward, but it does fade in as it scrolls. The pages are nicely organized as well, going through the process of the project. The sidebar is also really non-obtrusive. You can pull it over if you need it, but if you don’t, it’s just a collapsible thing on the side, out of the way.

[ixd2-appstate-sp18]

https://auwaa.ch/

So this is an interactive website made with PHP. I thought it has an interesting composition for website and I would consider it to be an inspiration piece for possible layouts for websites we could make. 

They have links to other projects they have done. One includes a website where you can only access it when the WiFi is off. 

I think this is a very unique website. The layout is not the typical thing you would see in websites made in the US. The only thing that may be a little confusing is that it is kind of hard to find their work, or realize that it is work they have done.   

[ixd2-appstate-sp18]

Because Recollection is a collection of interactive experiences tailored to musical releases on the Because Records label. Each experience features elements from the cover of the release as a way of showcasing the work and informing the user about it. It is quite slick, featuring animations with nice easing and no jerkiness. A sample of the music for each artist is featured on their page.

[ixd2-appstate-sp18]

James Bond Cars

http://www.evanshalshaw.com/more/bondcars/c25.html

This interactive web experience, is an example of how something informational could be enhanced by well-done web design techniques. This website compiles all of the cars that have been featured in James Bond movies from 1962 to 2015. The designer uses bright colors and interesting illustrations which makes this website feel unexpectedly different from the theme of James Bond movies. The use of parallax is what really entertained me on this website. When you scroll through the pages, the cars almost assemble themselves until that page fills your entire screen. The colors also flow very well. This is an awesome example of an interactive and web-based timeline.

[ixd2-appstate-sp18]

Mechanist

“Mechanist” is an interactive, portfolio website created by Niels Trumpie, a  “passionate creative, experienced programmer, and digital storyteller.” The website’s design is impeccable, and successfully displays Trumpie’s mastery of web development and digital design, despite the fact that he doesn’t include any examples of his work. The website itself is confirmation of Niels Trumpie’s mastery of UX and UI design. Trumpie flawlessly integrates color, music, typography, and interactive visuals to create this breathtaking piece of work. Navigation was the only aspect of the website that was somewhat unclear: in order to move through the site, users must scroll-down. While the design of the website provides subtle visual cues to prompt the user to scroll, like a thin vertical line placed to the left of the website along with a typewriter effect manipulating the body text, it would be easier to navigate if the interfaces was more clear.  Even so,  minimal nature of the website is appealing, because everything works together, both formally and functionally. The music on the web page starts as soon as the page is loaded. However, the users also have the option to turn it off if they would like. Overall, “Mechanist” is one of the most impressive websites I have come across thus far. While it clearly exemplifies Trumpie’s mastery of web design, it’s also a work of art.