2017

Unit 3 Digital
Portfolio

ASSIGNMENT 1 DESIGN A DIGITAL PORTFOLIO

JUAN SEBASTIAN CARRENO HENAO
Juan Sebastian Carreno Henao

Describe the audience and purpose for the design of a digital

portfolio

Sebastianprojects.com is a web page where I will show my portfolio to the employers

of the company called TechCity. This company is recruiting IT people for an apprentices
and I am interested on this vacant. This webpage is not only to give information about
me and my skills to the company but is also aimed to any person who wants to see my
skills and my projects, my qualifications and my experience of different IT areas to
engage me for an IT job or apprentices.
The overall purpose of my portfolio website is to show how well I am prepared and
how I can be able to manage different projects such as developing webpages, creating
a specific program for a company, maintaining software and hardware, etc. This
website will help me to give the reader an idea of my skills and my knowledge as it will
contain all the projects and assignments that I have tone through my studies and work
experience. This is to attract attention and get an IT apprentices on the company
TechCity, which is asking me to create a portfolio with information about me, my
projects, skills and qualifications.
My portfolio meets the needs of the audience because the company TechCity is asking
for relevant activities that I have done, such as other courses or qualifications,
community work I have undertaken and any other achievements, as well as details
about myself. All the content is in a suitable format for displaying on the web, the
portfolio has a main page (index/home) which the other pages are linked to and it has
different sections based on the different content I have created and the work from all
of my completed units in the course.
In my portfolio, I have included relevant and professional information about myself.
This information is useful for the target audience which is the employers of TechCity
and other companies. The data that I have created for my portfolio is suitable as it
contains all of my already done projects, my experience on the IT sector and the
qualifications that I have achieve through the year, all of my assignments that I made
during I was on the course and the marks that I had achieve. All of this information
that I have included in my portfolio meets the target audience as they are looking for
an IT person that can show his abilities regarding to IT.

1
 Juan Sebastian Carreno Henao

Produce designs for a digital portfolio: Storyboard.

Home:

This is going to be the

header/tittle of the
website, it will be an Arial
font with a size of 48pt and
This is where and how the red colour.
logo is going to be, it will
be red and white with the
letters of SProjects.

This is an introduction text

The background that will explain a little bit
colour will be a the purpose of the website
Dark blue and will contain some
information about me. The
font of this text is going to
be Arial, with a size of 14pt
and the font colour will be
white.

The navigation bar will be

having red buttons with
hyperlinks to different
websites, the font of the
hyperlinks will be white with a
font size of 16pt and an Arial
style.

2
 Juan Sebastian Carreno Henao

Projects:

This is going to be the

This is where and how the
header/tittle of the
logo is going to be, it will
website, it will be an Arial
be red and white with the
font with a size of 48pt
letters of SProjects.
and red colour.

This buttons are going to

be Hyperlinks to open all
the assignments for each
Unit, the font will be Arial
with a size of 16pt and a
green colour.
The background
colour will be a
Dark blue

The navigation bar will be

having red buttons with
hyperlinks to different
websites, the font of the
hyperlinks will be white with a
font size of 16pt and an Arial
style.

3
 Juan Sebastian Carreno Henao

Experience:

This is going to be the This is going to be

This is where and how header/tittle of the an image
the logo is going to be, website, it will be an showing a
it will be red and white Arial font with a size of graphic example
48pt and red colour. of the job done.
with the letters of
SProjects.

This is going to be a list

that will have a button
for each job that I have
done, those buttons are
going to open a text
where I explain what I
had to do for each job.
The font will be Arial
14pt with a white
colour.

The background
colour will be a
Dark blue
The navigation bar will be
having red buttons with
hyperlinks to different
websites, the font of the
hyperlinks will be white with a
font size of 16pt and an Arial
style.

4
 Juan Sebastian Carreno Henao

About me:
This is going to be the
This is where and how
header/tittle
Font: Arial of the
the logo is going to be,
website, it will be an
it will be red and white Size: 48pt
Arial font with a size of
with the letters of
48pt andRed
Colour: red colour.
SProjects.

This is going to be a
paragraph that
This is going to be contains
a text where I am information about
going to mention me and my
my hobbies and experiences. The
the things that I font will be Arial
like to do at my and will have a size
free time, this text of 14px, the font
is going to be white colour will be
with Arial font and white.
a size of 14pt.

The background This is a

colour will be a The navigation bar will be professional picture
Dark blue having red buttons with of myself showing
hyperlinks to different my face so the
websites, the font of the audience get an
hyperlinks will be white with a idea of what is my
font size of 16pt and an Arial aspect.
style.

5
 Juan Sebastian Carreno Henao

Contact Me: This is going to be the

header/tittle of the
This is where and how
website, it will be an
the logo is going to be,
Arial font with a size of
it will be red and white
48pt and red colour.
with the letters of
SProjects.

This is a list of
different
This is a paragraph to
methods to
explain why I am
contact me,
giving my contact
each method
details and why it is
will have a
important for me that
hyperlink that
the audience has the
will display the
right details to
information
contact me
with an Arial
successfully. The font
14pt green
is an Arial style with a
font.
size of 14pt and white
colour.
The navigation bar will be
having red buttons with This is going to be a
The background
hyperlinks to different list of the contact
colour will be a
websites, the font of the details available on
Dark blue
hyperlinks will be white with a the website, such as
font size of 16pt and an Arial email, contact
style. number, etc. The font
is going to be blue and
the size 14pt with an
Arial style.

6
 Juan Sebastian Carreno Henao

Qualifications: The background This is going to be the

This is where and how colour will be a header/tittle of the
the logo is going to be, Dark blue website, it will be an
it will be red and white Arial font with a size of
with the letters of 48pt and red colour.
SProjects.

The navigation bar will be

having red buttons with
These are going to be Images
hyperlinks to different
to show each different
websites, the font of the
certificate and its year, for
hyperlinks will be white with a
example BTEC IT Level 2
font size of 16pt and an Arial
Certificate.
style.

7
 Juan Sebastian Carreno Henao

Social Media:
This is going to be the
This is where and how The background header/tittle of the
the logo is going to be, colour will be a website, it will be an
it will be red and white Dark blue Arial font with a size of
with the letters of 48pt and red colour.
SProjects.

he navigation bar will be Icons with hyperlinks that

having red buttons with redirects to each social
hyperlinks to different network web site by clicking
websites, the font of the on them. For example, clicking
hyperlinks will be white with a on the Twitter icon will open
font size of 16pt and an Arial my Twitter profile.
style.

8
 Juan Sebastian Carreno Henao

Skills: The background This is going to be the

This is where and how colour will be a header/tittle of the
the logo is going to be, Dark blue website, it will be an
it will be red and white Arial font with a size of
with the letters of 48pt and red colour.
SProjects.

he navigation bar will be

having red buttons with
hyperlinks to different Reviews of people that have
websites, the font of the use projects that I have done
hyperlinks will be white with a Text with real references of before, such as web pages or
font size of 16pt and an Arial previous managers of programs.
style. companies that I have worked
for.

9
 Juan Sebastian Carreno Henao

Ready-made assets that I have used.

Description File name Source File Path

Image with a Porflolio.gif http://www.edudemic.com/wp- Home

text of E- content/uploads/2013/09/eportfolio.gif
portfoflio I have chosen this image from internet as I thought It was
suitable for my digital portfolio.
Logo of the Logo.png http://amymclaypaterson.com/portfolio/header.png All the pages
webpage, red I search on google a logo that fits to my website, this is the image of the
and white that I will use for my portfolio. website.
with the text
of digital
portfolio
Image of Assignment01.png goo.gl/geJX9f Projects:
previous I have chosen a picture of an assignment from the internet as I image 1.
assignment dont have any picture of my ones.
for Unit 12
Software
Development.
Image of Assignment02.jpg http://pad1.whstatic.com/images/thumb/5/59/Install-a-CPU- Projects:
previous Chip-Step-1.jpg/aid285567-728px-Install-a-CPU-Chip-Step-1.jpg image 2.
assignment I have chosen a picture of an assignment from the internet as I
for Unit 14 dont have any screenshot of my one.
Install and
Maintain
hardware.
Image of Assignment03.png http://static.ccm2.net/ccm.net/faq/images/21247- Projects:
previous rDizffzkZUWh1Rgv-s-.png image 3.
assignment This is an image taken from the internet as I dont have any
for Unit 15 screenshot.
Install and
Maintain
software.
Example of Upgradewindows.jpg goo.gl/vAWRUR Experience
the work This is an image that shows an upgrade of an operating system, I
done have chosen it from internet.
previously:
upgrading an
operating
system.
Professional Me.png https://goo.gl/zMIS5W About me
picture of
myself This picture is an example of what will be my picture on the
showing my website. This image is taken from google images.
face.
Image of GCSEEng.png https://goo.gl/IcKzbK Qualifications:
GCSE This is an example image taken from the internet of a GCSE Image 1
qualification. qualification.

10
 Juan Sebastian Carreno Henao

Image of Level2.jpg http://rmbarron.com/downloads/quals/ONC.jpg Qualifications:

BTEC Level 2 This is a picture of a certificate from BTEC level 2 qualification Image 2
qualification. taken from google images.
Image of Level3.png https://goo.gl/w1kCzu Qualifications:
BTEC Level 3 This is a picture showing a certificate from BTEC Level 3 Image 3
qualification. qualification taken from google images.
Logo of Tiwtterlog.png https://abs.twimg.com/icons/apple-touch-icon-192x192.png Social Media
Twitter This is a logo taken from google images. This is the Twitter logo.
Logo of Facelogo.png https://www.facebook.com/images/fb_icon_325x325.png Social Media
Facebook This is a Facebook logo taken from the internet.
Logo of Snaplogo.jpg https://goo.gl/XFCaHB Social Media
Snapchat This is a Snapchat logo taken from google images.

The images and source links that I have use to fill this template are just an example of what I am
going to include on my portfolio. On the future, I want to upload my own pictures taken from a
digital camera that I am using at the college and I will edit and produce them on Photoshop. The
pictures that I will produce will be professional, with a good quality and will fit the purpose of
the images on the website as they are a very important part of my digital portfolio.

11
 Juan Sebastian Carreno Henao

Structure chart indicating navigation routes.

All the pages are connected to each other by the navigation bar. The navigation bar has the
main pages of the website, such as the Home, Projects, Skills, etc. By this method, the
audience will be always able to return to the home page. This design also has a logo integrated
on every page of the website, if the user clicks on that logo, it will redirect to the home page so
there is no waste of time trying to go back until home page.

This structure chart is the same for the alternative option as it has the same information but
showed in a different way with different design and colours. This means that this structure
chart indicates the navigation routes for the two designs of the digital portfolio.

Paragraphs
that shows real This will
feedbacks and contain images
reviews of that shows the
previous jobs audience my
and projects certificates.

Images and
text
describing
myself to
give the
audience an
idea of me
This page will
contain a list that
will have different
List with different
Jobs that I have
methods to
done, clicking on
contact me that
each job will
opens paragraphs
display an image
with explanations
and a paragraph to
about how to do
describe what I
it.
had to do about it.

Images of
assignments Images with
and projects hyperlinks that
that I have redirects the
done for audience to my
different different social
units. network profiles

12
Juan Sebastian Carreno Henao

Timeline of the project

This is a screenshot of the timeline that I have produced for the assignment. The purpose of it
for my project is to demonstrate and show how much time did I expend to complete each task
and the entire assignment. Another purpose of the timeline is to have a good manage of the
time because I always will know what I have to complete and at what time. The screenshot of
the timeline below is going to demonstrate my knowledge using different software applications
to complete all of the assignment, in this case, I have use Microsoft Project Plan, which is an
application that allows me to create an organised time line, with the name of each task, the start
and the end time and the amount of days that It took for me to complete it.

13
 Juan Sebastian Carreno Henao

Alternative solutions for the design of the webpage.

Home:

The logo will be

This is the
an image with two
header or title of
letters SP, it will
the webpage, it
have a White
is going to be
background and
White Arial Font
the Font will be
sized 30pt.
black.

This is the
navigation bar This is going to
which will have all be a paragraph
the main pages of describing the
the website, it will The background is
purpose of the
always appear at going to be black
website. It will
the left-hand side on all the pages of
be white Arial
of the page, it is the website.
font sized 12pt.
going to be White
Arial font sized
14pt.

14
 Juan Sebastian Carreno Henao

Projects:

The background is The logo will be

This is the going to be black an image with two
header or title of on all the pages of letters SP, it will
the webpage, it the website. have a White
is going to be background and
White Arial Font the Font will be
sized 30pt. black.

