• Ê
  • Â

å Friday, July 26th, 2013

Shrink the windows to see the effects
Scalable Websites with CSS3 and Javascript
CSS Tricks: Using SVG

Agencies w/ these types of sites:

Carrot Creative
teehan+lax

4 Emailed   b 1

One response to “Links that illustrate scalable web pages”

  1. John says:

    Thank you, Nate, for posting these. Superhelpful!

Leave a Reply

 Å

% Kelly Steben completed

Recurring themes that I like:

-SIMPLICITY and clean design
-Maybe an entrance page with a fun, interactive effect
(see taubaauerbach.com or ivytai.com)
-Neutral tones/grays for backgrounds
-Flat shapes, squares & circles (don’t care much for “3d” effects)
-Space (not throwing too much info/too many images at viewer)
-Would rather have larger images and text force viewer to scroll for a
little while than cram everything together
-Large text = friendly!
-Thumbnail hover options:
a) two images swap overlap (see jamesmuspratt.com)
b) label appears (see jakezien.com)
-Also interested in hovering over categories (ie. painting) causing
tagged thumbnails to be highlighted
-ICONS > WORDS  this generally seems to be true for me

Sites:

http://huntergatherer.net/

http://www.jakezien.com/
(click the bottom right link in his comment, everything on the site
falls to the bottom of the screen simulating gravity. grab things and
throw them around!)

http://www.bluerockdesignco.com/

http://renelee.net/

http://www.erikaskin.com/

http://taubaauerbach.com/

http://www.willcsmith.com/Animation.html

http://www.ivytai.com/

http://www.jakeanddinoschapman.com/

http://jamesmuspratt.com/

http://stephencoates.co.uk/
(I like the colors and space on the page)

 Å

% Meaghan Elyse Lueck completed

Project for the Homeless Redesign

Existing site:

http://www.columbia.edu/cu/pfh/

Should be- clear & informational. Include a calendar sign-up. Also need: nice photos (tricky because of subject matter); inspirational-quotes; lots of pictures of the group- students involved & what our meetings look like.

Inspiration for new site:

http://www.bestieswithtesties.org

http://theprovidencehouse.com

Simple: http://woaroof.tumblr.com/HBR

Layout and navigation:

http://www.communityimpactatcu.org/aro/

http://www.yale.edu/yhhap/YHHAP.html

Include a blog:

http://cu4habitat.wordpress.com

http://mahomeless.tumblr.com

Include icons a links

http://thenounproject.com

Link to Pinterest Research

í Assignment 6: Research and present to your group
July 26, 2013

Due by end of day

Commit to a topic or direction for a website project. In keeping with the presentations and discussion yesterday, begin this process by researching and sketching. Research may include any of the following:

  • Collecting and generating content
  • Understanding the context in which the site will exist: competitors, audience
  • Visual research: precedents for how the site might look and feel
  • Technical inspiration or tools that may make your sketches a reality

The form of your research will vary based on your project idea and your research methods. Consider a Pinterest site, a tumblr blog, a Google Doc with links, Evernote, Keynote presentation (or pdf), digital images, or a combination of these. Present your research to your working group at a meeting at the end of the day for feedback.

You may find sketching at this point helps, too, especially if you’re sketching as a research tool.

Some inspirational sites

b Add comment    

Leave a Reply

Y Group Meetings and Breakdowns

See our teacher notes in the comments

10:00 Group 1

Kelly
– Portfolio multimedia — video, sound, imagery (lots of types)
Michael
– Portfolio for design website — video
Diana
– not_sure

10:30 Group 2

Kathy P.
– Portfolio for design/illustration
Sarah B.
– Artist website. Coding/Technical expedition research.
Sarah M.
– Portfolio site

11:00 Group 3

Nate
– Redesign of company website
Mark
– Medical Services website (2-D designs)
Franziska
– Company website – but not there
Kate
– not_sure

11:30 Group 4

Cansu
– Musical Theater club. Small group website.
Angi
– Small company website / about food /
Miyoung
– Teacher website
Meaghan
– Website for Staffs homeless shelters. Signup, calendar. Existing site.

b 2    

2 responses to “Group Meetings and Breakdowns”

Leave a Reply

Y Schedule for Day 5

9am: Meet as a class

  • Recap Greg’s presentation & process

10am-12pm: Small group meetings with John/Jerel

  1. What do you want to make?
  2. Split up in to 4 Groups of 3/4 based on type of website
  3. Set up meetings with John/Jerel at 30 minute intervals starting at 10am. Put groupnames in comments below.

1pm—3pm: Individual meetings as needed

3pm: Present initial research to your small group

Weekend: Sketch, continue research

b Add comment    

Leave a Reply