Recap: Web Design Process… More or Less

For our July meeting we were lucky enough to have Colleen Case and Maria Gosur from Schoolcraft College to talk about the Web Design Process.

The talk was about a framework for the web design process, taking 45 hours of teaching time and compressing it to 45 minutes. They discovered 40% of the population is re-tooling skills to the web, while 60% have grew up with the skills and looking for something advanced. Colleen is an interactive teacher, shifting from sage on the stage to guide by the side.

“The medium is the message”
– Marshall McLuhun, 1964

The content of the communications is blended with the medium. With the way it is sent, the interface is content.

Framework for team dynamics

  • Together everyone achieves more
  • It starts with a common vision
  • Creating a swing

Process (stages of development that are happening concurrently)

  1. Define the project
  2. Scope of the project
  3. Information architecture
  4. Build and integrate
  5. Site publishing

[blackbirdpie url=”https://twitter.com/philltran/status/91287274905546752″%5D

Define the project

  • Figuring out who is on the team and what they do
  • It’s important to define these up front

Scope of the project

  • Common vision, defining an audience, review the data, technical needs
  • Audiences can mean more than one
  • How do we talk to the audience as a human
  • Persona’s should have names and refer to them as actual individuals
  • How can we best deliver your content to your audience
  • The scope of a website doesn’t end when it launches, it stretches for years after.
  • You can’t jump ahead in the process

Information architecture

  • Looking at all the information and start recognizing patterns
  • Sticky notes are a great way to visualize information to recognize patterns
  • Chunking is grouping information
  • Queueing is prioritizing information
  • Filters is creating unique access for multiple users
  • Abstracting is creating a consistant look from page to page to orient the user and allow them to get around
  • Where does the complexity of the site lie? In the back end or frontend for the user?

[blackbirdpie url=”https://twitter.com/philltran/status/91291238355046400″%5D

Build and integrate

  • File management and naming conventions
  • Optimizing multimedia
  • Populating content
  • Site testing, not just functional but also the ascetics

Site publishing

  • Site Launch
  • Training, Updates, Maintenance
  • Debrief

[blackbirdpie url=”https://twitter.com/refreshdetroit/status/91297540523298816″%5D

Things often overlooked

Your client knows the problem. Design is problem solving.

The project manager talks to the client so there is a single voice and ears for the entire project. One person can have multiple roles.

The content expert might not always be client. Writer/Editor. Usability Testing, Information Architect. Technology Researcher.

Visual designers are the person on the team that everyone’s favorite. Photographer. Illustrator. Multimedia Designer. Bringing the illustrator in early on can yield a lot of illustrations that explain the process to get everyone on the same page. It can expand understanding.

Technical designers look at everything that makes the website possible. Database developer. IT security specialist.

Usability designer. Test/focus group coordinator. Search engine optimization manager. Social media manager. Site analytics. Transition coordinator.

We consume web content as snacks, not meals. We scan, pick and choose what to interact with.

More Information: http://designprocessmoreorless.com/

July 13, 2011 – Web Design Process…More or Less

Most facets of society, work, play, education are reinventing themselves in response to social networking and the growing presence of digital media, visual communication and access to an ever expanding universe of knowledge. As software and hardware platforms change, a solid design process can allow a method for collaborative teams to approach complex learning and development.

Solid design processes can help direct a group, increase project success rates, and inspire the next generation of innovative thinkers who will utilize communicative technologies and visual media to meet the challenges of current times. Maria and Colleen will share their collaborative work creating a design process that can assist the management and workflow of web design.

Colleen Case

As an associate professor in Computer Graphics Technology at Schoolcraft College, Past Education Director of ACM SIGGRAPH, Fulbright Scholar to China, and co-chair of other diverse international workshops and events; Colleen synergizes years of instructional design, graphic design, artistic endeavors and professional business experiences.

Colleen Case is published in the “International Journal of Web Based Communities”, “LEONARDO”,”SIGGRAPH Conference Abstracts and Applications” and “Elsie Vier”. She has done technical review and jurying for Eurographics, ACM SIGGRAPH, Thompson Learning and Scott Jones publishers.

Colleen has both business and educational experience in the fields of Computer Science and Computer Graphics. She established and tested a web design process for the classroom that evolved during a sabbatical into a workbook and is being further developed for publication.

Maria Gosur

Maria Gosur carries experience in diverse areas of design, business, and education. As an independent web and graphic designer of I Can Create That, for over six years Maria has been providing her creative services to many organizations, school systems, and design groups. Her various project experiences led her currently to a full-time Web/Application Developer position at Schoolcraft College where she also teaches Computer Graphics Technology courses part-time. Maria has also taught Digital Media Design courses at Baker College of Auburn Hills and has shared her expertise with volunteer groups and advisory committees.

For more details and to pre-register for this free meeting visit:

Register for Event

When

July 13th at 7:00 pm

Where

Quicken Loans [MAP]

Cost

Free! You must pre-register by the morning of July 12, 2011
Sign-up now, even if you’re unsure. If you’re bringing a friend have them sign-up today also.

We look forward to seeing you there!

Recap: May PhoneGap Meeting

For our May meeting, Erik Daniel presented PhoneGap and his experience writing mobile websites how to transition them to native applications.

What is PhoneGap?

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.

Why was it created?

  • Safari html5 offline data has a 5 meg limit. This doesn’t make it viable for a true offline experience.
  • The current mobile market worldwide:
    • 36% Android
    • 27% Symbian
    • 17% Apple
    • 13% Blackberry
    • 4% Windows
    • 3% Palm
  • Not very many people know every single mobile platform
  • Almost anyone knows the web
  • You don’t need anything to write a website except a text editor.
  • PhoneGap is not
    • An IDE
    • A Build Tool
    • A substitute for good code
    • Going to magic your app into a billion sales
  • What is it?
    • HTML5 + CSS3 + JS

Pollyfill

  • Taking a feature set that is not yet developed but taking those features that have not been developed yet and backfill that functionality
  • Examples:
    • Geolocation
    • PhoneGap wrote an iOS extension to expose the GPS location of the phone to JS
  • Cross domain Ajax doesn’t apply on mobile apps
    • They assume if the app is signed it is quality code
  • Works just like an html5 app
  • Some example API calls:
    • network.isReachable
    • notifications.alert
    • console.log(“stuff”)

Why should you use PhoneGap?

  • You don’t know iOS
  • You don’t know Java
  • Offline HTML
  • One app to rule them all
  • You’re on a tight Schedule
  • Looking for Webish Features

Some limitations

  • Building to an iOS device you need Xcode
  • 99% of your app development can be done in Safari or Chrome
  • To publish your app to App Store, you need a $100 license
  • Don’t use PhoneGap for
    • Apps with intense graphics
    • Weak target phone with an intense Google Map app

The future of PhoneGap

  • build.phonegap.com
    • Remote PhoneGap builds, just upload your application and it does all the work
    • Erik still suggests to build your own apps, you don’t want any third parties potentially touching your code
  • Dreamweaver CS5 builds PhoneGap
  • PhoneGap will eventually be unneeded as phones expose more features to the browser