achso! - Patricia Atienza

PATRICIA ATIENZA
Graphic Designer & Illustrator
Surrey, BC CANADA
patriciaatienza.com
Contact me at:
E: [email protected]
P: 778.223.6374
GRAPHIC & WEB DESIGN PROJECT
ACHSO!
English to German Learning Collective
Achso! is a German language learning site
designed for English speakers through tips
and reviews.
Brand Identity
User Interface Design
Educational Materials
THE BRAND
01
USER
INTERFACE
DESIGN
02
TEXTBOOK
MATERIALS
Study Book
Work Book
03
POSTERS &
FLASHCARDS
Grammar Rules Posters
Vocabulary Flashcards
04
BACKGROUND
I lived in Germany for a little over a year and while I was there I learned
German. As an English speaker I found challenges that my classmates
from other language backgrounds didn’t have and vice versa. Therefore, I
thought I’d design a website that focuses learning German from an English
speakers point of view.
INFORMATION ARCHITECTURE
For this project I envisioned the organization of a complete site - the different sections and features. However, in this project, I wanted to highlight my
copy writing (for the web) skills, so I decided to showcase three sections of
the site: the home page, the about page and the tips page.
NARRATIVE
ACHSO! - Homepage
LEARN
ABOUT
SHOP
CONNECT
** Educational material will be
organized further into levels: A1,
A2, B1, B2, C1, C2, and General
Knowledge.
Our Story
The Team
Contact
Blog
Forum
Sign-up/Login
Other specific subjects include:
Grammar Rules, Sentence
structure, Vocabulary, Verb
Conjugation, Verbs & Prapositions, Tenses (Past, Present,
Future). etc.
Study Books
Work Books
Flashcards
Learning/Teaching Materials
Study Tips
PHASES/SECTIONS:
(1) Hit the
Ground
Running
Posters
Worksheets
Exercises
Places to Visit
Logistic Tips
Process to Learn Deutsch
Quickly, Perfectly & Effectively
(2) Connect
the Dots
(3) Practical
Use
Essential
Documntation
Overview
German
Language
Test
Study/Work Visa
Qualifications
Dcumentation
German
Schools
Housing
Financing
Scholarships
Bursaries
Au-Pair Programs
Mini-Job Postings
SECTIONS THAT I WILL BE COVERING IN THIS PROJECT ARE IN THE YELLOW RECTANGLES
COPY WRITING
05
The copy is based off of my experiences while learning Deutsch. They are a
collection of tips and advice I wish I had then. My hope is that it will be able
to help anyone in the same situation and others can build upon them, too.
BRAND IDENITIY & TARGET AUDIENCE
My primary audience are English speakers learning German while in German or in English-speaking countries. So they would be university students
(ages 18-30). Competitive sites have a child-like, also simplistic learning atmosphere. Intended users will be young professionals, so I want the design
to be more sophisticated and straight-forward.
Font Style
The font style is simplistic and versatile. I want to keep it clean, basic
and legible. The content varies in
length, so I want the typeface to be
easy to read.
Header
Rockwell Std
Regular (30pt)
Subheader / LINKS
Typeface
The typeface I chose is a serif/slab
serif because I wanted to go for
an intellectual and scholastic look
that is classic and bold. I wanted a
professional and scholastic feel for
the users.
Raleway
Extralight, Bold (14pt)
Colours
I chose the colours of the German
flag (black, red and yellow) and
gave them a modern twist. The
colours feel like Autumn and Back to
School. They feel warm and inviting,
supportive and safe.
Images
I decided to use photographs that
are clean and related to the content.
I felt that the use of photos give a
modern and interesting feel.
BRAND IDENTITY &
TARGET AUDIENCE
OVERVIEW
Paragraph
Raleway
Regular (12pt)
06
LOGO DESIGN
Mind Map
Thumbnails
07
Wordmark
I decided to add the tagline for the logo because without it, viewers who
don’t know any German or are just learning wouldn’t understand. I want to
create interest and curiosity. Once they do learn the meaning of Achso, it
will be a small memorable experience of learning German.
LOGO DESIGN
Mockups
Variations
08
USER
INTERFACE
DESIGN
HOMEPAGE
Slideshow
The slideshow will start automatically. When users hover
the left or right side, arrows
will appear to guide where
they can further naviagte.
09
ABOUT
Our Story
The Team
Contact
USER
INTERFACE
DESIGN
ABOUT
Our Story
LEARN
Study Tips
LEARN
Study Tips
Logistic Tips
Places to Visit
Links become
bolder on hover.
10
USER
INTERFACE
DESIGN
LEARN
Study Tips
Gallery of all Tips and all
Phases (1-3).
Hover on any link and name
of tip appears.
Selecting a Phase (1-3)
will reorganize the gallery.
Tips that pertain to that phase
will be highlighted. Others will
have a lower opacity.
Same hover within links in a
particular Phase.
11
USER
INTERFACE
DESIGN
A link is selected, the gallery
is replaced by content about
that tip.
User can navigate
within thar Phase and the
other Phases, too.
Hover center of image, a
gallery icon will appear. Users
will return to the full gallery.
The content of the tips are
styled the same: an image
related to the content below.
NOTE
The user will know which
Phase they are by the boldness of font and changes of
colour of the Phase number:
1 = black, 2 = red, 3 = yellow
Also clickable to respective
Phase gallery.
12
EDUCATIONAL
MATERIALS
Book Designs
The professional and scholastic look ties in with the brand
identity and look and feel.
Simple, clean, bold and
identifiable: colour-coded
depending on level.
A1 - A2 = Black
B1 - B2 = Red
C1 - C2 = Yellow
13
Personalpronomen
Verben in Präsens
ich
du
Sie
er/sie/es
komme
kommst
kommen
kommt
wir
ihr
Sie
sie
kommen
kommt
kommen
kommen
du, ihr = informell
Sie (sg, pl) = formell
er = m = der
sie = f = die
es = n = das
ich
du
Sie
er/sie/es
komme
kommst
kommen
kommt
wir
ihr
Sie
sie
kommen
kommt
kommen
kommen
du, ihr = informell
Sie (sg, pl) = formell
EDUCATIONAL
MATERIALS
er = m = der
Visualizing
sie = fConcepts
= die
es
n = das
I like the
use =
of colour
to help
with some of the concepts.
Posters
I designed the learn material
without English translations,
so concepts to learn German
are taught in German for
deeper understanding and
maximum learning.
Flashcards
der (masculine) = red
die (feminine) = yellow
das (neutral) = black
14