Part 4

Wireframe the site in Adobe XD or Figma, then prepare the images as WebP with XnConvert.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We design the pages before building them, with a free alternative to Adobe XD, then get the images ready for the web. In this part: 0:50 Installing Adobe XD 1:17 Figma, a free wireframing tool with an education account 5:03 Building wireframes in Adobe XD 7:35 The home page layout: banner, navigation, slider, information and footer 10:02 Login, account and profile pages 13:20 Linking the pages into a clickable prototype 15:54 Sharing the design and exporting it as PDF, PNG or SVG 17:44 What WebP is and why it matters 20:51 Converting images to WebP in XnConvert, including a batch of 11 25:38 Blank index.html files to stop visitors listing the image folders Software: Adobe XD, Figma, XnConvert, UwAmp.

Transcript

Welcome back and in this video I'm going to show you how I designed Parkwood Vale
website. This is going to be targeting points from 2.4.2, the design of a
transactional website. What we're going to be looking at to start with is the
wireframe designs and how I used Adobe XD to create those.
Now Adobe XD is part of the paid for range.
I will be showing you a free alternative as well.
I'll be showing you how I prepared the assets, namely the images, to make sure that
they could run as efficiently as possible and then look talking you through the CSS
structure I chose to help me develop Parkwood Vale.
Let's get into it.
okay so as you can see then i'm back here on my student desktop and what i'm going
to do is start by opening up adobe creative cloud from the creative cloud you can
see under my applications the only one installed at the moment is adobe Dreamweaver
and i want to install adobe xd to allow me to create those wireframe designs.
So I'm gonna scroll down, find Adobe XD, just click install and let that do its
thing. While it is installing XD, I'm gonna take this time to talk you through a
free alternative called Figma.
Now, Figma is completely free for anyone with an education email address.
You just click on get verified, fill in the details, and they give you all of the
features for free. Figma can be web-based.
So here's the web application here, I'm already logged in.
file it will show you its interface.
Instead of having what's called artboards they use their own sort of terminology so
they call them frames. I can draw out my frame and down in the bottom corner in the
middle of the bar you can see the dimensions that frame is going to be.
They have pre-built frame sizes as well.
If I click on to insert frame on the side here I can go for desktop i can go for a
standard desktop it's got 1440 by 1024 and i can pull that in place
and it'll put that as my background now with figma just like with xt i have
shapes that i can use i can go in and say i want a rectangle for my banner across
the top here and then i'm going to change the color of that to red i'm going to put
in another rectangle just underneath it and that is going to be the base for my
buttons. I'm just going to copy that, paste that, move it over.
So I've got two buttons and I'm going to use the text tool here just to write in
this box here,
home,
where I can edit the styles through this side pane.
I'm going to go in and put another text box here and just put that down as about us
and draw out another setup of this section.
While doing so, I'm going to add in a frame, sorry.
I want to add in a image or video placeholder.
And if I go into that again, it'll allow me to place video or image, go into my
documents. And what I've got in my documents are the images
used within Parkwood Vale. So here's our background image.
I can open that up and that'll allow me to draw out where I want that to be.
So you can put that there for now.
I will include these images, all of the images you see within Parkwood Vale, in my
tutorials, so you should have access to them.
So there's my first page. You can see I've got the Home and I've got the About Desk
button. I've got that background picture.
All I'm going to do is press Control-Nate to select All, copy it, paste it, and now
I have two. So if I zoom out, you should see I have two identical desktop sizes.
What I can do is use this prototyping option that will allow me to create a link
from the About Us button and link it to that page.
I'll delete that there. I can do the same thing on here from the Home button.
My prototype is going to link back to the Home page.
And then there's my setup. Now, if I click on Play, I can preview and see what it's
like.
So it loads in Webbase. If I click on About Us, there's no element
there for that picture. If I click on Home, it goes back to Home, there's that
picture. I get the ability to share this as a link that I can download or I can
publish it to Figma themselves.
Or I can go into Figma, File, Export Frames to PDF, but that will
obviously lose all of its functionality.
Now, this is a free version of a wireframing document creation tool.
Brilliant for Key Stage 3. It's not going to cost you an Adobe license to put it
through for them. They can get some practice, they can learn how to do some
prototyping, ready for Digitech Level 2, so the GCSE, and then Digitech Level
3, the A-level.
That's Figma, completely free.
I'm going to get rid of that for a second though.
I'm going to go back here because Adobe XD should be installed.
and I'm trying to keep my unit for tutorials all within
Adobe software where possible.
So I'm going to open up Adobe XD and hopefully this loads
without asking for details. It has.
Brilliant. And there is my setup.
Now you'll see in a second that this is extremely similar to that Figma software.
If I go for a new file here, it comes up and asks me what I want to create.
I'm going for web because 1920 by 1080 it creates that for me the
main differences in terminology these are called artboards so if I go
to edit and I want to even if I want to add a new one in the down the side here if I
hover over it it's called an artboard click onto it again it wants to know the sizes
I want for it and it has some pre-built sizes on the side here I could scroll to.
But just like when I was in Figma two seconds ago, I've got a square tool that I
can, if I zoom back in a second, draw up my banner across the top.
And then on the side here, I've got some tools based around what I want to do with
that banner.
My fill tool will allow me to choose the color I want for it.
My border tool allows me to choose if I want a border for it.
And I can even put in the size in pixels that I want that border to be.
I'm going to do the same thing.
I'm going to place in
So let's not rotate that. What I'm going to do is click off of here and just draw in
my nav bar underneath. And I'm starting to build it up and put in place my different
sections. So that would be my nav bar.
Let's just check a different color on it just so that it can be seen.
Not the best of colors for it, but it will do for now.
Now, on my designs within the exemplar, I had the background picture from
Parkwood Vale as my background picture here.
The way I did that would be file and import, and that will allow me to find my
pictures. So in my documents again, Parkwood Vale, images, and there's my background
picture. And I can place that where I want that to be.
Now obviously, that's covered everything I have in place.
So what I want to do is just send two back, and that allows me to put that in place
there. And as I'm going through, I've got my banner, I've got my box there for my
nav bar,
and draw out a nice big box for my main content for my site.
And then I'm gonna end it with that footer box as well.
After I put them in place, it is easier to tidy them up a little bit, put them next
to each other,
and place that as it is. And then finally, my footer bar.
And what I'm gonna do is copy that, paste that, and place it underneath so it sort
of creates itself there. this is very much drag and drop publisher style
putting together my web page across the top here then i'm going to say logo
for pwv in the center here i'm going to have some information about what's going to
be included now in the start the home screen for Parkwood Vale i do have that
parallax scrolling element as well so i could put in another box inside this section
here and I'm going to say just simply increase this.
So let's go a red color so it can be seen.
Increase it up to five pixels so you can see that border.
Use the text tool and say in here, image slider.
And I've got that image slider in place.
So this is my home screen now.
My logo, check that in the center again.
And what I'm actually going to do is put it in a white box, which I'm going to send
back with one.
I'll send backward until I can see my text.
Send backward, there we go. So I got that in place.
And then underneath here on Parkwood Vale, I'd have some information about the
library. So just here,
info about the library.
Now, it is up to you what you want to do, whether you want to have
your students actually
fill in all of the details so that when you look at their design, it's fully in
place. At the bottom here, then, I'm just going to put in, in the center, I had
Parkwood Vale Copyright.
So that's that there. I'm going to highlight that very quickly.
And over on the side, change the fill.
So the color of my text to white.
So that can be seen.
And that is my starting point there.
That's the base for how my pages are going to look.
But I'm going to copy that here.
Paste it.
and move it all down. So I have two of these sections.
There they are. And then I'm going to start designing my second page.
Now what I'm going to do for my second page is design the login page straight away
because they're the two I'm going to focus on.
So I'm going to get rid of my image slider.
I'm going to get rid of this section here.
I'm still going to have the rest of the content and I am going to centralize that a
little bit better because that was terrible up here.
let's centralize that there we go and on here then I'd have in my login
details
so I'm just gonna go with a text box and say login details
and over here I could have say a
username I'm gonna go here and I'm gonna go password
and then I'm going to have a login button.
So I'm going to drop that in here as well.
Log in.
I'm going to have a box where they can enter their username.
I'm going to have a box where they can enter their password.
And when they're logged in, it's going to take them to their profile page.
Now, that's all set up for my login section, but without the prototyping, I can't
get to it. so I'm going to go back to page one draw out my first button and
just like I did in Figma I'm going to call this my home button so that I can get
back to my home page
both sections I want to copy them down into this section here just drag it straight
from one board to another and I can align that up perfectly so they look the same
I'm going to copy it again paste it again drag it over this is going to be
my account page which is over the other side here so i'm going to put in here
account
centralize it copy it paste it and drag it down so there's my two
pages i'm going to do one last one which is my profile page which isn't going to be
hierarchically down it's going to go across from this.
So I'm going to copy this,
not all of it, just this section here,
paste it, drag it over, and then design how I want my profile page to look.
So over here, I'm going to say profile, and then get rid of these
elements here
and set that up. So on my profile, I'm going to have my username,
my password, I have password, I'm gonna have my
Forename
Just copy that paste that
Surname
And all the other characteristics I put in place.
I'm also gonna have an element here section over by here for my profile picture
So I'm gonna put in a text box
And simply say profile
that's my profile page let's just move that over to centralize it
there we go so i now need to put in the navigation elements
the prototype elements that will allow me to go from one section to another just
like figma i have to change the actual type i'm in so from design up here
i'm going to change it to prototype and that's going
on my home button and that's going to take me to my home page so i'm just going to
drag that to itself and it shouldn't really create much of an issue on here drag it
to the home page
and on here drag it to the home page and it links them together my account page
is going to take me to my account section so let's go there and connect it to
that page why does that not want to connect
I don't think they've gone in as actual artboards.
So let's go artboard.
And I was on web 1920 by 1080.
Let's see, I have now what three of those,
which is what I want.
These details belong on there.
these details belong on there and let's take that
web board down to there now try our prototyping again and see if i can now
go prototype to there works perfectly my login button is going to take me to here
my account is going to take me to
here and home is going to take me to here and all I'm doing is building up the
navigation style of where everything is going to take me and if I click on the play
button across the top here I've got my home button I'm on my login details let's go
to home here's my home page my account page takes me to login details takes me to my
profile page and I have that all set up so I have a plan for my
library that I can follow when creating it in HTML.
This is the base structure and like I said I will provide you with the images you
see inside my images section here.
These will be downloadable via our Moodle link.
I'll explain why there's a HTML page in here in our next section as we go through
detailing our pictures and preparing our assets.
but I just want to leave it here with our wire framing.
What I do have to show you in the final section is how to share it.
That's our share option up here.
We have the ability to say whether people can go into design view, develop it,
present it, test it, or what you want to do with it, and who has access to it.
So I can say anyone with a link, only invited people, or anyone with a password so I
can password protect it.
Now again, submitting this as part of your coursework, it is
the link but as you can't guarantee because it is an adobe based link how long that
link would be live for i would also encourage you to go to export and all artboards
and download all the artboards as a say pdf png svg it is down to
you i'll go to a pdf a single pdf and choose my documents,
Parkwood Vale, and possibly have a wireframe
folder and put that in place.
Now, if I export all my artboards there in my wireframe folder, I get my
PDF, which shows my wireframe designs.
Nice and simple, but sadly, doesn't keep those interactive elements.
that works exactly the same way yeah save that as pwv
demo in figma or in adobe xd they
both export in the same way they both produce the same content they both well adobe
xd comes under the creative cloud package figma is completely free
in the next section what i'm going to do is take you
through preparation of our images.
See you in a minute.
Okay, so with the wireframe designs completed, then the next stage is to prepare
assets ready for our web development.
If I go into my images folder, you'll see the stock images that would be
used within my website. We've got our books background, we've got some children in a
library, we've got some office-based IT areas, elements, different hero
banners, and then some outside pictures of libraries as well as the Parkwood Vale
logos. These are the stock images that will be used throughout the whole project.
Obviously, you're going to have to send your students off to find their own images
for their own projects, and you can get generally multi-free images from
Shutterstock or other alternatives websites.
Once you've got those pictures, though, that's not the end of the process.
These pictures here are all in PNG format.
So if I go into my properties section, you'll see they're all in PNG.
And if I actually zoom out into the details section, you'll see the sizes of them as
well.
Eventually, there we go. So we've got our size, we've got our dimensions,
place. I'll come to this in a second.
Next thing I would look to do is to create these in a modern web
format. If I do go to Parkwood Vale's website, so parkwoodvale
.co.uk,
and I right-click onto, say, the logo, and I go to open image in new
tab, you'll see that it's not
saved as a PNG for a WebP image If I get rid of that feedback
section and I do the same here So open image in new tab and that
too is WebP WebP is a image format that was created
by Google to be a much more efficient much more lightweight image for web
browsers
So that page speeds are vastly improved
The easiest way and the free way that I've managed at least is to use the
XnConvert for Images, which is XnConvert, Batch Image Converter.
It is a free piece of software for use within schools again.
And as I go here, if I go to the downloads page or download section
even, because that's an anchor, we have it as an installer or as a standalone
program.
Now, I'm going to stick with the standalone programs that I've been working with.
far. So here's the XnConvert.
I'm going to go into my downloads folder, wait for that to finish.
And I'm going to put that as well on my memory stick, which is in place here.
I just need to mark that. Yes, I'm happy to keep that piece of software and
keep it anyway. So there's that.
Now in here, I've got my XnConvert.
If I open that up, there it is.
I'm just going to drag it into my D drive and that should extract it give it a
couple of seconds to run through and I'll show you how to use this XnConvert to
convert your pictures from WebP PNG whatever format jpeg into the
necessary formats so I've got that there I'm going to back to Shutterstock a second.
.com. I'm going to grab a picture of a library.
Library computer, there we go.
So there's a library section. I'm gonna go for this one here.
There's my picture.
And I'm just gonna click download free.
Now it wants me to sign in, so I'm gonna use my school email address to sign in.
Actually, I'm not going to do any of that because I don't want to put any card
details in. Let's get rid of Shutterstock then.
Let's just go back to good old Google Images.
And I want images. I want a library.
Computer.
And tools.
Usage rights. Creative Commons.
so then i'm going to go for um this one here there it is
and i'm just going to save image as jpeg perfect so i can show the
difference between them in my documents in my Parkwood Vale images i have a
png folder realistically i should have a jpg folder so that i can differentiate
between the two so let's get rid of that go to that get rid of that now in here i
have XnConvert it's completely exported i'm just going to run XnConvert and here
is my application
my animal farm hero image then is 777 kilobytes
if i drag that into here and i set my output as a
type i don't want the same format because that would really change anything got a
list of different file formats that I want to use it as and I'm looking for webp.
So here it is webp.
I'm going to set that there.
Now the output folder I'm going to have the same as my source folder so it will
appear in the same place and the rest of the details I'm going to leave them as they
are and just click convert and there it is.
It has now converted that is called it Animal Farming Hero Results and you can see
the size difference is immense.
It's gone from 777 down to 50 kilobytes if i jump out of there jump into
the jpeg folder a second and let's get that zoom sorted so we can see our size is 3
.15 meg here the picture is there let's drag that into our input section i
can get rid of that one because it's already done my output is still the same source
folder with results at the end of the name webp click convert it'll take longer
because it's a bigger file not that much longer and you'll see that's gone from 3
meg down to 466 just by changing that file format.
That means that when it loads onto your web page, it is going to load much more
effectively. Now, my JPEGs are unneeded.
I will get rid of those. They were just for demonstration purposes.
My WebP folder is there, but it's empty.
So I'm going to come back here, get rid of the results section.
Thank you. And what I'm going to use is the bulk element within this.
So highlight all of them, take out my index page, and I'm just going to drag them
all into here.
11 pictures are in place. My output folder, I'm not going to need the word result at
the end of it, so I'm just going to delete that.
The folder for it, I'm going to place it in my documents, in
my Parkwood Vale images WebP folder, and click convert.
And it will rattle through all of them.
And what I'll end up with, if I go back into my images and open this in a new
window, and snap them side by side, I'll have a series of
pictures, all exactly the same.
The dimensions are the same, but the size of the files are dramatically reduced.
So the page will load quicker.
Now that will impact how we add our pictures into our HTML pages.
We won't be using a simple image tag like you'd expect at GCSE Computer Science.
We'd have to use a bit more advanced techniques, but I'll talk you through those as
we get to them.
The last thing I wanted to do with this picture section is explain why I have an
index page here. Actually, if I open this, so let me just open it in a basic text
editor, so open with choose another app, and I want to use notepad, you'll
see that it is a blank file.
The reason for that is if I go into UwAmp, and let's start up UwAmp,
There we go, that's running. And I went to my local host and loaded
that page. I should see my UwAmp page.
There it is with my PHP tag from last time.
If I go in and just simply for a second copy my images
folders into my UwAmp www images folders
and paste them there.
if I remove that index page when I go to
localhost forward slash and I put in images
it will show me the index of all of my images if I go into my PNG page
it'll show me all of my PNG files that are accessible like I was browsing them
within a file browser if I go into the
webp folder, which still, if I go over here a second, has that blank HTML
index page. If I open that up, I just get a blank page.
Now, that method is used by lots of companies, lots of
organizations to prevent you from being able to farm their
images, being able to farm any files whatsoever just by using a blank
index page so if i put one in the images folder if i go back to the images folder i
refresh this am i in there yes image ah hang on a second
i'm capital i
what i should get is a blank page instead of being able to
see any output at all so i can keep any folders I like in this section here
because my local host won't display them.
That index page is taken over control of it so that it can't be displayed to
anybody. Same goes in my profile pic page.
I have my index. So if I went into the profile pic folder, you wouldn't see
anything that has been cached or saved.
So if you did have a folder full of other people's images for their
got an easily accessible cache of people's pictures.
So always encourage your students as best practice, especially
at A-level, to include these blank index pages to prevent the display of any
folders.
Next up then, in the next video I'm going to take you through setting up our basic
HTML sections using Dreamweaver and Bootstrap.