HTML: Wired forms

For some reason, I never got the email that Dr. Delwiche sent out with the link to his Wired Forms site. So to say the least, I was a little confused as to how I was doing this. Luckily, Erica forwarded the email with the information, so it was pretty easy from there. I already had everything set up so I knew what I wanted to include on my survey. I had fun with designing the page and using Photoshop to combine the three logos of Anthropologie, Urban Outfitters, and Free People. It was interesting though watching Weinman’s video on XHTML and HTML because it was slightly outdated.

So if you’d like to answer my survey, feel free too. Except, I would like to avoid a mass of emails to my inbox. Click here for it!

Technology Forecasting

Click here for the PDF version on my white paper about Instagram. I have to admit, I had a lot of fun researching Instagram.

Since you can’t upload pictures through the computer onto Instagram, here’s how their website looks like.

If you’re an Android or iPhone user, you have to try out Instagram, it might not be your type of thing, but I’m obsessed with it.

Here’s an example of how my profile on Instagram looks like via the iPhone application.

Mobile UI Badge

When I originally started the Mobile UI Badge, I was considering remaking the mobile site for Tumblr, since I think it’s one of the most annoying mobile sites to navigate. After talking to Dr. Delwiche, I found out that I had to make a site that did not have a mobile layout in the first place. I ended up choosing tLearn because I always hate going on it on my phone. I was having problems with Mockflow, so I ended up using Balsamiq Mockups which I had a lot of fun with. It was really easy to use and had a lot of different options I could include on the mockups.

When I first started making a layout for the site, I looked around tLearn to see which features are the most useful and the ones that are used the most. I first started with the login page. What I included on the login page was the username, password, and the option if you forgot your username or password. I decided to make the layout very simple. I wanted to make the main focus point the username and password option. One of the decisions that was important to me was making sure the site still looked like tLearn. I took the banner from the tLearn site and put it in the same location on the mobile site as the normal site. I wanted the site to still have the “tLearn” feel and I did not really want to incorporate any elements from any other sites.

Here is the mockup to the login page.

The next page I decided to design was the page you reach after logging in. On tLearn this includes the main menu, courses, a calendar, quick resources, library resources, and other options. Going off of my own experience with tLearn, I mainly use the courses section, and rarely use the other options. Since this is really the only feature that I use, I decided to make it the main focus on the page. In my mockup, I included the classes that I am taking this semester to show how the setup would look.

This is the mockup for the courses page.

Some of things that I thought was very important in making a mobile site was keeping it simple. Maybe it was the leftover minimalist part of my brain thinking, but I wanted to keep it simple. I did not want to include anything that would take too long to load and overwhelm the user.

Overall, I had a lot of fun coming up with these designs. It was fun to try and figure out where exactly I had to put each link. I originally had sketched out some drawings about how I wanted each page to look like. It was easy to translate my drawings to the computer.