week 5
Page Formating
Page formatting is key when planning the creation of any web pages and portfolio's. At this point you will be requierd to make considerations and set out the style and feel of the site these must be consisten and provide continuity. Areas that should be considered are;
- Colour Schemes
When creating any designs and webpages carefull consideration to colour harmony should be thought about. Users may not stay on the site if the colour scheme is distracting and make it hard to read the content such asThis example
Other issues are people that may suffer from colour blindness may not see below,This example
Options that people can read are as below, however what sort of image and feel does it give?This example
- Fonts and Font Sizes
Fonts and the correct selection of them can sell your site have an image that could boost your profile or make the portfolio look childish and non professional.- Some fonts can be hard to read such as
This is some text in verdana
This is some text in helvetica
This is some text in time new roman
- Some fonts can be hard to read such as
ACTIVITY
Draw a neat, hand-drawn draft of your section pages to show the layout of your portfolio. Draw a draft of a diagram showing how your home page will be linked to the section pages. Add the linkages to the context pages to your diagram and note how you will link between context pages. Note what type of link (e .g. buttons, menus, etc.) you are going to use and what your navigation bar will look like. Keep this diagram to help you with your design work.
Navigation
The importance of having good navigation is key to enable users to navigate around any web portfolio easily. If the portfolio constructed in sections, the home page must include a button/link (hyperlink) to each section. Navigation links and buttons should work whether the user is using them to navigate moving forwards or backwards through sections. Some Hyperlinks are positioned within a navigation bar to enable the users to move between pages and content. The position of the navigation bar should be considered. Users need to find and access it easily your however the design and location shouldn't take over the page's design. Hyperlinks often appear as text. Users will click on these to move to another page or content on a page. Navigation consistency is important, the scheme and position you decide should be used throughout the portfolio.
Page Formating
Page formatting is key when planning the creation of any web pages and portfolio's. At this point you will be requierd to make considerations and set out the style and feel of the site these must be consisten and provide continuity. Areas that should be considered are;
- Colour Schemes
When creating any designs and webpages carefull consideration to colour harmony should be thought about. Users may not stay on the site if the colour scheme is distracting and make it hard to read the content such asThis example
Other issues are people that may suffer from colour blindness may not see below,This example
Options that people can read are as below, however what sort of image and feel does it give?This example
- Fonts and Font Sizes
Fonts and the correct selection of them can sell your site have an image that could boost your profile or make the portfolio look childish and non professional.- Some fonts can be hard to read such as
This is some text in verdana
This is some text in helvetica
This is some text in time new roman
- Some fonts can be hard to read such as
ACTIVITY
Draw a neat, hand-drawn draft of your section pages to show the layout of your portfolio. Draw a draft of a diagram showing how your home page will be linked to the section pages. Add the linkages to the context pages to your diagram and note how you will link between context pages. Note what type of link (e .g. buttons, menus, etc.) you are going to use and what your navigation bar will look like. Keep this diagram to help you with your design work.
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Digital Portfolio - James Farrington IS GREAT</title>
<style>
#logo
{
height:200px;
background-color:red;
}
#banner
{
height:200px;
background-color:green;
}
#nav
{
height:200px;
background-color:blue;
}
#content
{
height:600px;
background-color:yellow;
}
#footer
{
height:200px;
background-color:green;
}
#wrapper
{
width:960px;
margin-left:auto;
margin-right:auto;
}
.navbutton
{
color:white;
display:inline-block;
background-color:green;
width:100px;
height:50px;
boarder-radius:10px; /* this is my comment */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="banner"></div>
<div id="nav">
<p>this is the nav</p><!--This is a comment -->
<ul>
<li class="navbutton">One</li>
<li class="navbutton">Two</li>
<li class="navbutton">Four</li>
<li class="navbutton">Eight</li>
</ul>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Last Updated
2019-11-05 10:57:03
Links to Learning Outcomes |
Links to Assessment criteria |
|
|---|---|---|
|
LO A Design a digital portfolio UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio. UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio. UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including:
UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:
UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including:
UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:
|
LO A Design a digital portfolio UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio. UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio. UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including:
UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:
UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including:
UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:
|
English
0
Maths
How 2's Coverage
0
0
Files that support this week
Week 4←
PrevWeek 5←
PrevWeek 6←
Prev→
Next→
Next
