Person To Interface Interactions

I’m a nerd. I love technology, and I believe in the potential technology can play in design and our everyday lives. I’m very excited to be a communication designer right now because of all of the amazing changes that are happening with the internet and mobile devices. There is a whole new way to communicate and convey information that can always keep you up to date an informed. I have spent the past year and a half really refining my web technical skills in HTML, CSS, jQuery, and recently PHP. With these skills, I have been able to come up with a user driven way of getting people to communicate without actually being together.

Some people may be scared of all of the ways you can stay connected or communicate online, but I believe it is something to embrace. With today’s children and young adults being raised on social media (my personal experience was Xanga then Myspace then Facebook then Tumblr then Twitter) you have to integrate these sort of things into their lifestyles. It’s how they know how to interact in the most honest way.

Our world is increasingly impersonal because of these things, but only because they are not directly integrated into our other day-to-day interactions. By evaluating what these social platforms do correctly and designing my own version of an online conversation, I have been able to develop a system that will promote conversation between members of the CD Community online. These online conversations will then help nourish person-to-person conversations.

By developing an online mode of communication, you can build relationships in an indirect way. Having a conversation online gives you a shield from harsh reactions and incomplete thoughts. It can give people the confidence they need to truly say what they want. Relationships are the driving force behind comfort and engagement regardless of who or what the relationship is with.

It’s unfortunate, but some people are just awkward when engaging people face to face. More often than not, these people have much more confidence in a digital
world. The website I have designed for this community is mainly for those types of people, followed by those who are busy and cannot always make time for person-to-person interactions. For both of those groups and everyone else too, the website functions as a hub for information in the department.

Dot Com

What does a community site actually entail? It does all of the things you’d expect out of an educational institution. It has information on CD at CIA, information on the faculty and curriculum, a student gallery, and also a tour of the studio. This information is great, because it is what will attract new members to the community, but the fact is that this website needs to function for the current members too.
In order to meet these needs, I’ve set up the site with three main sources of news for current members of the community. The first is the CD Blog. The CD Blog serves as an administer curated news feed for any and all things CD. It is where information on events goes, changes to the department, featured students, guest speakers, and so on. This CD Blog is for everyone to stay updated on the latest CD information. The latest stories appear on the homepage of the site, and an archive of all the blog’s posts is available just one click away. At the bottom of each blog post is a place for conversation. As a member of the site you are able to comment on and/or start a conversation about the CD Blog post. This is how you engage people on this site, by having a conversation about a common topic.

The Second source of news for the community is the twitter feed. I know a lot of people hate on twitter for reasons like being updated too much, but when used in a calm and rational way, it truly is the best way for quick information to be shared. I have created the twitter handle @ciaCD so that information can be quickly shared with the community when there is no time to write a blog post. Some things don’t require a blog post either. A quick tweet can solve that. The twitter feed is embedded into the homepage of the site. I think that a social media push is one of the best ways to get members of this community active in sharing information. By tweeting @ciaCD you can share information with your community. All relevant information will be retweeted and show up on the homepage of the website.

The third and final source of news is the one I am most excited about. It is the student run blog. This blog is completely populated with user uploaded content. Users to this website can simply log in to the site and post an entry. I intend for it to be used for online critiques of work, or conversations about relevant topics to design, but that will be completely left up to the community. The main goal is to have people conversing through the site when they are unable to in person. The conversation happens in the same way as the main CD Blog—a conversation is placed at the end of each post.

I Made This as Nerdy, I Mean Awesome as Possible

This is the part of the book where my true nerdom will shine. Please excuse me while I geek out in this explanation of the CD website. I’ve built three really awesome features into this website. The first is about what we’ve touched on already, user uploaded content.

I had a hard time deciding how I was going to build this site. I knew that I wanted people to be able to upload content to it, but I wasn’t sure if I should just hard code it to prove a design concept, or to try and make it a 100% functioning model. I ended up going with the latter, and it was definitely a struggle.

I built the site on the content management system (CMS) WordPress. WordPress is an open source PHP and CSS theme based CMS. Basically when you start working with WordPress you have two options: work from a pre made theme and change how it looks, or start from scratch and program the functionality as well as how everything looks. Normally a designer would go for that first option, but I decided to tread into unfamiliar waters and go with that second option. I believe that the content of a site should be as integrated into the interactivity and look of it as possible. That’s the reason I decided to do it that way, to be more consistent in my goals. I made this entire website from scratch, and it was HARD!

After the fact side note: This was my very first foray into both responsive web design and development, as well as WordPress. In the six months since I wrote this, I have developed several responsive frameworks on and off of WordPress. I definitely consider myself a mobile (small screen rather) first responsive design zealot.

I learned really fast that I was way out of my element in attempting this. I had to start over after working on it for three weeks because I had done some fundamental things wrong. I struggled through it though and learned a ton about the platform and also PHP. I am glad that I did it, because I have a much greater appreciation for the people who do this for a living. They are all superstar geniuses. Because I struggled through this process and built it the way I want, the site has no extra baggage with it. It does what I want it to do and nothing else. It’s easy to update and easily accessible for users.

The second thing I want to share is that the website is black and white, until you interact with it. Every section of the website has two states, inactive and active. The inactive state will always be black and white, and kind of dull looking. But when you interact with it comes to life with color and in some instances animation. To me, the internet is like a story. You can always get the information from the pages,but when you create a personal connection to the things happening on screen it becomes an experience on its own. That is the goal of the site— to inform and to entertain.

The way I was able to accomplish this is using a ton of CSS (cascading style sheets for all of you non internet folks) styles. CSS is how you style how things look, and from this experience of designing and building the site, one super great way of programming in interaction. With the latest iteration of CSS3, you can program things to move, resize, and “breathe” in a natural and very fitting way. This is truly a metaphor for the community and experience. Without an experience, life is just dull.

The last of the techno mumbo jumbo I want to talk about is the fact that the site is responsive. What this means is that at any size screen, be it a giant monitor, or the screen on your phone, the content will reflow to a tailored experience for that size. This means no pinching and zooming to see things, and no mobile only site. Everything just works the way you’d want it to on whatever device you are browsing in. Plain and simple when you’re browsing, not so much for development.

Designing a responsive website makes you think in an entirely different way. You can’t think in absolute sizes because things need to reflow as the screen size changes. You have to think in terms of percentages and proportions. You also have to have a strategy prior to designing for how content will reflow at different sizes. If you don’t take all of this into consideration, the browsing experience becomes ineffective and more trouble than it’s worth.

The way that all of this is accomplished is through CSS and @media queries to target specific sized browsers. @media queries allow you to set rules for certain sizes that differ from other sizes. They are fantastic, and I expect to be using them for the rest of my life.

I developed the site with a 12 column flexible grid that resizes at four different breakpoints: big monitor (1200px + wide), tablet (768px wide), small tablet (640px wide) and phone (480px or less wide). Each of these breakpoints required a good deal of CSS to make the content fit and function correctly, and I am very happy with how it turned out.

Time To Sign In

It is the end of the school year and I am just finishing up the website. I wish I could have finished it sooner, but time just did not permit. At the time of writing this I have had six beta testers on the website, and plan to enroll everyone before I give a presentation on my thesis.

I believe that if this community utilizes all of the features and functionality that I have built into this website that they will definitely have a positive experience in integrating the social aspects of being a community from person-to-person to person-to-interface. These two types of interactions will feed off of each other and create more personalized and in-depth engagements and relationships.

Never forget about your environment, never forget about Chapter Seven: Welcome Home.