Web Development 08Center for Global Engagement

Tasks for team• Review this document, thinking

particularly about

• Usage (who uses a site and for what)

• Design elements you like or don’t - including fonts and color schemes

• Reply to all on the email through which you got this and share your thoughts

Sites to design

• Global Engagement Summit

• Center for Global Engagement

• Global Engagement Summer Institute

Overall process

1. July 15-25: Nathaniel prepares initial thought documents; comments and reflections from others

2. July 20-30: Nathaniel prepares initial mockups; comments and reflections from others

3. August: Nathaniel sends mockups/timeline to developer(s), with prioritization to maximize time

4. Early September: roll out sites as they come online5. October 08-March 09: major visual re-design and

re-launch with professional graphic design

Overall visual schemes

• Constraint: don’t have professional graphic talent

• Constraint: limited time - must re-launch in early-mid September

• Key Characteristics:

• SIMPLE: the engaging part of the site will be the content (blogs, video interviews, etc) and this doesn’t require

• INFORMATION ORGANIZATION: it should be very easy to get to the precise information you want (or we want you to have)

• TYPOGRAPHY: we can increase the impact/engagement of our site based on smart use of fonts

• CONSISTENT: these should feel like a family of sites; visually coherent (if not the same) and easy to get from one to another

Site Who uses it? For what? What’s important

www.theges.org

•potential GES applicants•accepted delegates•summit attendees•remote summit followers•staff•alumni

• (applicants) learn more/get info• (delegates)communicate with

other accepted delegates?• (attendees/remotes) read about

events they couldn’t attend• (staff) post photos/pictures/

videos• (alumni) post info about needs,

share best practices, find out about opportunities

• INITIALLY:•finding out about the summit

•MAYBE alumni postings?•LATER: •communication tools?

www.mycge.org

•Northwestern students•All program participants•Faculty/staff peers•CGE staff•Press

• (Northwestern students/program participants) learn about opportunities

• (peers) access reports/open source ideas from CGE

• (CGE staff) organize information about all programs, profile participants, discuss big ideas

• (Press) find out more background, rich media about participants

•Clearly organized static information

•Easy links to other programs

•Publicity: profiles of the things our people are doing

gesi.mycge.org and/or

globalsummer.org

•Program applicants•Accepted delegates•Parents

• (program applicants) learn more about the program, find out logistics, get required forms, etc

• (accepted delegates) communicate with one another, post information, collaborate? get readings, find out logistical info

• (parents) learn about logistics, safety, cost, etc.

• INITIALLY:•finding out about the institute

•LATER: •communication tools?

Social media features• INTRO: Social media features such as blogging can be a great way to engage your

audience, but require consistency and upkeep to be meaningful. Social media features allow websites to enable two way conversations

• SOCIAL MEDIA FEATURES:

• Blog: one of the simplest and most necessary features - blogger, wordpress

• Microblogging: the new thing, microblogging services such as twitter, pounce, and plurk allow to engage in sustained, on-going, easy conversation with a community

• Photo communities: photos can become a tool for building community, as with flickr

• Streaming mobile video: as 3G networks begin to proliferate and mobile video improves, mobile video is going to be an increasingly important social tool

• Social networks: facebook, change.org, myspace.com, hi5.com, care2.com are all examples of social networks. Ning.com is making it easier for users to create their own networks.

Related nonprofit sites

Peer site i. Globemedwww.globemed.org

Description:GlobeMed has a great site - arguably the best of our peer groups. Features to note include: a. the background globe that fades into the back (see later Twitter example), b. the parallel top-bar organization of menus, c. the bottom constant navigation bar, c. the top free-floating logo rather than full header-bar. Things I don’t like as much: I don’t love the font, I think the navigation buttons are a little heavy, I think there’s a LOT of information on the page and don’t like “read more”s much. I also think they could experiment with colors a bit more to get beyond the singular monochromatic red, although this isn’t a huge complaint.

Peer site ii. Nourish Internationalwww.nourishinternational.org

Description:Nourish International is an organization similar to GlobeMed, with a much worse website. Important features to note are: a. they use a top-bar organization for their meta categories (about nourish, poverty, students, etc.) and then a side bar for the intra organzation (“quick links” in this page). I don’t think this is necessarily a bad thing, but this execution is poor - I think having the big title header break them apart is a bad design decision. b. The color is too boring: sites dont ahve to be really colorful to be great (see madebysofa.com later in this) but this is just poor. c. MAJOR problem with fonts - mixing SERIF and SANS SERIF fonts. “Serifs” are the little florally things on the end of letters (like on the “N” in nourish). Sans Serif fonts tend to look better on the web, and if you do blend them, it has to be done well. Plus using Times New Roman (“Projects Network”)” is no good ever.

