Download this .zip file with sample image and index.html files that includes the CSS that you’ll need to edit and customize to create your “in-browser” string of web page.
This is just one techinque for how you can acheive this effect. If your ideas go beyond this, you’ll need to seek help elsewhere. (If you can’t figure it out, make friends with a Digital Media major.)
According to this article, you better be. Might have to rethink the syllabus sooner than I thought.
For those of you kicking around mobile strategy for your final project, this article is a good read that reinforces the ideas I was introducing to you this week regarding developing your site for a mobile audience:
Photoshop templates (for use in designs):
Luke W’s PDF of his 2009 An Event Apart lecture:
Labeling concepts:
Here is the link to the subpage content for our project #2: click to download
Here are the files for the “AEA” redesign project. Please review the assets and get back to Chris if you have any questions.
Zip file for the project homepage
*Updated Tuesday, 11:12PM*
Where to get web fonts and what to do with them:
http://nicewebtype.com/notes/2009/10/20/where-to-get-web-fonts/
Test and mimic CSS with cross platform OS-safe fonts
Web Typography in Practice
After you’ve absorbed all this content, write up a 200-300 snapshot on the state of web typography today. Add it as a comment on this post.
Some crafty designers out there have compiled a beautiful and cheeky website illustrating all the “do’s” and “don’t” in Photoshop file management. Please read through this before Monday, January 24th. I expect you to have some questions. Add them to this post, please.
logo
Look! You can see the NYTimes bones!
Want to look beyond the “brand layer”? Check out this pretty awesome browser tool called Wirify.
With one click of this bookmark, you can turn any website into a black and white wireframe schematic. That simple toggle can help you better understand the decisions that inform the underlying grid and content hierarchy.
Kinda like having x-ray vision.
Fetch Softworks makes and distributes the oldest Mac only FTP program, Fetch. We are going to help modernize their web presence by giving them a new design that also takes into account their need to accommodate growth in the future. Someday, they’ll roll out a new product. When that happens, they don’t want to redesign again.
They don’t just sell software; they are people too! They need to keep customers informed of the latest updates and news out of the company. Therefore, it might make sense to recommend a news module as well.
Here are the files you’ll need to complete this project. Right-click to save the .zip file.
Read this and be prepared to ask questions:
Project Overview
In 2001, Jim Matthews started Fetch Softworks. The Fetch product originated as an internal file-transfer program for Dartmouth College in 1989. Eighteen years after the debut of Fetch and 7 years after the official launch of Fetch Softworks, Fetch, the company’s flagship product, has evolved into a reliable and solid brand. Fetch Softworks is also preparing to release a second product.
You are charged with redesigning the Fetch Softworks website. When finished, the redesigned site will not only create an up-to-date home for your flagship product, Fetch, but create an extensible structure that will accommodate new products and/or services. It will also work to bring attention to the company and its commitment to providing the best products and services to its customers.
You’ll strive to develop an intuitive and aesthetically inviting website that maintains the ease of use inherent in Fetch Softworks products. You’ll audit the existing information architecture and develop a site design that ensures all stated goals are met. You’ll implement a modern, uncluttered, appropriate design that guides users, reinforces the brand promise, and positions the business as the “top dog” in the market!
Project Goals
There are several strategic goals associated with this project:
Make it easy to find information, download and purchase products. You’ll want to provide users with a site design that helps them learn about the company and its products, download trial software, purchase products, or find customer support easily. A site redesign that maximizes the findability of content and ease of use is the best way to demonstrate the value you place on the customer experience. To address this goal, you’ll need to consolidate the amount of navigation options currently offered. Work to favor the core actions you’d like users to initiate: “Download,” “Purchase”, “Find Support/Help”, “Learn about Products”, and “Find the Latest News”.
Make it easy to add new information or capabilities, while preserving the site design. As new products and content are developed, you’ll inevitably want to talk about them. You’ll also want people to try them and, of course, buy them! The site design should accommodate the need for updates to be made easily, without sacrificing the integrity of the design or architecture. Additionally, the site design must be applicable to various channels for customer support (the Apple Help Book, for example). Be sensitive to the fact that you each have day to day tasks, in addition to maintaining the site. Ease of use is key, and we’ll be addressing this through the information architecture and design phases of the project.
Site Audiences
Two core user behaviors stand out . One consistent message is “driving users to download” the free trial software, especially first time visitors to the site. Acknowledge the importance of existing customers looking for a product updates, information, or support; however, in a foot race, give “Download and Purchase” the nod. This is the basis of a understanding of primary and secondary audiences.
Primary audience: “Tryers” and “Buyers”
This audience is comprised of users that are interested in downloading a trial version, or having given the product a spin, making a purchase.
Secondary audience (close second): “Searchers”
These users are information gatherers. As with the primary audience, they are not necessarily tied to a particular market segment—i.e. non-profits, students, commercial sector—but rather look to fulfill a practical need for details. Searchers may be potential “Tryers” looking for more information before they download; current “Tryers” who have downloaded, are looking for help, and may become “Buyers” once they find the information/help they’re seeking; or current customers looking for post-purchase help with the product.
So who to target? Where does the money come from? Consider these groups in you’re assessment:
Perception/Tone/Guidelines
Site visitors need to understand that Fetch Softworks is a dynamic, active company, with a long history of commitment to the Mac. The value is in part attributed to the craftsmanship and the precision Fetch Softworks bring to the products they create. Fetch and its siblings exemplify well-considered and well-built products, and users are getting an outstanding value in the process. The tone of written content and the overall design should be straightforward and easy to understand, but with a hint of playfulness. Site content must be optimized for web presentation in clear, concise chunks and allow users to find pathways to content quickly and easily.
Key design attributes
Modern, simple, amiable, dependable, thorough, practical, reliable, well-crafted
Single-Minded Message
Craft & Precison
Homework file (Screengrab of seacoastonline.com website):
Resources for download or inspiration: