• Epic Quest
  • Final Boss

Purpose

We have put into practice development in HTML and CSS. Semantic markup, styling declarations, and behavioral scripts are important to frontend development. Additionally, we must take strides beyond the technical to build a successful communication tool. Mediated communication on the web is shaped by the social structures that have developed along with the technical infrastructure.

As front end developers we must focus on accessibility, interface design, and user experience to build effective and professional tools. Aim to understand and participate in the open social structures that emerge from growing technology. Learn to embrace innovation. Plan by creating personas and researching your audience. Track the usage of your tools and make adjustments based on evaluation. Know the rules and standards, so you'll know when and how to break them.

Objectives

Development of a successful project will encompass many goals. Be cognizant of how and where the below are achieved in your design.

  • Use web standards, web design concepts, and web design technology necessary to build an effective and functional web site
  • Use proprietary and / or open source software for web page creation
  • Employ concepts of accessibility, usability, and user experience as they pertain to the design of an effective and efficient web site
  • Develop a responsive, mobile first design that can work across many devices
  • Employ an understanding of the social characteristics of this new medium
  • Get practical experience being an awesome communicator

Scenario

You have been selected to create a simple yet effective website designed to the best of your ability. You have quested through the basics of web design and discovered many new concepts and skills along the way. Some of you have reinforced old skills and are continuing your journey as a developer. It's come time to step up to the challenge of this EPIC QUEST and make a difference in the community that you live.

If you already have a website, great! Already developed sites will not be accepted as a substitution for this project, you must design something fresh. Knowledge in the content or discipline you develop will be the key to success! Ensure you are selecting something you know about or are willing to research in depth.

This will be worth 1/3 of your entire grade! But are you doing this for a dinky grade? NO. Do this to show off your badassery as a communicator!

Plan

  • Observe
  • Understand
  • Analyze
  • Clarify

Design

  • Research
  • Demographics
  • Personas
  • Wireframe

Develop

  • Rapid Prototyping
  • Style Guides / SEO
  • Present / Revise
  • Hosting / Testing

Launch

  • Usability
  • Analytics
  • Approval
  • Maintenance

Criteria

You will be creating various items throughout this EPIC QUEST and your attendance is required. Missing class means you will lose points. Missing deadlines means you will fall behind and lose more points. Coming to class will help you stay on track and ensure you are on the right track to success. Check the schedule for what is due and when (seriously, you can do this on your phone!)

Your web site must be of a professional nature related to your area of study, serving some useful purpose to a business, organization, or user community. Your web site needs to include at least two pages of information chunked into at least two separate web pages. Look around the web to get some ideas for your project. Don't make a derivative though, BE CREATIVE!)

Coming up with a great idea for a web site can be challenging. It must be general enough so that you can have a sizeable information architecture, but niche enough to make a difference. Look for the balance.

Ideas

Consider the following possibilities keeping in mind that your topic has to include at least two pages:

  • A website that provides a local perspective for a national or international charitable organization
  • A website for some cause or issue related to your discipline
  • An educational website that teaches some useful knowledge of skills in your discipline
  • A web site for a campus organization
  • A web site for a business or organization – you might redesign an existing web site

