Session 3: some design principles

We’ll look at some sites, learn some basic concepts, discuss the reading. And begin on our projects.

  • Recap : what did we talk about Thursday?
  • Reading/homework
  • User experience and aesthetics

Reading/homework

  • Come to class Monday prepared to share two or three sites that inspire you in some manner — hopefully in the context of the site you want to build in this program. We’ll work in small groups but a few people will address the entire class.
    • Share your inspirational links by posting a comment on this blog post.
  • Projects:
    • Precis to include elevator pitch refined (should include site goal/audience); three personas; wireframes (rough sketch / gray); color ideas; social integration

Lecture notes (ppt)

Google Hangout (maybe)

Lab/Assignments for Thursday

Resources

Advertisements

17 thoughts on “Session 3: some design principles

  1. Inspirations for my future site, a Seattle metro wine and cheese resource.
    http://www.gotastewine.com/seattle-wineries.php Although I don’t like the look at all, this is the type of reference I want. The look feels really utilitarian, and I dislike the map as the central focus. I would add categories of neighborhood, etc.
    http://www.washingtonartisancheese.com/ This one has a much better feel, with clear links/text, and a call to action on the front page to buy tickets to the next event.
    but I want: more mouthwatering pictures + bloggers/featured wines/cheeses.

  2. My sites
    http://www.allthingspawsitive.com/dog_training.html
    I like this site because of it’s simplicity on the UI. I get to the site, I understand the theme and purpose of it. Links on the top of the page is helpful to allow navigation to happen easily and it’s right there on my face so I don’t have to scroll down/up, or to the left/right. The information on each of the page is easy to understand and not overloading. The look and feel on each page is consistently throughout. When I am on each page, I can get to what I need easily. Location and telephone number are located on top of the page, on the header so I don’t need to search through the About or Contact page to look for it. It’s easy accessible if I want to look for it. Content is uncluttered.

    http://www.xbox.com/en-US/#fbid=JgRyAl7PCyP
    I like this site because of the image scrolling on the front of the page. I like the navigation from page to page using the scrolling arrows. I also like the colorful pictures on the front page. The contents on the pages are not cluttered and presentation is simple to read.

    Google.com
    Simple search and the Google logo image changes sometimes according to national/international holidays, reflects current issues, and hilarious sometimes.

    Bing.com
    I don’t like this site because it is too much things going on for a simple search engine. Although, I understand why lots of information are present, it becomes confusing as I don’t really know what I need from the Web site. Also, don’t get the Facebook integration at all. It’s useless.

  3. Hewwo…Jeremy here… I’m not sure what my project for this class will be…but probably music related. Here’s a cool music site citizencope.com

  4. My goal is to do a redesign for a customer support site, I looked for inspiration across several different industries and their respective sites. Two sites that had elements I appreciated were: https://www.blackbaud.com/support/support.aspx and http://kb.mailchimp.com/home – they are: simplistic, easy to access from the main page, empower the user and avoid being an overwhelming info dump. They almost risk being too plain, however I feel that this is the preferred side of the spectrum to be on compared to a more cluttered site like: http://help.ancestry.com/app/home with way too many links and distractions.

  5. Observations about moonsflow.com : the good- it reinforces the author’s brand (he likes things that move), and it’s a novel concept. The bad- constant movement is distracting and annoying!

  6. Follow up to first part of session 3 (“inspring sites”):

    An elegant site that I really like: http://forecast.io
    This is a weather site–graphically clean and highly functional: can easily get weather from anywhere in the world. Very simple to get historic “time machine” and future “forecast” weather, as well as current conditions, including graphical display of high & low temp. You can easily switch between degrees F and C. Easy to get more detailed info by clicking on the plus sign next to each day’s summary. If I were still at the public library, I’d link to this site on the library’s reference page.It may be better to call the historic weather something more descriptive of past time than “time machine.” No “about” page–but if you click on sponsorship, you can see why there’s an ad in the middle of the page.

    More along the lines of what I’d like to accomplish with the project I have in mind, i.e., providing information and generating interest in working with my team:
    http://www.duarte.com/ This is the site for Nancy Duarte, presentation (i.e., PowerPoint) guru. She has free content (the online version of her latest book) and clear links to services offered and her philosophy, plus easy to find “about” and “contact” links. Graphically clean and elegant. Another is http://rebeccakatz.com/, though the site has the dreaded carousel with no pause button. Graphically simple and pleasing (if it didn’t move), and nice balance of content and promotion.

    More in my field: the NW Center for Public Health Practice: http://www.nwcphp.org/
    Clean design, simple navigation, search box where you expect it. I like the icon design elements (I’ve been working a lot with icons lately)–nice thing about icons is they can be a unifying element. But (sigh) that dang moving slide show with no way to stop it.

    And finally…I love this: it’s a moving infographic, and a really engaging vehicle for making a case against fracking: http://www.dangersoffracking.com/ (but you have to go through the whole thing before you get any links to more info)

  7. http://www.banyangallagher.com/ http://www.cicelyandree.com/

    I’m hoping to make a personal website to advertise private lessons and such, so I’ve been searching through websites of fellow teachers. These two are some of my favorites, the first because I like the color palette, and Cicely’s due to simplicity and ease of use. I love that Banyan’s site utilizes rich colors but doesn’t look TOO dark to me (I think due to use of contrasting bright colors and flames). I’ve played around with things a bit on my own and haven’t been able to find that balance yet.

  8. not sure what my project will be yet, but here are some sites i love:

    http://www.ravelry.com – this is an amazing site, though unfortunately it requires a (free) username and password to access. if anyone’s at all interested in either yarn/needlecrafts, OR seeing a site with a really amazing search function, this is worth signing up for. it contains a ton of information that’s all extremely easy to find, and is a fantastic central resource for any knitters, crocheters, or loom workers. i spend a lot of time here!

    http://www.openideo.com – this is a great site that’s an offshoot of IDEO, a really fantastic design consulting firm. they either fund or funnel funding from other organizations with the aim of solving big problems. they put the problems out to the world via this site and invite anyone and everyone to propose solutions. they’re then voted on by the community and IDEO’s staff, strengthened through help from the online community, and the top 9 or 10 are granted funding to try their idea. it’s another site with a lot of information that’s well organized, easy to find, and easy to jump into and start participating.

    http://giphy.com/gifdanceparty/ – this is probably the best site ever? it’s something someone designed for a web class at parsons and it’s now hosted by giphy.com. if i could wake up tomorrow and turn out my dream website, it would probably (unfortunately) look just like this. the funnest.

  9. I’m going to work on photo/portfolio website for the class . Here are some that I really liked

    http://hellomonday.com/

    It’s a site of creative agency. I like how simple it is. One thing I feel needs to be changed somehow is dark box in lower part of the page(or maybe resolution of my screen didn’t let me see that it’s smth below of that box) . It took me a moment to realize that I have to scroll down to see the rest of the content, and it gets more confusing since this box has a link ‘see more’, you click and you are on the same page just link changed to ‘share’

    http://typemedia2011.com

    Here’s another website of creative agency. I really like the idea of one page site. But it looks the best on widescreen monitor

    http://everylastdrop.co.uk/

    This one also one page website and it’s just fun

  10. 2 Inspirational websites I came up with:
    1. http://www.reddit.com for their implementation of a voting system that allows good content to be more prominently displayed than bad/less helpful ones. I think the concept feeds smart interactions and good learning on the internet.
    2. http://www.footballguys.com is a treasure trove of knowledge as far as fantasy football is concerned but they don’t do a great job of taking the information and making it easy for the average Joe to get and find the information he a.) needs and b.) doesn’t know he needs.

  11. These 3 sites inspire me:
    1. http://students.washington.edu/nks3
    This website was created by a Foundations student who, like me, wants to freelance. Her site is uncluttered, fun to look at, and is creative.
    2. http://www.nytimes.com/interactive/2014/01/10/travel/2014-places-to-go.html
    This site is uncluttered, and its use of video really makes for a beautiful experience. The video auto-loads (and takes a while), but it is unobtrusive as audio doesn’t load with it.
    3. http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
    This one is similar to #2 in terms of its uncluttered appearance and the way its images and video make it amazing.

  12. These sites look cool for me:

    1) http://www.poissonrouge.com or http://redfishsoup.com
    This site is an educational site where small kids can play, listen songs, color etc. The “playground” with no text is pretty cool.

    2) http://climatesolutions.org
    because I find it simple and pretty well organized, all though they could have added a Home menu to facilate naviagation back to the Home page.

    3) http://www.wikimedia.org
    I like Wikipedia and actually the wikimedia web page is awesome to show that there are actually plenty of other tools such as wiktionary. Passing on the icons with the mouse, there is a tooltip that explains the different contents of all these knowledgesite. All the sites are made with the software WikiMedia which generate the wiki format and the idea of collaboration behind.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s