Placehold.it

Placehold.it is a very useful tool for wire-framing, layout design, and early development.
All you have to do is use "http://placehold.it/" as the src in the img html tag, and enter a size at the end of the URL, for example 350x150. See example below.

<img src="http://placehold.it/350x150" />

Placehold.it is a quick and simple image placeholder service.

Placehold.it

What are we designing? A call to action

It was just last week,I was attending a demonstration of Blackboard Mobile.

Blackboard..the interface that we love to hate. In classes, over informal conversations, on trains, I have had roughly the same sort of conversation.

Me: Isn't this Blackboard program horrible? I mean, the interface is just..
Other person: Wretched?
Me: Yes, I mean who can navigate this thing?

...

So, sitting in a presentation of Blackboard Mobile, my heart sinks, just a little, as it is revealed that students from Stanford, working as a team, designed a new Blackboard experience. Blackboard hired a set of the students, who formed their own company.

Blackboard was just out there, waiting to be redesigned...waiting for some new experience to be set forth. Everyone knew it; it was glaringly obvious.

There are many other interactive spaces, used daily, that are glaringly obvious in their need for redesign, or for new platforms to be created.

The course description for this course, the official one, has something about collaborating in teams to create a product. How exciting!

What it is, instead, is something more wrote.

Why not the wrote within the framework of collaborative environment? Why not take on real-world problems?

Are we robots, churning out the next thing ("responsive design"), or are we doing more than that? Are we identifying problems to solve, thinking critically about products in our social world?

Where is that component in the course? Can we have it? Can we make it? Let's figure out, together, how to make the world a more friendly, usable, beautiful place, together...

Passion Code

Rob,
Here's a link to my "Passion" code.
Just right-click "View Source"
http://adamholstendesign.com/passion_small/

Gap Minder... Visualize data

Hey Guys!

Thought you all might like this. Especially Luis

http://www.gapminder.org/

Inspiration 005: FONT-BOT

Battling for the Future of type supremacy.

Bootstrap

"Bootstrap is a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions." This CSS framework is loaded with components, modules, scripts, its responsive, etc, etc. Project was built in Twitter and is open source. Code available on github. http://twitter.github.com/bootstrap/index.html

3D CSS

This is a real interesting 3d css website. It only works in Chrome however.

"Sometimes you need to see what technology can do before you can fully appreciate it." This offers a 3D website, just more things to think of for the future. I'm sure it was be cross browser in the eventually.
http://acko.net/blog/making-love-to-webkit/

More information
http://www.readwriteweb.com/hack/2012/01/pushing-the-3d-boundaries-in-w.php?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+readwriteweb+%28ReadWriteWeb%29&utm_content=My+Yahoo

978 grid?

Hi,
I read this article a while ago on Web designer wall:

http://webdesignerwall.com/trends/960-grid-system-is-getting-old


I started thinking in terms of a 978 grid after reading this. It gives you an increased content area...

I started to read the responsive web book, and it seems that advocating a 960 grid.

Thoughts?

Michael

Dabblet

Just found this Dabblet thing and been playing around with it for a bit -- pretty interesting so far.

Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code.

Link: http://dabblet.com/

Article: http://lea.verou.me/2011/12/introducing-dabblet-an-interactive-css-playground/

Inspiration 006: Lion in a Browser

A mostly operational Lion OS completely in the browser. Clicky

CSS Tricks

Hi Class,



I'm really liking this site, especially the code snippet part // the organization of the sample code and overall design of the site feels very intuitive.  

http://css-tricks.com/snippets/

Inspiration 005: Kristian Hjelle

Found this kid today on dribble and was immediately inspired. For the most part, I draw inspiration from the fact that he's incredibly young/talented. Clicky

Some resources on the responsive web

Hello,
I began finding some resources on responsive web sites over the weekend.

Responsive Web Design in 3 Steps

Some examples of responsive design

