DESMA 161A
NETWORK MEDIA I
Instructor: Richard “Levi” Brooks
TA: Mark Essen
DEscRIpTION
This course provides methods and techniques for designing, developing, and strategizing websites, with an understanding of the World Wide Web as a medium.
The WWW is a system of interlinked documents, accessed through the Internet. With a browser (on their computer, mobile or tablet device), one can view web pages and web sites. Although this class offers a wide range of workshops dealing with web technologies, it focuses on conceptual and aesthetic aspects of designing for the web. Creative projects and exercises will be developed throughout the course by utilizing the various skills acquired in class in the service of perception and communication.
Web technologies are constantly and rapidly changing. By focusing on the core concepts behind those technologies, the acquired skills working with HTML, CSS, and Javascript will be usable in the future.
Furthermore, this class helps develop the vocabulary necessary to speak to developers and Web designers, to present and discuss Web projects, and to pursue individual research. During the quarter students will have the opportunity to complete a series of exercises, analyze and discuss Web projects, and present a research report.
EvAluATION
All students must use a text editor to complete all exercises and projects. Text editors can include Coda, Notepad, Notepad++ TextEdit, TextMate and the sort.
The structure, design as well as how clean the HTML code will be a part of the evaluation. All assignments must work as designed in Safari 4+, Firefox 9+, and Internet Explorer 9+ and must use valid XHTML. ( http://validator.w3.org/ )
Remember, these are both design and technical exercises and projects will be evaluated based on their originality, aesthetic and conceptual qualities.
All exercises must be completed in order to pass the course. Late assignments will reduce the assignment’s grade by one unit (A -> A-) each day. Exercises are only considered as complete when they are accessible from the course website.
More than four absences without the instructor’s permission, before the class meetings, will result in an automatic fail.
Two times running late will be considered as one unexcused absence.
No Dreamweaver, Frontpage, or any other web site building tools.
Please test all browsers before class projects are presented. PREREquISITE: 28 TIME: TUESDAY & THURSDAY 9:00 - 11:50A.m. LoCATIoN: 3261
GRADING
35% Projects 30% Exercises
15% Student Blog/Twitter 15% Presentation
5% Participation and Attendance
REquIRED READINGs
Elisabeth Freeman, Eric Freeman: Head First HTML with CSS & XHTML. o’Reilly Media, 2005. Vinh, Khoi: ordering Disorder: Grid Principles for Web Design. New Riders Press, 2010.
REcOMMENDED READINGs
Crumlish, Christian, and Erin Malone. Designing Social Interfaces. o’Reilly Media, 2009. McFarland, David. CSS: The Missing Manual. o’Reilly Media, 2009.
OffIcE HOuRs / HElp
Levi’s Office Hours: 12p.m. to 1p.m. on Wednesdays
Levi’s Email: [email protected]
Levi’s Twitter: @levib
pROJEcTs
Institution Rework — Due on Tuesday, January 17th, 2012
We don’t judge truly great design by its beauty, but how it solves the original problem. Create a proposal describing in detail a institution’s website (museum, think tank,
department, etc.) of your choosing. After you explain the website, elaborate how you would fix its shortcomings and tackle the constraints with a new website.
Your proposal should include:
Context:
• Who is the audience of this institution’s website? • What is the goal of the website?
• What are the constraints?
Problems: List a few issues holding back the institution’s website from achieving it’s goals. Solutions: A couple of paragraphs describing what you want to change, alter, add, edit, etc.
and why you want to do it. What major changes would you make (the whole site is a blog, etc)? How does your idea(s) solve the problems? How does it help the institution collect more supporters and attention? How does it distinguish the site from other institutions?
List of features: What features would you include? What features would you remove? Why? Sitemap: A basic sitemap of YouR ideas of the site, not the existing site, but the site as you
imagine it.
Please purchase both by January 19th, 2 012
Wireframes: Design wireframes for two pages, in your choice of software. one of the
home page, and one of another page you deem to be the second most important to your conception of the site. The importance will be determined by what your big ideas are to the site.
Bring your “Proposal” on Tuesday, January 17th and be prepared to discuss it in class.
Your document should be put together as a single PDF file. We will discuss how to upload it to the server in class on the 12th.
Ignite Presentation — Presenting on Tuesday, January 24th, 2012
Ignite is a global event, organized by volunteers, where participants are given five minutes to speak about their ideas and personal or professional passions, accompanied by 20 slides. Each slide is displayed for 15 seconds, and slides are automatically advanced. The Ignite format is similar to Pecha Kucha, which features 20 slides displayed for 20 seconds each. The presentations are meant to “ignite” the audience on a subject, i.e. to generate awareness and to stimulate thought and action on the subjects presented.
Each student is required to prepare and present a research presentation about the Internet/ World Wide Web concept. We will have one Ignite event with everyone presenting with a break halfway through. On the first day of class, each student must choose when they want to present and a topic from the following list:
Semantic Web
ARGs (Alternate Reality Games) Agile software development Creative Commons
Arpanet
Sourceforge / GitHub / Google Code
MMoGs (Massively Multiplayer online Games) user Generated Content
Crowdsourcing Mashups
Folksonomy (Tagging) Bittorrent
AJAX
You must email me your slides by the day before the presentation date. Late slides will not be accepted and you will miss your opportunity to present. All slides must be delivered in a 20 page 1024×768 PDF file. Remember that each slide will be shown for exactly 15 seconds, you cannot control when the slide changes, it will happen automatically every 15 seconds. Practice your presentation before getting to class. Your presentation needs to provide:
• A summary of the topic
• A technological and conceptual background • A basic description of the topic
• An analysis including: Why is/was this topic important?
• What is good about the topic? What are the weakness or failings of the topic? Conclusions with your evaluation, ideas about competing products or technologies, and possible future developments
one slide of your presentation should have a list of references including a minimum of three books, articles, essays, or websites about the topic. References should be based on the Chicago Citation Style.
Data Visualization Botnets / Cyberterrorism Tim Berners-Lee
Font-Replacement tech
Microblogging (Twitter, Tumblr, etc) Responsive Web Design
Extropianism Cloud Computing
Amazon EC2 and virtual computing processingjs
HTML5 / CSS3 net art Memes
Designing for the Web — Due on Tuesday, January 31st, 2012
Choose your wireframes or one of your classmate’s wireframes from the first project and create two unique design comps based on their wireframes,.
Pay close attention to color and typography, keeping in mind the font restrictions on the web. You must use a grid system to guide your design. Showing the grid isn’t necessary, but you should go through the steps described in class for establishing and following a grid. Create a PDF file containing:
1. An intro page about the non-profit. Include details about their current branding/design.
2. The original wireframes
3. A description of the first comp outlining the choices you made and why. 4. The first comp.
5. A description of the second comp outlining the choices you made and why. 6. The second comp.
Keep in mind the questions from the first project about the non-profit’s audience and think about who your design is speaking to and how it is doing it.
Your document should be uploaded to the class server before the start of class.
HTmL Building Blocks — Due on Tuesday, February 7th, 2012
Required Readings:
Head First HTML with CSS & XHTML: Chapters 3, 5, 6, 7
Create a 5 page HTML site of one thing that you’re creatively passionate about.
This HTML website should be a mix of content that’s easy to read, navigate, and use. You should include at least 5 to 10 images, and 3 original pieces of text. Include other sources of copy, be they quotes, text, ideas, anything that may play a role in your work as an artist or designer. Also include at least 5 links to other sites on the web that you draw inspiration from and contextualize them in a larger body of text. You may also embed content from third-party services such as YouTube, Flickr, etc.
You should organize the content that makes the most sense to the audience and the subject. Consider using categories, project, media type (images, quotes) or other. use header tags to organize and label each page. Remember to think about search engine optimization tactics, such as ALT tags, header tags, and meta descriptions. You should be able to navigate from each page to every other page, and the structure should be flexible enough that you can add to the site in the future and use it as a personal repository of inspirations.
Because HTML only deals with the semantic structure of a website, you should not worry about design. This means that every page will be black on white and use the default fonts and link colors. Do not use tables, unless it’s to organize data sets.
Styling — Due on Thursday, February 16th, 2012
Required Readings:
Head First HTML with CSS & XHTML: Chapters 8, 9, 10, 11
using only CSS, create a unique design for a one-page resume for yourself. Resumes are a great way to showcase your experience, as well as typographic skills to potential employers or clients.
i.e. a homepage and about page or another page
For the purpose of this assignment, everyone will start with the same HTML and it cannot be altered. You will have to fill it in with your original content (experiences, dates, and more.) The design of your resume should be legible and present the information in a clear way; however you should feel free to experiment and create more interesting and non-traditional resume. Strike a balance between readability and artistic. Think about the grid
when designing.
You are allowed to create images for the style and reference them in the CSS, but don’t get too heavy with them, try to create as much of your resume in CSS as possible. Don’t start right off with the code, begin with sketches/comps of the design you want to create and work towards it in CSS. Bring sketches/comps of your design to class on Thursday the 9th.
Start Up — Due on Thursday, march 1st, 2012
Working in a group of 3, concept, plan, design, and build a small website for an imaginary startup. This can be a product, software as a service, piece of entertainment (film, band, something new?, etc), artistic endeavour, tool, etc. Research TechCrunch, Mashable, BoingBoing, VVoRK and other related blogs for inspiration and holes in the marketplace. Your startup website should consist of at least 7 fully designed and built pages using HTML and CSS. The site must contain at least one page summarizing the “benefits” of your product, showing something original or different. This can be as an infographic, or a long essay about your important idea. Your site must also have an “about” page listing the members of the group and each person‘s role in the project. You are required to present your site in class on Thursday, March 1st.
For class on Thursday, March 23rd, bring to class at least 2 ideas for what your startup will be, along with some research and analysis of current websites in a related field. For example, if you choose to do a software as a service, look at current software companies to get an idea of the design language they use, along with what you think is and is not successful.
Choose one of the two ideas and create design comps for the site and wireframes (in Axure or Balsamiq) for each page of the site.
Portfolio — Tuesday, march 20th, 2012
Your portfolio is your shop window. It doesn’t matter whether it is a printed portfolio or a laptop presentation [or viewed online], the same rules apply: make it as compelling and as revealing as possible. Push yourself. Don’t think, oh this will do. It won’t. After your personality, it is the second most valuable tool that you possess to help you find a job. A portfolio of eight to ten interesting pieces of work is ideal…. Your portfolio pages should exhibit a degree of uniformity. Create a grid, and make sure every project adheres to the grid. This will be difficult because you might be showing a variety of projects (2D and 3D) but it’s worth trying to get this right because you will be judged on how your work is presented as much as by the work itself. A portfolio that has an underlying unity and structure will score more points (and be more enjoyable to view) than one that has no structure or cohesion.
— Adrian Shaughnessy, How To Be a Graphic Designer Without Losing Your Soul
Feel free to experiment with @font-face or other font replacement technology
As a creative person, a portfolio is best way to generate interest in your work and vision. A good online portfolio is essential when making contact with potential clients and employers. It’s the primary way people anywhere can get a glimpse of who you are and what you do. During the last few weeks of class, you will go through an accelerated design and development process to create an online portfolio of your design work.
Develop a concept, a visual identity and a navigable structure for your portfolio. You may use all
techniques introduced in class, such as XHTML, JavaScript and CSS. Choose the appropriate tool for your idea. Your site should include at least 10 works. There is no maximum page limit, however you should choose quality over quantity.
The portfolio project is broken into two parts, the first part is to determine the content and audience for the site, create at least two visual designs, wireframes, and a sitemap for the entire site. Keep in mind the questions we asked for the first assignment:
What is the big idea?
What is the purpose of the site? Professional/School etc. Who is the audience?
What are the sections of your site? How will you organize your work?
Bring your design document and comps to class on Monday, November 21st and selections of your work and be prepared to discuss the class. This should include who the site is for, what type of content you’re going to feature, and a description of the site’s organization and navigation.
The second part of the assignment is a complete working version of the site.
Twittering
All students are required to create a Twitter account and be active during the class. Each week (or so) you will be prompted to read an article. Write and post at least three Twitter responses about this article. If possible, please Twitter your response to the class, as well as the original author. Posts are due by 5pm on the date indicated in the assignment. Please begin Twitter by following me @LeviB and using the #D161A hashtag when you find a cool link or have thoughts/questions
Blogging
In addition, you are required to attend at least 1 DMA sponsored lecture during the semester and write a 300 word post on the lecture. You should not feel that your posts need to be overly formal, I am more interested in hearing your honest thoughts on the presentations and how they relate to our course, rather than reading a very formal but uninteresting summary.