MA05Report
Katja Sofie Drage
http://katjadrage.com/Ma05part2/
MA05Rapport
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
1. INTRODUCTION
Part 2: Web Development: Back-end design.
1.1. the actual task
Now it’s time to develop the web site, by building it
with HTML and styling it with CSS.
The site will consist of the following elements:
A local bakery has hired you, as they are launching
their latest bakery product. They are in need of a
stand-alone campaign website. (not part of their brand
website)
You are in charge of their conceptual development,
and web marketing for this product.
Part 1: Conceptual development, marketing and frontend web design
Before you begin, define the target audience. Be aware
of your product, the idea, and how to market it before
you begin the front-end design.
To represent the product you are also given the task
of photographing product images to be used for the
front-end design. These images are a small part of the
evaluation; focus mainly on the front-end design.
Remember that in the front-end design, the site
doesn’t have to work. Bear in mind technical issues of
Part 2, but focus on the appearance.
• Index home page (index.html)
• About page, containing information about the
product (about.html)
• Contact page, providing contact information
(contact.html)
• External style sheet (style.css)
These are the minimum requirements. You may have
more pages and elements if you wish.
When you are done building your site, upload it to your
webhosting area.
1.2. Interpretation of task
In this assignment we will show our skills within
composition and color and typography use for sceen
based media.
We will code the webpage ourselves, so we will
have to learn and test our skills in basic scripting and
coding.
Katja Sofie Drage
4. CHANGES
3.1.3.2.3.3.3.4.
We will create a website that looks good, that is easy
to navigate and that communicates the message.
It is important to focus on the hierarchy, and the
visibility of the most important elements.
We must also make sure that all the text is visible on
screen.
We’ve got great artistic freedom, and can choose
(invent) both the bakery and the product. There is
a wealth of opportunities, so we have to do a lot of
research and planning in advance.
This has been a very exciting and challenging task, as
it affects many of the topics we went through in the 1st
semester (logo, layout, composition and photography).
It also test our skills within the new topic this year:
coding the website.
It has been challenging to work with html and css.
The progress seemed slow at first, and the goal
seemed unreachable. But after some consistant and
patient work, everything started to fall into place and
I managed to develop the website. It may not be a
100% perfect yet, but I am pleased with the work I have
accomplished so far in such a difficult topic.
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
1.3. Strategic design
I want my site to communicate that this is bakery
products. Once you have clicked in here, there should
be no doubt about what this is.
The target udience I have selected is busy parents:
Much chaos at home means that they usually want a
neat and tidy side. It should not be too much colors,
shapes, etc.
The website should be simple and clean, and easy
to understand - the target audience does not have
time to click around to look - they want information
immediately.
The product and the campaign I have chosen also
reflects audience. Bread is eaten a lot here in Norway,
both breakfast and supper often consists of bread
slices.
The product I have chosen is a new type of bread,
which is both good and healthy.
The busy parents may be interested in a “good deal”,
therefore I have chosen to have a “2 for 1” campaign.
Katja Sofie Drage
MA05Rapport
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
To accentuate the taste of the bread I have chosen to
use good pictures of big, juicy bread, that I have taken
myself.
2. REAEARCH AND WORK PROCESS
I would also use color, typography and logo to my
advantage, so too these help communicate my
message.
I have used the sketch method as my creative method
in this task. I have primarily made mass sketches in
Indesign, to understand where I wanted to go in this
task.
2.1. Creative method
I’ve also taken pictures of bread early in the process
to set the mood. In this assignment I have chosen not
to draw sketches by hand, because it is easier to se /
change the design on computer. I also think that this
is more efficient way to work, and it gives me more
practice in the Adobe software.
4. CHANGES
3.1.3.2.3.3.3.4.
For part 2 of the task, I have done a lot of research, and
wathed a lot of videos on .html and css. I have tried
and failed a lot in the coding process, as I found this
pretty hard.
To solve my problems I have used the forum and
google a lot. I have found a lot of answerd here, but I
also noticed that it is hard to find answers on this topic
on Google.
The forum has been very helpful, but a bit
inconvenient on this topic, as I needed the answers
fast, Since I work with the assignments at night, I have
to wait to get home to make the suggested changes
and see if the tips I get work, When it did not work,
there would go 24 hours before I could try a new
approach. This resulted in a lot of inefficient work (my
fault of course),
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
2.2. Inspiration method
To find inspiration I’ve spent much time on my own
images, used magazines and found bakery sites
online.
I have also taken the trip to a couple of bakeries
nearby, to see if I could get inspired there.
I have been inspired by the simple and subdued colors
in brown tones.
I’ve also had some contact with classmates, where
we discussed the design and shared images and
thoughts.
On some of my problems I failed to find an answer,
so the website is not 100% perfect, but It is falling
into place and I hope to get everything right for the
portfolio deadline.
I am not sure what else I can write about this part, as I
spent it coding the website and looking for anwers.
Katja Sofie Drage
Katja Sofie Drage
MA05Rapport
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
2.3. Analysis
I have not found so many examples of existing
solutions in exactly this type of page.
I have however seen a number of existing bakery sites.
These are often very busy pages, with lots of color and
images.
In my opinion, many of the pages are a bit messy, at
least in terms of my target audience. This made me
think of what i did not want to have on my webpage, so
this was educational as well.
4. CHANGES
3.1.3.2.3.3.3.4.
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
2.5. Sketches
I have, as I said chosen to outline in Indesign this time.
I’ve made many, very different sketches, and then
used the elimination method to find the right design.
Eventually I changed this design according to target
auience, hierarchy and composition.
Here are some sketches:
I have expanded my research further - to international
sited, where I have found better examples of websites.
Here I have seen a good deal bakery pages that are
both neat, innovative, transparent and creative.
2.4. Moodboards
I have, as I said let myself be inspired also of my own
pictures this time. By zooming I also found some
things I could use e.g. for the background.
Katja Sofie Drage
Katja Sofie Drage
MA05Rapport
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
Katja Sofie Drage
3.1.3.2.3.3.3.4.
4. CHANGES
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
Katja Sofie Drage
MA05Rapport
3. DESIGN
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
The rest of the images are quite large, and draw a lot
of attention - this contributes to communicating the
message.
3.1. Style and composition
I think the website is modern, clean, has good
overview. The clean design looks professional.
I’ve made boxes and used placement, colors and
typography to create a good hierarchy. I have chosen
horizontal format, as I saw this fitted best on computer
display.
Logo of the bread is placed the first place you
look - on the top left. Further we see the navigation
bar, which is highlighted with a box. Furthermore,
information on the page, social media buttons,
copyright and finally bakery logo. The bakery logo
makes a nice ending to it all, and conducts the design.
This is designed as a ribbon at an angle, to draw
associations with the home made, but not violating
with the integrity/overall style of the design.
Images are a large part of the design. The background
is made of a close-up of the inside of a bread. This
gives a whole and sets the mood for the page. The
texture of the image lifts the design and makes it less
flat.
The boxes in the navigation bar and footer are made to
separate these elements from the rest.
Social media buttons are made of icons, which ijen
is cut out of the circles. The fact that the icons are
gjennomsitige and stands in the style of the rest gives
a sense of wholeness.
3.2. Logos
These are in accordance with each other, while they
still differ . Since logo design is not mentioned in the
assignment text, I considered this as not a big part
of the assessment. Nevertheless, I decided to spend
some time on this, so they look professional. I chose to
go for a simple design.
I have chosen to focus on typography. On the bakery
logo I have created a dark frame and cut the letters
out of it, so these were transparent. This gives a
professional look, and contributes to the website style.
More about typography in Chapter 3.3. Typography.
Katja Sofie Drage
4. CHANGES
3.1.3.2.3.3.3.4.
3.3. Typography
I have only used sans serif fonts in this task, as these
look best on screen.
Bread Logo
The name in the logo is directly connected with the
product name. This one is made with two different
fonts:
Abadi MT Condensed Extra Bold
Abadi MT Condensed Light
These are in style with each other, while they split the
words. The words here are not splitted with space,
which gives a nice effect. The first letter is small, which
allows for more focus on the second word.
Bakery Logo
This logo is made with font:
Aaargh Normal
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
Titles
For the titles, I have used:
Arial Black
This font stands out in the design, and it resembles
something written on a typewriter. I think this fits nicely
into the design, and the other fonts.
I have varied size, after where the text is located:
over pictures I have chosen an extra large, a large
navigation bar, and medium / small for titles in the
body.
Body
I have used
Verdana
This font is easy to read and looks good in a matter
of courtesy to style statement on the page. The text
range in size (smaller in “Ingredients” and the footer).
This font I have expanded in Illustrator, where I have
also increased the thickness for readability. I have also
changed the spacing so that the words hang together.
I have made adjustments on the “J” in “Katja’s” so that
it would go together with “K” in “bakery”. The fact that
both words are interrelated makes logo carried out.
Variation in thickness, size and colors adds to the
hierarchy, and contributes to “life” in the layout.
The fonts that are used in the title and body text are
websafe.
Katja Sofie Drage
MA05Rapport
3.4. Colors
I have created a color palette based on one of the
pictures (index page). Here are the colors used:
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
I have varied color saturation so that the background
image did not disappear completely, and to soften the
expression.
C:25 M:40 Y:65 K:0
Saturation: 40%
4. CHANGES
3.1.3.2.3.3.3.4.
4. Changes
I have changed the language to English, since we were
told about this in the forum.
I also removed the “phone” form element on the
contact page.
I have also gone for a slightly different fonts: I have
chosen Arial Black instead of Play for the titles, as this
goes a bit better with the other fonts/layout (reference
made to comment from teacher). The other font is
changed to Verdana, instead of Raleway as this font is
websafe, but still in the same style.
C:50 M:0 Y:80 K:70
Saturation: 50%
C:50 M:70 Y:80 K:70
Saturation: 100%
C:25 M:40 Y:65 K:0
Saturation: 100%
Here are the old fonts:
C:0 M:0 Y:0 K:0
Saturation: 75%
Raleway
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
The properties/positioning has also changed a bit
when I coded the website, This mostly is in relation to
middle/center alignment of the content, to assure that
the website looks good on most screens.
While I still work on my website (http://katjadrage.
com/Ma05part2/) for the portfolio, I have made a
“back-up” site. The backupsite is made so you can see
how far I have comed - I am still experimenting a lot
with the original site, so it may not always be up and
running.
Back up site:
http://katjadrage.com/dansksuperbr%C3%B8d/
Play
By using colors from the pictures, I ensure that
everything goes together, while there are natural
brown colors that fit well into a bakery side.
Katja Sofie Drage
Katja Sofie Drage
MA05Rapport
5. SOURCES AND REFERENCES
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
http://www.hongkiat.com/blog/5-tips-to-simplifyyour-web-design/
5.1. Part 1
http://webdesign.about.com/od/webdesignbasics/
tp/aa112497.htm
Moodle lessons for weeks 17-20 and 23.
http://en.wikipedia.org/wiki/Sans-serif
http://www.forbes.com/sites/
cherylsnappconner/2014/03/27/25-web-design-tipsto-honor-25-years-of-the-web/
Smashing Book 1 article: Usability Principles for
Modern Websites
Lynda.com:
Smashing Book 1 article: Typography: Rules,
Guidelines and Common Mistakes
Web Design Fundamentals by James Williamson
http://graphicdesign.stackexchange.com/
questions/4215/is-there-a-way-to-tell-indesign-notto-break-words-in-a-paragraph-hyphenation
Web Site Strategy and Planning with Jen Kramer
http://www.klikk.no/helse/kosthold/article554536.
ece
Moodle lessons for weeks 17-20 and 23-29.
http://www.smashingmagazine.com/2010/05/13/
principles-of-minimalist-web-design-with-examples/
http://www.sitepoint.com/elements-of-design-theline/
5.2. Part 2
http://computer.howstuffworks.com/internet/basics/
internet-infrastructure4.htm
http://www.w3.org/standards/webdesign/htmlcss.
html
http://learnwebcode.com/how-to-create-your-firstcss-file/
Katja Sofie Drage
4. CHANGES
3.1.3.2.3.3.3.4.
http://www.w3schools.com - Here I have gone though
the whole website for tips
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
http://www.wikihow.com/Insert-Spaces-in-HTML
http://learn.shayhowe.com/html-css/positioningcontent/
http://www.htmlgoodies.com/tutorials/web_
graphics/article.php/3480021
http://community.sitepoint.com/t/how-to-verticalspacing-between-two-divs/8405
http://www.htmlgoodies.com/html5/css/fontmanagement-in-css3.html#fbid=rJagJB3jTfY
https://forums.adobe.com/thread/600814
https://helpx.adobe.com/dreamweaver/how-to/firstwebsite-part2.html
https://forums.adobe.com/thread/1064954
Lynda.com:
https://css-tricks.com/design-considerations-textimages/
Dreamweaver CS6 Essential Training by Kevin
Williamson
http://stackoverflow.com - I have used this site to
search for information
Creating a First Web Site with Dreamweaver CS6 by
Paul Trani
https://docs.webplatform.org/wiki/tutorials/CSS_
absolute_and_fixed_positioning
HTML Essential Training by James Williamson
CSS Fundamentals by James Williamson
http://matthewjamestaylor.com/blog/keepingfooters-at-the-bottom-of-the-page
Responsive Design Fundamentals by James
Williamson
http://www.vanseodesign.com/css/verticalcentering/
Katja Sofie Drage
MA05Rapport
6.1. Briefing form
2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
5. What style is desired on the website?
1. What does the company do?
I want to make a neat, simple and modern expression
on the page. According to the target audience I will not
make this website seem stressful, but the contrary.
The company is a bakery, who want a stand-alone
campaign page for new product.
6. What is good / bad with the existing solutions, if
there are any?
The new product is a new type of bread “Dansk
superbrød”
2. Who are your competitors and how you stand out
among them?
Competitors are other bakeries. What separates me
from these there are clean and quiet design.
3. What features should be used on your website?
The site shall contain a contact form (e-mail) and a link
to the main page of the bakery.
4. Who do you expect to visit your site?
1. INTRODUCTION There are no existing solutions for this, but I believe I
have seen many messy bakery pages. Here, several
things at once - something I want to avoid.
7. Which text shall website contain?
4. CHANGES
3.1.3.2.3.3.3.4.
9. What is the hierarchy on the website, what is most
important to convey?
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
6.2. Folder Structure
See Appendix 5.2. folder structure
Main Folder
10. What is the deadline for completion of the site?
How big is your budget?
The deadline for completion of the project is the same
as the mandatory assignment. The final deadline is
April 24.
Images
Image 1
Image 2
The budget is very low, Because it is a school
assignment.
Image 3
The text is made up.
index.html
8. What images should the website contain?
kampanjen.html
I have taken pictures of the bread I want to promote,
so these images will be included in the website.
om.html
kontakt.html
See section 1.3. Strategic design.
Katja Sofie Drage
Katja Sofie Drage
MA05Rapport
1. INTRODUCTION 2. RESEARCH AND WORK PROCESS 3. DESIGN
1.1.1.2.1.3.
2.1.2.2.2.3.2.4 2.5
4. CHANGES
3.1.3.2.3.3.3.4.
5. SOURCES
6. ATTACHMENTS
5.1.5.2.
6.1.6.2. 6.3.
6.3. Wireframes
LOGO
LOGO
NAVIGATION MENU
BAKERY
LOGO
FOOTER
Page 1 and 2
FOOTER
Page 3
Katja Sofie Drage
LOGO
NAVIGATION MENU
BAKERY
LOGO
NAVIGATION MENU
FOOTER
Page 4
Katja Sofie Drage
BAKERY
LOGO