This is going to be
This is the a list of three
navigation bar
different
which will have all This is going to be a This image is a assignments that I
the main pages of mini navigation bar have done, the
demonstration
the website, it will that will have all the audience will be
of the
always appear at units that I have able to click on
assignments
the left-hand side done, every time that I have done, each of them and
of the page, it is that the user clicks it will change the
there will be one
going to be White on the unit, it will picture for each example image.
Arial font sized change the examples assignment.
14pt. and assignments
that I have done for
that specific
assignment.
15
 Juan Sebastian Carreno Henao

Qualifications:

The logo will be

The background is This is the header
an image with two
going to be black or title of the
letters SP, it will
on all the pages of webpage, it is
have a White
the website. going to be White
background and
Arial Font sized
the Font will be
30pt.
black.

This is the
navigation bar
which will have all
the main pages of
This is going to
the website, it will This is going to be
be two buttons
always appear at an image of the
that will have
the left-hand side certificate that I
the function to
of the page, it is have achieved, this
swap between
going to be White is to let the
the images of
Arial font sized audience know
the certificates.
14pt. what are my
grades. There is
going to be three
different images of
the certificates.
16
 Juan Sebastian Carreno Henao
The logo will be
Skills: This is the header an image with two
or title of the letters SP, it will
webpage, it is have a White
going to be White background and
Arial Font sized the Font will be
30pt. black.

This is the The background is

navigation bar going to be black
which will have all This will be a text
on all the pages of
the main pages of that is going to
the website.
the website, it will contain quotes and
always appear at feedbacks from
the left-hand side previous Jobs, so
of the page, it is the audience will
going to be White have an idea of
Arial font sized what are my skills.
14pt.

17
 Juan Sebastian Carreno Henao

Experience:

The logo will be

This is the header an image with two
or title of the The background is letters SP, it will
webpage, it is going to be black have a White
going to be White on all the pages of background and
Arial Font sized the website. the Font will be
30pt. black.

This is the
navigation bar
which will have all
the main pages of This will be a list that Image of This text will contain
the website, it will contains different jobs demonstration/exam a description and
always appear at that I have done, the ple about the explanation about
the left-hand side user will be able to particular job that I what was the job
of the page, it is click on each of them had to deal with, for that I had to do, this
going to be White and it will display the example hardware job explanation will
Arial font sized example image and installation. This change depending on
14pt. the description of image will change the selection of the
what I had to do for it. depending on the job list.
selected on the list.

18
 Juan Sebastian Carreno Henao

About me:

This is the header The logo will be

or title of the The background is an image with two
webpage, it is going to be black letters SP, it will
going to be White on all the pages of have a White
Arial Font sized the website. background and
30pt. the Font will be
black.

This is the This text will give Picture of

navigation bar the user an idea myself so the
which will have all about what are audience
the main pages of my information knows how
the website, it will and hobbies, for do I look like.
always appear at example, how
the left-hand side old am I and
of the page, it is what is my
going to be White favourite
Arial font sized activitie.
14pt.

19
 Juan Sebastian Carreno Henao

Contact me:

This is the
navigation bar
which will have all
the main pages of
the website, it will
always appear at This is the header
The logo will be
the left-hand side or title of the
The background is an image with two
of the page, it is webpage, it is
going to be black letters SP, it will
going to be White going to be White
on all the pages of have a White
Arial font sized Arial Font sized
the website. background and
14pt. 30pt.
the Font will be
black.

This is a comment box

that will allow the These are going to be
audience to leave more options that the
comments about the employers of the
webpage, it is also going companies will use to
to be a method to contact contact me. (Email and
me. telephone number).
20
 Juan Sebastian Carreno Henao

Social Media:

This is the
navigation bar
which will have all
the main pages of
the website, it will
always appear at This is the header The logo will be
The background is
the left-hand side or title of the an image with two
going to be black
of the page, it is webpage, it is letters SP, it will
on all the pages of
going to be White going to be White have a White
the website.
Arial font sized Arial Font sized background and
14pt. 30pt. the Font will be
black.

This will be an icon that This will be a control bar

contains a hyperlink, that allows the user to
every time that the user swap the icons of the
clicks on, it will redirect social networks, there
to the correspondent are 3 different icons that
social network. redirect to different
pages.

21
 Juan Sebastian Carreno Henao

Ready-made assets that I have used for the alternative design.

Description File name Source File Path

This is an Pro.png https://goo.gl/Nx5Fx1 Projects