A tutorial on CSS3 media queries

And here is the original article proposing responsive web design.



Happy reading.

Michael

Firebug plugin

Hey folks, if you are having trouble visualizing how your code will look on a browser I recommend getting a Firefox plugin called Firebug.


http://getfirebug.com/

The video on the splash page does a pretty decent job of explaining it further if you wanna check it out.

# . difference in css

Good Article, Please Read Me


ID's and Classes: Information that is reusable should be kept in a class and information that is totally unique should be kept in an ID.


{Reusable Styling = Class}

{Unique Styling = ID}

Redesign of Brushes and Mindbody yoga app

The first app website I redesigned was Brushes http://www.brushesapp.com/. It is an app to paint with using the iphone and ipad. It was the winner of the Apple Design Award 2010! It looks like a great app and it made me want to purchase an iphone. I thought the website was rather boring however and didn’t do the product justice. I redesigned it showing more of the canvas of the app on the front page to show the purpose of the app right away. I also thought you should be able to view the paintings from the front page and put them below if you scroll down. Website



The Brushes website went rather quickly and decided to create a website that was more of a challenge and might require more CSS if we work with it in class. I redesigned the mindbody yoga app. http://www.mindbodyonline.com/yogaapp/#overlay/. This app locates yoga classes where ever you are in the country. Since I practice and teach yoga I thought it would be a nice app to have. The website wasn’t terrible but I did a redesign on it anyway. I used a map and yoga silhouettes from Istock photos to illustrate that the app had something to do with yoga in different locations. Website:

Mobile site redesign: Passion

Passion, the app.

The mobile app site I chose to redesign is for an app called Passion.

http://upscaleriver.com/apps/passion.php
This app is quite terrible, and has landed itself on a number of "Worst app of the year" lists. Its purpose is to measure how good at sex you are using "the iPhone's distinct features such as the microphone, accelerometer and many others to determine an accurate score."

I have never used the app personally and I don't know of anyone that would. The website marketing the app is dull and unresponsive.
The white rose image I added is from 
http://www.sxc.hu/photo/958221 
and is used fairly.

The redesigned Passion site

Codify

Codify

Travel Planning with TripIt

Planning trips can quickly become a disaster. Whether you're traveling alone or with a group, you still have to keep track of plane tickets, hotel reservations, and your basic day-to-day itinerary. You spend a substantial amount of time planning the trip, calls, web brousing, research (including the weather forcast for where you are going). The trade off might be worth it, but getting there can sometimes cause stress. Fortunately, iOS apps like TripIt can help you manage all of the nitty gritty details and let you focus on what's actually important: the trip itself.TripIt is an app made for the iPhone and iPad, Blackberry, Android

You have a choice of how you organize your trip. Setting it up on the app appears easy—on the TripIt app just select “Add Trip” from the menu bar down It's even more convenient if you have a gmail account—TripIt will grab your itinerary right from your email, and saving you time and extra steps.

When you get your email confirmation, you can forward your email to: plans@tripit.com, and the service will automatically add the information to your TripIt account. TripIt can also automatically detect things like airlines, flight times, confirmation numbers, hotel names, and more.

The app first was offered in a free and fee based version Now it appears that it is fee based, which made some reviews unfavorable, given that there are so many other free apps from the airlines, airports, AAA, etc. However, its all in one functionality and ease of navigation makes it worth the cost, and is easy to navigate.

The website for the app is at: http://www.tripit.com/uhp/mobile

ECOKI App Site

http://ecoki.com/iphone/

The site for an app that I chose was called ECOKI for iPhone. It is an Eco News app where the user can read up on some environmental news around the world. It contains articles, lifestyles , and things that you can do in the community for change.

