For your Responsive Website Development and Design Specialization Capstone Project, you will create a complete, responsive, multi-user, data-driven website which aims to solve a particular problem. We encourage you to create a website addressing a problem that you are interested in! However, if you don’t have an idea of your own, we have several that we will suggest in the course. In the capstone project, you will: 1. Develop a complete website using the full range of skills learned during the specialisation 2. Work through a structured process from idea generation to product delivery 3. Document and receive feedback on the development of your project from an idea to a fully functional piece of software in a series of structured assignments including peer interactions Participation in or completion of this online course will not confer academic credit for University of London programmes
Digitising the Idea
Loading...
Del curso dictado por University of London
Responsive Website Development and Design Capstone
38 calificaciones
University of London
38 calificaciones
Curso 6 de 6 en SpecializationResponsive Website Development and Design
De la lección
Digitising the Idea
Welcome to the third module of 'Responsive Website Development and Design Capstone!' By the end of this module you will have, put your idea into a digital format, explained the purpose of a site skeleton and defined paths through your site skeleton. In addition, you will have made design wireframes for key pages in your application and developed ideas about the look and feel for your application.
Conoce a los instructores
Dr Matthew Yee-KingLecturer
Computing Department, Goldsmiths, University of London
Dr James Ohene-DjanSenior Lecturer and Assistant Pro Warden
Computing Department, Goldsmiths, University of London
[MUSIC]
Right, so we've got the vision for our idea.
We've even kind of put in quite a few details about how the idea is going to be
put into practice and
we know how to explain our idea to other people in a very short time.
So now it's time to really get down to work and
start to sort of digitize the idea.
So I'm joined again by Doctor James Eunigen from Dartmouth college.
And we're gonna just have a chat about how we can go through this
process of digitizing our idea.
>> Yeah, well digitizing the idea is really putting it into a format,
which is much more formalized again.
So we're moving from the vaguery, or
the abstractness of division through to the pitch.
And now we're looking at how we represent it in the digitalized form on
the computer.
>> Does this happen before we get to coding?
>> Absolutely. >> Because I can remember a video,
earlier on in the specialization, where I
remember Mick Gresham was really telling us don't start coding straight away.
Get it clear, get the user experience clear, digitize the idea first.
So I think it's great that we're gonna go through that again.
And make sure they don't start coding until they're really ready right?
>> Yeah, absolutely Matthew,
it's very very important that you do all of the specifications before you start.
You digitize that idea.
What you want to try and do is create a visual guide to the project.
So a visual guide may consist of things like a wire frame.
>> Okay, so we spoke a bit about wire frames earlier on in the course,
but maybe you want to go back and check out the videos about that.
But what do you think of when you say wire frame?
What picture appears in your head?
>> Right, well within a system is always a skeleton.
And a skeleton are like all the connecting parts of the system.
Now that skeleton might be a hierarchy.
So you might start at the top and then drop to a level, and another level and
another level.
Or it might be a web, where there's lots of interconnections or hyperlinks between.
But it's very, very useful to know what kind of wireframe, or what kind
of skeleton underpins your application or your project or your website.
>> So, it's like a map.
Which sort of says what all the pages are or the processes and
how they connect together.
>> Yes. >> But does it have more detail as well?
About how on an individual process, how it actually looks?
Or where things are on the page?
>> Absolutely.
What you can do, once you've got that whole wire frame or
that skeleton, you can walk through paths through it.
And you can say, well If we were going to, for example,
be a customer who is looking up a house on the website for the state agency.
We could say okay, what's the first thing I see?
Its this screen on the wire frame.
What happens next?
Next I click this button and do this search and so
you can walk your way through the system before it's built in a digitalized format.
The great thing about keeping it digital means that you can change it.
>> So if we did it on paper, maybe it's a bit trickier to move things around and
reconnect things.
So we should probably be looking for
some software which helps us to kind of draw these diagrams.
And we will be providing some information about good pieces of software for
doing that with this video.
>> Absolutely, that's really important.
The other thing is of course to try and
recreate what you believe some of the user interfaces will be like.
So by that I mean create some of the screens.
What will people see?
It's very, very important for people to understand how something works by
seeing what they're going to be faced with.
What kinds of interactions they're gonna be asked to make, and what they'll see.
>> So are we focusing on interactions here, or
are we worrying about the layout and the design.
I mean, because I imagined,if I was doing it,
I would probably want to get all the right buttons on there first and
worry about where they're going to be later but maybe have a different approach.
>> Absolutely.
I would be very similar to your self.
I think the first thing is to worry about what buttons should be there.
What control should be there, what people will be faced with.
Later on we can, in effect, put the clothes on the design.
So we can then make sure it looks beautiful, and that it's simple and
easy to use.
But if we get the functionality part wrong,
then it's much more difficult to unpick that later.
So what we're trying to do is to create some user interfaces or
some screens which reflect what users will see.
But only in a very sort of simple way.
It's often, once again, much, much better to use software for this.
Because you can, of course, do changes.
>> Okay.
And, so talking about designing and making it beautiful.
We've got this idea of look and feel.
Which we've talked about in some of the previous videos.
But, how do I sort of work on my look and feel once I've got my Y frame,
my skeleton and so on?
>> Well, there are lots and lots of different ways to do it.
In a sort of modern computing environment, we often use things like templates.
>> Like Bootstrap, right?
>> Absolutely.
Bootstrap would be a really good example of an excellent templating system.
But a templating system, basically, is a set of predefined styles and
behaviors for the components in those styles.
So I would suggest doing two things.
Spend some time looking at other similar products, systems, or websites.
To see if you can see any which have the look and feel that you like.
That's very important.
Secondly, if you can find a template that supports that look and
feel, I would encourage that.
Why?
Because you don't want to be reinventing the wheel.
>> That's right. And so,
we've covered quite a lot of information about Bootstrap.
And how to build all the different typical components you might want to have on
a webpage using Bootstrap.
We've also talked about how you can use Bootstrap themes to sort of really quickly
adjust the colors and the general look and feel of your page.
There are other types of CSS libraries and widget sets available online.
You just go and have a look and see what works for you and
what you like the look of.
So there's one more thing we should probably think about when
we are coming up with this design and its this idea of accessibility.
We've talked about accessibility previously.
But what do you understand by accessibility, James?
>> Well, I always think of accessibility as being three things.
The first if the ability for
all different types of users to get access to that information.
So, in order for that to be the case.
We need to make sure,
for example, users that have poor eyesight can increase the size of the text.
Users who, for example, can't see can listen or read an audio recording or they
can have support of extra text that can be read by a screen reader for example.
So there are those components so we do things.
If we put an image up we always put an alternative text description with
that image.
If we have a control.
We always make sure that that control is in an order
that if we tabbed through the page.
We would be able to go logically between the right controls.
>> Right.
>> That's very important.
The second thing in terms of accessibility, is on different platforms.
So this is important.
Today in computing, people use all kinds of different types of device and
all kinds of sizes of device to access the same piece of software.
>> So this is where are responsive design comes in so
again go back to the earlier courses.
There's a lot of information about how how to implement responsive layouts,
which will react to the size of screen that people are using.
And make sure that, it's as usable as possible on those different screen sizes.
>> Yeah, absolutely.
So, it's very, very important that it's accessible there.
The third thing is this.
If the design is too complex, if the design is written in a way
that is to difficult for people to understand, it's also inaccessible.
So, we've got the three things.
We've got the accessibility for different types of users.
We've got the accessibility for different types of platform to be delivered on, and
the accessibility in terms of the user experience.
>> So what we might call usability.
>> Yes, absolutely.
>> Yeah, okay.
So we're gonna talk a little bit more about how we might investigate how usable
our site is in a later video.
But so, what I do is just sum up there and say.
Okay so we start off with this idea.
We wanna digitize our new kinda vision into something which we can,
start really thinking about the nuts and bolts.
But we don't start coding yet.
We start off by building a site map effectively, or whatever it is.
A flow diagram, or
however you want to represent the different processes on your site.
And then we start thinking about what the user can see on each page.
By sort of creating very simple wireframe designs.
And we then start thinking about, what's a walk-through?
What's the experience?
What do they see on each page?
What's available to them?
And think about look and feel as well.
So investigate, how you're gonna use some templating library, or even your own
design to really give it a certain character and consistent look and feel.
And finally, we talked a bit about accessibility and
the sort of key concepts there that you need to think about.
[MUSIC]
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2018 Coursera Inc. Todos los derechos reservados.
