Introduction

The Dynamic Web Design course essentially requires you to work with a team of two other students to build (design and develop) a complete, working dynamic web site within 11 weeks. This is challenging, especially if you have done nothing like it before. One key to success is to work steadily, accumulating progress every week, ideally every day, and not just working in bursts before the submission dates. To help with this, we have identified a set of key elements of a good site, which we require your site to include. These will be developed during the course and will act as regular small interim submissions that guide your work and help to keep it on track.

Another critical key to success is that your team works effectively together: everyone pulls their weight, while everyone helps and supports each other and learns from and with each other. In this course, you stand or fall as a team, and your individual success depends on the success of your team. So it’s important that each member of the team is included and makes a contribution to each of the steps discussed below. Eventually, the team will have to explain and account for how the individuals have worked together.

Compulsory figures

At one time, in ice-skating competitions, there used to be a specific list of “figures” (loops, jumps, spins, etc.) that each skater had to include somewhere in their routine. The skater would be marked on the technical quality of their figures, but also, and equally importantly, on the “artistic interpretation” of the whole routine. We borrow these concepts. There are certain specific kinds of elements that your site must contain — the compulsory figures — and you should do these as well as possible, but in the end they have to come together as elements in a harmonious and effective design for the whole site. How they fit together and how you use them is as important as how well done they are in themselves. Some of the elements are very much about the technology while others are more focused on design.

The course is structured around these elements, in that we will cover the background and techniques necessary for them in turn, and we will expect your team to deliver a demonstration of each one in the context of your site. Meanwhile, you should also be working out creative, imaginative and appropriate ways of integrating them into your overall site design. An important aspect of these elements is that they are relatively simple, but all can be used in more sophisticated ways if you develop the ideas and techniques further.

The following list outlines the “compulsory figures” we will be using, and the time schedule for delivering them. In each case, there will be an existing skeleton implementation that will be presented in a lecture or viewtorial (or both), and integrating that into your site will be the minimal way to deliver the task. This might take anything from minutes to hours, depending on the existing level of skill in your team and how quickly you learn, but we have our own team of skilled and experienced tutors on hand to help you with any problems you encounter.

Database + form (SimpleExample)

The course starts with a “Simple Example” that demonstrates setting up a database on the server, and getting information into it and out again using HTML forms and templates. Making this work is the first task, which your team must achieve by the end of week 2.

Simple case of AJAX

AJAX is a technique (Asynchronous Javascript And XML) that offers a more flexible way of relating the front (browser) and back (server) end of your web application. We will implement a simple case of this by the end of week 4.

Simple case of using an API

An API (Application Programming Interface) is used to connect different pieces of software together, e.g. when bringing data into your site from a web service provided somewhere else (e.g. weather data, recipes, videos of cats, or whatever). We will address this during week 5, coinciding with the submission of the assessed “Alpha Prototype” of the website.

Usability and responsiveness

Any web site must be designed with careful thought for how those in the expected user group will react to it. In week 6 the focus will be most strongly on this issue, and the task is to carry out and document a usability evaluation of your prototype, deriving pointers for further development towards the Beta version. Responsiveness is also a concern here, given that your site may be likely to be used on a variety of devices; this needs to be considered in relation to the nature of the design and the user community.

User interactions

Turning the focus more fully onto the front end, it’s time to look at some interaction techniques with great creative potential, e.g. drag-and-drop, various kinds of animations, etc. A selection of these will need to be demonstrated in use on your site by the end of week 7. In your final design, the creativity of how you use these kinds of elements will be even more important than the technology.

Accessibility

Websites need to be accessible to users with e.g. visual impairments and other difficulties. There are international rules, standards and techniques for these aspects of site design. This task will involve making sure that your site meets appropriate standards and passes certain simple automated tests. This will be addressed in week 8.

Safe uploads

It’s common for a site to offer the opportunity to upload files of some kind (images, perhaps sounds and other things). This task involves understanding issues around the security and safety of such operations, and integrating an existing skeleton implementation into your site by the end of week 9. (These days, it’s common to use various “Cloud” services via APIs for this kind of functionality, which we will also discuss but not expect you to implement.)

Assessment

The “compulsory figures” are not directly assessed, but will be subject to classroom demonstration and critique. The Alpha and Beta prototypes will be expected to include those elements that have been covered up to the point of submission. Therefore, it’s very important that the whole team works on these elements as they are introduced, and integrates them in at least a simple way into the ongoing prototype development. A good prototype will embody all these elements, implemented correctly and effectively. But no less important will be the design flair, creativity and imagination of the overall design that they form part of.

Teamwork

Assessment is primarily of the team, not the individual. Teams are inevitably unequal. Some will include a member who is already a good programmer, others may not. The team needs to evaluate the skills available to it and use them as effectively as possible. In principle, a team with good design skills but no previous experience of any of the technologies can be highly successful in this course by understanding how to use minimal technical resources to their best advantage. Similarly, highly experienced developers have sometimes done less well by tending to overcomplicate things in ways that are not understood by the rest of the team and prevent them from achieving a good design outcome.

No matter how good the individual members of a team may be, the team will not succeed if they can’t work effectively together, and then none of them will get a high mark on this course.

The importance of good teamwork in this course cannot be overstated.

However, the marks of individual group members will be moderated by their contribution to the group effort, mainly using the WebPA peer assessment system of simple online questionnaires in which the team members assess each others’ contributions. Other evidence may be used at the discretion of the Course Organiser.

Both prototype submissions will be accompanied by a report (around 750 words) giving a clear account of the design rationale (why the site is the way it is), the methodology and the techniques used. This should clearly explain how the team has worked together, and the roles of the individuals in it.

Inspirational quote

Here, I echo the following, which was originated by colleagues Martin Parker and Jules Rawlinson (in this case, think of the field of web design):

“My re-occurring advice to you this semester will be to look widely and across your field to see and identify the work that impresses you. Ask yourself frequently, how would you meet those same standards? How are they doing what they’re doing and why is it exciting you so much? When the technical challenges begin to bite, step away from the screen and try to remind yourself why you were doing what you were doing, what was the expressive, aesthetic, conceptual aim? This will lead to simpler attitudes to technical things, but bigger impact in the experience.”

Perhaps different members of your team will be impressed by different things, for different reasons. But that’s OK; it will foster useful discussion about the core values of your team’s design. In this course, a key objective is to excite the users of your web site, not just serve them efficiently or make money effectively.