When you enter the site, you're instantly appealed by the site's photography and layout design. It has a beautiful photograph in the background that unifies the whole layout and bring it to harmony. There are various textures and clear images on the site from stained paper , tea leaves, glass cup, wood counter, tree branch, and paper clipped logo. The app is about eco news and the design really displays that. The color scheme earth and neutral tones and it is appropriate along with font style . The only thing that I did not like about the site is that it's not a responsive site. Since there is a lot of "white space" around the text and images , the layout doesn't feel cramped in when you move the browser window to lower size so I think it can still work on the mobile devices.

Lastly, the site gives the user easy directions how to buy the site but also clear button to click on to navigate the original site for the company. Enjoy!

SPC Music Sketch Pad.

I decided to post MikroSonic's teaser page for the SPC Music Sketch Pad App.  As far as the design on the site it is very light and clean.  Obviously the main portal for inquiring about and acquiring the product will be directly through Android Market so the site can be largely rudimentary.  The key feature however that this site does have is the QR code link ups.  This will allow users to scan the code and be directed right to market.  The major rule of sales: Make it easy to buy!  The app itself is appealing to me because it's design seems eye catching and functional! They have packed quite a few features, some of which are very processor intensive into a mobile app!

Check it out!

Nizo

Nizo is an 8mm-retro-cinefilm type iPhone app.

The teaser page, http://nizoapp.com/, lays out the components of an 8mm camera. As the user scrolls down, the components appear in screen and arrange themselves to fit the page. Each of this components can be dragged and re-arranged by the user.

The parallax scrolling (/wiki/Parallax_scrolling) effect, looks like is accomplished using JavaScript.

app website http://whisper-app.com/

I looked around for quite some time to find an app website that appealed to me. I don’t have a hand held device so I’m not very familiar with the market. I found companies that sold apps but often failed to find a website for just one app. I eventually stumbled on a website which was a design showcase of web app designs. (http://sixrevisions.com/design-showcase-inspiration/35-beautiful-iphone-app-website-designs/)

The app that caught my attention was called Whisper. It’s an instant messaging app for iPhone and iPod Touch. It allows you connect via Wifi or Bluetooth so you can share contacts, sketches and pictures. It looks like it can be used as a white board for sketching while you are chatting. Evidently there is no server involved or cellular network to connect to.

Visually the website caught my eye because of the colors and the simplicity of the design. Most web designs today in my opinion look like a blog with a white background and boxes. I liked the black background and the bright green colors which gave it a slightly different visual quality. I thought the branding of the script logo sold the app’s function and I especially liked the cartoon like chat box with the I found the six boxes easy to view and it told a story without having to go through pages of information. The six photos complimented the mobile device image which included the app being viewed.

The website is functional and pleasing to the eye but not wildly creative. Even though the photos explained the app’s function, it would have been helpful to go into detail about the app somewhere else on the website. I would have called FAQ’s ABOUT and would have included some of the FAQ information and added one concise paragraph about the app. This gives the viewer the option to view the photos on the front page and more information on another page. The FAQ’s page also shifted when I clicked on it in IE8.

Site marketing app: Path.com

Screenshot of Path app.

https://path.com/

Path is a new social-networking/photo-taking/video-sharing/location-sharing app that launched on both Iphone and Android market this year. The app itself is very similar to facebook and doesn't seem to do anything exceptionally different to make it stand out. It has less users than facebook, approximately 1.5 million downloads so far, so I guess that makes it the more private social networking alternative.

The website marketing the app is not so hot. Its strongest feature is the splash page, which is simple, clean and responsive. The demo video is good and it gives you a basic understanding of this social networking app. The ad video tries really hard to be friendly/charming but comes off as more of a sappy/creepy affair.

The rest of the site is bare bones. The about section is a list of boring text with little color and no pictures, the blog is dull and barely engages the user.

The team section lists lovely pictures of the developers' shining faces but doesn't provide any other personal info (job title, work experience, favorite color) besides their name.

Overall this site is lacking. Like the app, https://path.com/ lacks the color, character and unique qualities that make it stand out from facebook.

The front page.