image of a I search on Google for projects as I dont have pictures of my
project that I own ones.
will
implement on
my website.
Logo of the Logo2.png https://goo.gl/EC1kY8 All the pages of the website
webpage, I search on Google for portfolio images and I have chosen this
white and one as it fits the colours of my second design.
black with the
text of digital
portfolio
project
Image of one Certificate01.png https://goo.gl/xvhhva Qualifications: image 1.
certificate I search on Google images of GCSE certificates as I dont
have pictures of my own ones.
showing what
I have
achieved
before.
Image of one Certificate02.jpg https://goo.gl/MTZLsg Qualifications: image 2.
certificate I search on Google images of BTEC Level 2 certificates as I
showing what dont have pictures of my own ones.
I have
achieved
before.
Image of one Certificate03.png https://goo.gl/DEh8oy Qualifications: image 3.
certificate I search on Google images of BTEC Level 3 certificates as I
showing what dont have pictures of my own ones.
I have
achieved
before.
Example of Job1.jpg goo.gl/vAWRUR Experience
the work I search this image on Google as I havent got any picture of
done myself doing this job.
previously:
upgrading an
operating
system.
Image of Job2.png https://goo.gl/jbg9bm Experience
example of I search this image on Google as I havent got any picture of
work that I myself doing this job.
have done
previously:
maintaining
computers
hardware

22
 Juan Sebastian Carreno Henao

Image with instagram.png https://goo.gl/aN3PBq Social Media: Image 1

the icon of a I took the Instagram logo from the internet.
social media
network.
Image with Facebook.jpg https://goo.gl/E2lCfu Social Media: Image 2
the icon of a I took the Facebook logo from the internet.
social media
network
Image with Twitter.png https://goo.gl/w1kCzu Social Media: Image 3
the icon of I took the Twitter logo from the internet.
social media
network

23
Juan Sebastian Carreno Henao

Explanation of why I have discarded the alternative design for the

website and justify the final design decisions, explaining how it will
fulfil the purpose and needs of the audience.

I have chosen the first design because it is more simple and easier to understand, the
navigation bar is well situated and it has all the main pages of the website, this means
that the audience will be able to navigate for each of the pages easily and without any
problem. Another reason because I have chosen the first design is because is more
colourful, it has more than just two colours as its showed on the second design. Other
reason is because the second design has more complex structure as it has many
control bars and hyperlinks, having more probability to have bugs and errors, however
the chosen design is well organised and simple, making it more interesting for all the
people who may visit the webpage.
The second webpage is not very suitable for other devices such as mobile phones or
tablets, as it contains all the information in a horizontal way, making it harder for the
people who dont use computers. The final design is developed in a vertical way, so
this will help to fit the different screens of the devices that can enter to the webpage.
The discarded design has a dark background with white font, this can be a problem for
people that has any visual disease. This would not happen with the chosen design as it
is colourful and manages a clear and big font which prevents this kind of problems.
The final design will meet the stated purpose because is using each consistent unit
page layout in Menu tab, about me tab and the navigation bar to see what is available
on my portfolio. In the about me page includes an image of me that will give an idea to
the audience about how do I look like, also it will include my hobbies and some
information about my life, things that are interesting for the employers as they will be
getting an idea of what my behaviour is and what are my daily interests. The
navigation bar meets the purpose of the audience to have an easy webpage that
allows them to come back to the home page and not only to the index but also to the
other pages, making it possible to change from About Me to Projects in just one click.
This design contains pictures and descriptions to show a range of my work and let
them know what I am capable of. The images will contain examples of my previous
projects such as maintenance of software and hardware, graphics edition with tools
like photoshop and website developments using HTML and CSS.
My design fits the audiences needs as it has a very good navigation bar that is easy to
use and very useful to navigate across the website without any problem. My portfolio
contains organised lists so it is more visible rather than using only paragraphs like
other webpages. In my design, I use short paragraphs so the audience doesnt lose
interest of reading them and will keeps the readers motivated to read through them,
this with the help of the pictures that are provided across the page to show different
topics and examples. If the audience doesnt want to read the paragraphs, just the
images will give them an idea about what the text is saying.

24
Juan Sebastian Carreno Henao

The entire portfolio gives a complete idea to the employers of TechCity and other
companies of what I am capable of. It is simple to navigate through and is colourful so
it gets the attention of the reader.

25