Peer site ii. Student Movement for Real Changewww.studentmovementusa.org

Description:Student Movement for Real Change is along the same lines as these others. Big things: a. site is too busy, i think - there’s so much information in so many places - see drop down menu b. they use drop down menus for the sub-organization. c. blue and gold color scheme doesn’t really get me - too UMich d. their “quick links” are jargon words, which doesn’t make me want to click on them e. its too dark and there’s too much contrast between the white and the dark outside

Peer site iii. HAAS Center -Stanfordhaas.stanford.edu

Description:Haas is one of the oldest Centers like CGE. they have SO much information on their site its ridiculous. They do a pretty good job organizing it, all things considered. they’re a little more successful combing types of fonts, although i don’t really like the changes in their capitalization on the top menus. I really like the colors on the page - although the square edges and font choices might be less “fun” than we would want.

Peer site iv. Students of theWorldwww.studentsoftheworld.orgDescription:Students of the world is sorta like CGE if we had decided to go off on our own instead of affiliate with NU. Their website is great visually - and does a good job creating a standard feel for their projects. They only use great borders and I like the simply top navigation. I hate cheesy quotes, but that’s not really about the design is it? Anyway, I like the site a lot as an AWESOME visual brochure. At least initially, that might be a good idea for GESI/GES sites. BUT it feels static to me. The boxes feel the they restrain things, there isn’t a lot of interaction ability with the site, etc. But great for visual tips.

Visual features

Example site i. Modernista

Description:Modernista is a design firm. The interesting thing about the site is that rather than have its own homepage, it uses a small red navigation menu in the upper left hand corner, which leads the user either to a small popup for basic information, or two other websites where pieces of the Modernista story are contained. For example, “about” leads to wikipedia, “work” all leads to different photo albums. Its a really simply effective way to keep information streamlined and just have one information portal. It also might work a little better for an advertising agency. But especially if we start to run things through a Change.org page, a facebook page, or something else, its worth thinking about.

www.modernista.com

Example site ii. Sofawww.madebysofa.com

Description:Sofa is a software/design company. I love the emerging use of awesome typography on websites. Its extremely appealing for our suite of sites during this round, considering that we don’t have a huge amount of time to get the “perfect” design. So this is just the front page. Check out what happens when you click on one of the links...

Example site ii. Sofawww.madebysofa.com

Description:The bottom menus pop down. This seems like it might be a good way to do the main CGE page, to have it lead to GES, GESI, and any learning portal we have. I’m just not sure how to design it without ripping this shit off entirely.

Example site iii. Twitterwww.twitter.com

Description:I love the Twitter design for a few reason. I love the strong color theme they establish. I love the background that’s actually got a vector image in there rather than just a blank background. I love the simply top navigation bar that is separated by that background vector. That is the element I can most see integrating into our site. Vimeo.com is a similar one.

Example site iv. globalgivingwww.globalgiving.com

Description:I think globalgiving is one of the best designed sites on the web. Notice the color theme that repeats itself throughout. I love the bird images on it, i love you use of negative space - it never feels congested even though there are THOUSANDS of projects listed on the site. I think they do a good job blending fonts while keeping the same feel throughout. They only use Serif fonts in artsy contexts (the logo, around the birds, etc)

Description:We might want to look at GlobalGiving’s project pages as a template for information about our own student projects/alumni, etc.

Example site iv. globalgivingwww.globalgiving.com

Design utilities

Utility i. kulerwww.kuler.adobe.com

Description:Kuler is a utility for color schemes for the web. You can even download the palate directly to photoshop on it. Great way to think differently about how colors could come together. LET EVERYONE KNOW WHICH SCHEMES YOU LIKE

One pre-faboptiondiythemes.com/thesis

Description:Thesis is a purchasable, customizeable Wordpress theme. Wordpress is a blogging service (and currently what we run mycge.org and theges.org through. Thesis is a pretty gorgeous customizeable theme for wordpress that might offer what we need for the first rounds of this. It certainly would take care of any social media needs. The only question is whether we could organize our data effectively enough with it.