*Unfortunately building the next great social network or other type of interactive site is outside of the scope of this quest. We only touched on computer programming, so such sites cannot be fully realized in this scenario.(Unless you are Honey Badger, because as we all know Honey Badger don't care!)

Thanks for a great semester! -Adam ampocius (a) gmail (dot) com

EPIC QUEST

Tuesday, April 1st

Points: 15
Attendance: 10

Time to embark on a journey as a professional web developer!

Start scratching that noggin, you have to pick a topic soon. Take a peak at the website to get your bearings, then talk to your neighbor and get to thinking what you are going to develop. I'm not going to approve an idea unless I think you can pull it off, so make sure that you make an informed and smart decision.

To Do:

Due: 4-7

  • Submit your top three ideas with a short description why by the end of class.
  • Submit at least two color palettes by the end of class.
  • Start thinking of your layout options for Thursday.
×

Personas / Audience

Tuesday, April 3rd

Points: 15
Attendance: 10

It's time to get a feeling for your audience and how they plan on using your web site.

One of the first steps in understanding how to proceed with design is by identifying your target market. No design will work for everyone and so it will be crucial to identify your customers and how they will benefit from your product or service. One mistake, is to think too broadly about the audience. Instead identify your niche and find the audience that will clearly fit your specific goals. Once you have the target audience nailed down, you can start thinking of personas.

Yeah it feels weird. We are creating fictional profiles of our perceived web site users. This exercise is beneficial for many reasons, and it can really get developers thinking outside the box. The ability to look at a project from a broader perspective strengthens the understanding of the overall user experience. When you start looking at any web site, start imagining all the users that will interact from a unique perspective. Let's take a look at a practical example. If you are designing a home page of a university website such as CSU-Pueblo, "Who would be your various users?" When looking at the users you listed, "Name some personalities traits those users might have?"

Once you start developing a list of users, you can prioritize them into types. In each of the various groups, you will start discovering the primary personas that should be addressed in your web site. In the end you should have three to four personas that can be developed to summarize the characteristics, needs, motivations, and environment your key web site users.

To Do:

Due: 4-7

  • Write a description of your web site target audience using the audience template
  • Create three fictional personas using the persona template
  • Group up with another person in class; create one additional persona using their information
×

Project Brief / Wireframe / File Structure

Tuesday, April 8th

Points: 15
Attendance: 10

Well look at you! We had great conversation in regard to what web design ideas will be accomplished over the next few weeks. Time to get to task.

Having a single concrete plan to follow is crucial to success. Setting guidelines and having concise goals to follow will keep your project on track (and can help circumvent nasty little things like scope creep). Aside from planning the project parameters, you will have to start preparing the basics on the technical side. In the scenario we are running, you are a hybrid of the client AND the developer. Your project will encompass much of your own input, but must still be a viable community resource. In the end, your 'payment' will come in the form of a grade. Be sure to focus on making a great plan. All the activities in the TO DO section must be turned in as a complete packet.

To Do:

Due: 4-14

  • Develop a complete project brief for your topic
  • Draw a site map as to how you anticipate you will organize your files (Example)
  • Prepare an example layout on Zurb paper to accompany your design brief. This must be turned in digitally!
×

Development

Thursday, April 10th

Points: 25

To Do:

Due: 4-14

  • Create a style guide for your website
  • Continue site development and have a more realized site by the end of the week.
  • Ensure your URL is active. It should look like this:
    http://gamifyedu.co/a/FIRST-NAME/epicquest/
×

Prototype / Framework

Tuesday, April 15th

Points: 15
Attendance: 10

Now it is time to start putting your web design skills into action!

Web design (or design in general) is a complicated process, but when distilled down to its separate parts it is very manageable. In the prior few classes, we have worked through the planning and pre-production necessary to guide us through this EPIC QUEST. Now let's be real about something, this is probably your first attempt at creating a web site from start to finish (pre-production included). What you will find is that all the initial work was tough. You had to do research, mock up designs, and think about interface design before you were able to settle on what seemingly worked best. Now it is time to put your planning into action!

Since you are going to be following the topic brief, site map, and wireframes you should have a good idea as to what your site is going to look and feel like. Furthermore, the audience research and personas should paint a better picture as to who you expect to visit your site. Now it is obvious that the scope of what we are trying to achieve has been compressed into a mere few weeks. Each of the components we have worked through to this point could warrant an entire class to achieve optimum results. Getting your feet wet in the process of design will help strengthen immensely your skills going forth. I expect that you use the time allotted over the next two weeks to really buckle down and produce an awesome website. Let's get this done!

To Do:

Due: 4-21

  • Create a functional HTML and CSS prototype based on your wireframes (you can use Foundation, Bootstrap, or you can build your own site from scratch)
  • Ensure that you integrate your color palette into the design
  • Create your directory structure and upload it to gamifyedu.co (Your URL should look like this:
    http://gamifyedu.co/a/FIRST-NAME/epicquest/
  • Email your URL into ampocius@gmail.com to receive credit
×

Development

Thursday, April 17th

Points: 25

To Do:

Due: 4-21

  • Continue site development and have a more realized site by the end of break
  • Ensure your URL is active. It should look like this:
    http://gamifyedu.co/a/FIRST-NAME/epicquest/
  • Eat some turkey and have a good time with your family!
×

Usability / SEO

Tuesday, April 22nd

Points: 10
Attendance: 25

Development is wrapping up and we are looking to get this site launched!

When creating a website it is easy to forget the little details. Today you are going to start ensuring that all your tags and attributes are setup correctly (or are even there at all.) Take a look around your peer sites and give them some feedback as to what you think.

To Do:

Due: 4-25

  • Ensure that all the images have the 'alt' attritbute for disability resource
  • Ensure all your <a> tags have a keyword in the anchor text
  • Finish up all development
×

Presentation Overview / Launch

Thursday, April 24th

Points: 10
Attendance: 15

Coming soon...

To Do:

Due: 4-25

  • Finish adding content to your web site.
  • Ensure all images are sized and compressed
  • Prepare for your presentation on Monday.
×

Presentation

Tuesday, April 29th

Points: 50
Attendance: 30

Get your tray table in its upright an lock position. It's time to present the work you have been doing during this EPIC QUEST!

To Do:

  • Present!

×