Portfolio - Wolfgang Maehr

Transcription

Portfolio
Wolfgang Maehr
2012
Bio
Interaction Designer with more than 5 years of experience specialised
in making mobile applications, web applications and the (mobile)
internet easier and more interesting to use. Nomad, currently based in
Singapore, keen to explore new lands to observe people’s quirks and
osmosing different cultures.
Worked on numerous technology driven projects across platforms
ranging from desktop computers to mobile devices and TV set-top
boxes, some of which have over half a million downloads. Still looking
for my true calling to contribute more to the world we live in. Very
interested in how we shape the interactions between humans, our tools
and our surroundings way beyond computers and screens. I care about
working in keen teams, where everybody goes out of their way to ship
quality products.
Born and raised in a historic town (pop. 35.000) at the Austrian-Swiss
border, I hold a software architecture degree and a Masters Degree in
Interaction Design and Human Computer Interaction from Sweden.
Since then, I honed my Interaction Design skills at Opera Software in
Norway and India and by running Extra Thought, a Singapore-based
Interaction Design consultancy. I curate DestrActions, a monthly design
event where people meet over collaborating on design challenges.
I ♡ Ultimate Frisbee and I miss my 1996 Royal Enfield motorbike.
Portfolio: Wolfgang Maehr, 2012
Good design makes people care.
Worthwhile design creates altruism.
Design Process
Depending on the project needs, the typical
design process would encompass some of the
following steps:
— User research: interviews, observational studies, user
testing, personas, etc.
— Ideation & exploration: creative workshops, brainstorming,
creativity methods, etc.
— Product design & strategy: use cases, specification, overall
navigation and site-structure, information architecture, etc.
— Interaction design & development: iterative approach to
design the details required together with developers,
graphical designers, guerrilla testing, etc.
— Testing & review: usability reviews, user testing, field
testing, etc.
User Research
What?
Idea Generation
& Exploration
This?
Product Design
& Strategy
This.
Interaction
Design &
Development
How.
Testing &
Review
How?
Product
Selected Projects
Note: Due to the nature of my work the most representing output are wireframes and mock-ups. These are
a result of the preceding and iterative steps of user research, ideation, conceptualisation, user testing and
reviews and other activities.
However, much of this happens with pen and paper or in text documents or meetings, all of which is even
more boring than wireframes in a portfolio and hence have been omitted here.
Spuul
Spuul is the first legal Bollywood movie streaming web site. Founded
and built in Singapore, they first approached Extra Thought to design
the UI for their website launch.
For their web product, I did following:
— User research: interviews, cultural exploration, competitive analysis
— Product specification: functionality spec and wireframes
— Development support: testing, and guidance
The site has launched successfully and has been developed further
in house building. As co-founder of Extra Thought, I supervised:
— Branding: logo, colour palette and fonts
— UI design: mockups and spec
— UI design for iPhone, iPad, Android phone and Android tablet apps.
O1: Login Overlay
Progress Feedback
Overlay
LA1: Home Page
(spuul.com)
CL1: Clip Listing Page
(spuul.com/popular)
LA2: logged in (free)
LA3: logged in (premium)
CD1: Clip Detail Page
(spuul.com/watch?clip=xyz)
UA1: User Account Page
(spuul.com/account)
CD2: resume
SR1: Search Result Page
(spuul.com/search)
LA2a/LA3a: first login
CD3: play clip
CD4: play trailer
CD5: special clip page
O2: Registration Overlay
Progress Feedback
Overlay
ER1: Error 404 Page
(spuul.com/404)
O3: Special Payment
Overlay
Progress Feedback
Overlay
FA1: F.A.Q. Page
(spuul.com/faq)
AC1: About & Contact Page
(spuul.com/about)
TC1: Terms & Conditions Page
(spuul.com/tnc)
Navigation Flow
CD2: ClipD Resume (fp)
»
Confidential
Spuul Wireframes v.0.1 by Extra Thought
»
…
…
…
…
Wireframe
…
…
paused movie
Live Site
paused movie
…
1
…
2
3
4
5
m Ipsum…
1
1
2
3
4
2
3
4
5
5
…
…
1
2
…
Clickable PDF Wireframe
welcome screen after buying access
Live Site
landing page
Spuul: Recap
Challenges for the Design:
— Speed and ease of use for a vast range of users in terms of age and computer
literacy.
— Making the UI scalable for desktop and TV.
— Making the UI and navigation simple and elegant yet easy to explore and
information rich.
— Variety of content such as movies versus TV shows as well as free, premium and payper-view.
Thoughts on the Design:
— Focus on movie banners as these are recognisable.
— Personal bar on the right for favourites and unfinished movies.
— Progressive disclosure of information (e.g. movie rating, synopsis, etc.) on hover.
www.spuul.com
Stickery
Stickery: Mermaid Waters is an educational iPhone game for preschoolers to learn basic maths. It is a Singapore-based startup and
through Extra Thought I helped them improving and monetising their
app as well as delivering learning progress reports to the parents.
My responsibility was:
— Overall User Experience: Game concept, storytelling, etc.
— Game design for the educational games
— UI design for the parent section of the app
— Wireframes and UI design for their mobile and desktop analytics web site
— User testing and research
As a small startup, everybody is involved in discussions and work in
various fields outside their responsibilities.
Screenshots
Stickery Reports
(page title)
Logo
Sign Up
Login
Login
Signup for Free
e-Mail
Learning for kids is not just game-to-child. Its about parent-to-child. Signing up allows
you to monitor your child's progress over time. You can see which skills your child is picking
up quickly and which skills your child is struggling with. Our free accounts provide you with
following:
[email protected]
Password
Forgot password
your password
sales pitch
(analytics, advice, curriculum)
Login
• Skill overview of your child's strengths and weaknesses.
• Progress reports on your child's learning performance.
• Problem area reports on which specific things your child has difficulties with.
• Learning tips on how to strengthen your child's skills in a playful manner.
6
5
Counting (last 30 games)
97%
7 (last 30 games)
97%
4 (28 games)
80%
5 (28 games)
80%
8 (28 games)
80%
6 (28 games)
80%
2 (28 games)
80%
3 (28 games)
80%
1 (last 30 games)
75%
9 (30 games)
33%
4
Sorting (28 games)
80%
Less or More (last 30 games)
75%
Number Recognition (30 games)
33%
2
1
Overall time spent playing: 55 minutes
Overall (all 123 games)
3
70%
0
Average Mistakes over Time
Counting
Skill Overview
See what your child is good at.
Less or More
Number
Recognition
Current level: 3
Sorting
Learning Curves
See how fast your child learns.
Overall (all 123 games)
70%
Problem Areas
See the numbers your child
struggles with.
This information helps you as a parent, to see if your child likes the game and how often it
plays. It also helps you understand what your child excels in and what it finds difficult. As we
are using the California Preschool Curriculum as a basis for our games, you can foster your
child's development.
Signup
Setting up reporting is three easy steps:
1. Create an account.
2. Get your iOS device, start Stickery and tap on "Progress Reports".
3. Tap on "Sign in" and enter your e-mail address and password.
All Apps
App Page #1
We only collect data measuring your child's playing performance: how many right and wrong
answers, which questions and so on. All this information is only used to generate these
insights for you, we do not use it in any other way. For more details see our Terms and
Conditions.
Signup
App Page #2
2011 Appyzoo Inc, All Rights Reserved Privacy Policy Terms of Service
Apple, the logo and iPhone are trademarks of Apple Inc., registered in U.S. and other countries.
© Appyzoo Inc.
F.A.Q. | About | Terms & Conditions | Privacy Policy
Wireframe Mobile
Mockup Desktop
landing page
landing page
Stickery Reports
What has my child been practicing?
What has my child been practicing?
Beginner Mathematics
Addition, subtraction, counting, subitising
Advanced Reading and Writing
Beginning sounds, letter shapes, alphabetic order
How well is my child faring?
More or Less (last 30 games)
Order by Size (all 26 games)
Addition (all 12 games)
Number Recognition (last 30 games)
Overall Performance (last 98 games)
How can I help my child?
Activity #2: Number Chase
Put numbers on the wall around the
house and play a game. "I am going to
find the number 4", and then run to it.
Mathematics
Addition, subtraction, counting, subitising
Reading and Writing
Beginning sounds, letter shapes, alphabetic order
How can I help my child?
house and play a game. "I am going to
find the number 4", and then run to it.
Activity #33: Singing while Adding
Sing some of the addition songs sound at
Songs For Teaching: http://
www.songsforteaching.com/math/
additionsubtractionsongs.htm
Wireframe Mobile: v.1
Wireframe Mobile: v.2
home page: logged in
home page: logged in
T&C Page
logout
Privacy Policy Page
Retrieve Overlay
4: password sent
Footer
FAQ Page
About Page
Login Overlay
5: activate account
Header
Header
Home Page
(not logged in)
Home Page
(logged in)
Settings Page
Signup Overlay
App Page
logged
in
Curriculum Page
logged
in
Reminder Settings Overlay
8: mail settings
changed
Change Email Overlay
1: email changed
Delete Account Overlay
9: account deleted
6: set up logging
7: too little data
Skill Page
logged
in
Game Page
logged
in
Change Password Overlay
Advice Page
2: password changed
3: password not
changed
logged
in
Share on e-Mail
10: advice shared
Share on Twitter
Share on Facebook
Navigation Flow
progress report web site
Spielsprache Wählen
de
Deutsch
Laden
English
es
Español
Descargar
fr
Français
Télécharger
日本
zh
中国
Signup
Stickery
Parent Zone
Logout
[email protected]
A Stickery account provides for free:
• Tracking of your child's learning performance.
• Customized parenting tips.
• Ability to reset the game and play it again.
en
jp
Free Account
Skip
Progress Reports
Parent Guide
Get the Full Game
Email [email protected]
Language: English
Reset
Password minimum 8 characters
ダウンロード
By signing up, you agree to our
terms of service.
下
Bitte wählen Sie die Spielsprache für Ihr Kind.
Das herunterladen des Sprachpaketes kann
etwas dauern, wir bitten Sie um etwas Geduld.
Continue with English
Game?
The story will restart. Your progress reports
will not be affected.
Feedback Forum
Cancelwith Your Friends
Reset
Share Stickery
OPTIONAL
Your child's details:
Female
Male
Credits
Birthday
2008-01-01
Reset Game
We do not share your child's details
with third parties.
More information at http://parents.stickeryapp.com.
More information at http://parents.stickeryapp.com.
Mockup Mobile
Mockup Mobile
Mockup Mobile
language selection for
iPhones running in German
signup for a learning
reports account
confirmation dialogue
styling
Stickery: Recap
— How to keep 3–6 year olds entertained long enough to track learning progress?
— How to design simple and fun games allowing tracking of learning progress versus
arbitrary play? How to filter out arbitrary play sessions?
— How to let parents know that there is more to the game, such as are progress
reports, and how to get them to sign up?
— How to keep children out from parent sections such as paid upgrades or settings?
— Creation of an overarching story to keep children interested.
— Clear visual distinction between screens for children and parents.
— Building of a design foundation for more games to expand upon.
http://www.stickeryapp.com
Give Blood
Give Blood is a small and simple iOS app that allows people to be
notified if blood of their blood group is urgently needed close by.
Hospitals and private users can log in on the web and post blood
requests that are routed to the appropriate app instances.
My responsibility was:
— User Experience of the iOS and web app: Conceptualisation, wireframes and testing.
— UI design review and cleanup of the iOS app.
— UI design of the web app.
Cancel
Save
Profile Information
Back
Requests (3/17)
Back
Requests (3/17)
Date
Location
Blood
Ref
Status
Yesterday, September 22, 2011
The Apollo Clinic, Jyoti Nivas
College Rd, Bengaluru, India
ABIN-KA-BGL-XY02643-Z
In need
Facebook
Name
John Doe
Location
Date
Location
Bangalore, India
Select Blood Type
A
B
AB
0
pos
neg
Facebook
Show Alerts
Anytime
1 Month
Blood
Ref
Status
In need
3 Months 6 Months
Never
Twitter
Back
Twitter
Requests (3/17)
Message (140 characters left)
Your message to the receiver…
Contact (phone or email)
+91 97 12 564 214
Message (140 characters left)
Your message to the receiver…
Cancel
Send
Q W E R T Y U I O P
A S D F G H J K L
Contact (phone or email)
+91 97 12 564 214
Cancel
Pledge Blood
Z X C V B N M
Send
123
space
Wireframes
app interaction
Next
Cancel
Profile Information
Name
John Doe
Location
Bangalore, India
Save
Select Blood Type
A
B
AB
0
pos
neg
Show Alerts
Anytime
1 Month
3 Months 6 Months
Never
Wireframe
Concept
Layout Exploration
Final Mockup
user profile screen
user profile screen
(by external collaborator)
user profile screen
user profile screen
Back
Date
Location
Blood
Ref
Status
Requests (3/17)
In need
Facebook
Twitter
Pledge Blood
Wireframe
Concept
App Screenshot
Final Mockup
initial design
(by external collaborator)
during development
enhanced and cleaned
Give Blood: Recap
— How to make a simple and relevant UI for an app that will be accessed very rarely.
— How to show only relevant requests yet avoiding an empty app implying uselessness.
— What kind of location filtering to apply: current location, Facebook information, etc.?
— How to discourage scamming but allowing people posting requests?
— Aiming for a nice and clean brand that does not have the usual iOS app gloss.
— Creating a feeling of a “donor id” that eventually can be extended to a blood
donation record or a virtual health card.
— Simple notification method allowing users to choose their preferred means of
communication.
Not launched yet.
Other Projects
Other projects have been across various domains, such as:
— Product and system design
— Dashboard interfaces
— Web sites and web apps
— Intranets
— Widgets on desktop, mobile and TV
— Desktop applications
— Mobile web browsing
These projects have covered different parts of the design process
from user research over development to usability testing.
System Flow Design
user journey sketch
Search Name
Search
Logo
Advanced
Search
Sort by: Recently changed first
#34 Shawn Corey Carter, age 43 — "Jay-Z", "Hova", "H.I…"
My Stars
My Bookmarks
UHNW
Relevant People
President at Roc Nation
Lives in New York, New York, United States
Chief Executive Officer at Google
Lives in Palo Alto, California, United States
Logged in as Developer Account
Help | Settings | Logout
$100 mio +0.03%
Chairman at Generation Invest…
UHNW
#65 Albert Arnold Gore Jr.
$100 mio +0.03%
$100 mio +0.03%
UHNW
« Previous
Relevant People see all
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
Next »
$100 mio +0.03%
2
Recent News see all
Rich sports fans are renting luxury London homes for the Olympics
LONDON IS HOME to some of the world’s most opulent hotels, but with five-star rooms in short supply …read more • email link
$100 mio +0.03%
UHNW Chairman at Generation Invest… 2
$100 mio +0.03%
2
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
Rich sports fans are renting luxury London homes for
the Olympics …read more • email link
Relevant People see all
Star More PDF
Next »
About Us • Terms of Use • Privacy Policy
About Us • Terms of Use • Privacy Policy
Dashboard A
Dashboard B
wireframe IA conceptualisation
wireframe IA conceptualisation
2
$100 mio +0.03%
Chairman at Generation Investment Management
Lives in Washington, DC, US
net min $30 million
+0.01%
2
$100 mio +0.03%
2
$100 mio +0.03%
2
$100 mio +0.03%
UHNW Lives in Washington, DC, US
net min $30 million
+0.01%
1•2•3•4•5
$100 mio +0.03%
Star More PDF
« Previous
net min $30 million
+0.01%
Star More PDF
$100 mio +0.03%
2
$100 mio +0.03%
2
UHNW
Star More PDF
Star More PDF
Star More PDF
UHNW
Star More PDF
Recent News see all
net min $30 million
+0.01%
Star More PDF
Star More PDF
1•2•3•4•5
net min $30 million
+0.01%
V
Star More PDF
UHNW
Advanced Search
at least $15 billion
+0.01%
Chief Executive Officer at Google
Lives in Palo Alto, California, United States
Star More PDF
UHNW
Star More PDF
$100 mio +0.03%
Sort by: Recently changed first
Star More PDF
$100 mio +0.03%
Search
My Stars
Star More PDF
+0.01%
Search name
#35 Larry Page, age 39 — "Lawrence"
My Bookmarks see all
net min $30 million
+0.01%
Star More PDF
News
Logo
V
Logged in as Developer Account
Help | Settings | Logout
2
Logo
My Stars
Filter
Everybody
My Stars
Filter Names
UHNW
President at Roc Nation • Lives in New York, New York, United States
Related: Sean Combs, Beyonce Knowles, LeBron James
Advanced Search
Chief Executive Officer at Google • Lives in Palo Alto, California, United States
Related: Larry Page, Eric Schmidt
News
#36 Shawn Corey Carter, age 43
Rich sports fans are renting
luxury London homes for Oly…
#203 Shawn Corey Carter, age 43 — "Jay-X"
UHNW
Pinboard
Chairman at Generation Investment …
#34 Shawn Corey Carter, age 43 — "Jay-Z", "Hova"
Show recently changed first
net min $30 million
+0.01%
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
V
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
Star
More
PDF
UHNW
UHNW
net min $30 million
+0.01%
net min $30 million
+0.01%
net min $30 million
+0.01%
Settings
Logout: John Doe
net min $30 million
+0.01%
iPad Dashboard
wireframe conceptualisation
user accesses the site
URL or bookmark
#1
User browses for RFQs to apply for.
User Type: A, B, C
HO1
PR1
user accesses an RFQ on the site
Google search, partner site, email link
RL1: RFQ Listing Page
Logo
SingTel
All RFQs
Header
only relevant
Logout
Search
Items Requiring Attention
logo
HO2
HO1: Home Page: logged in
Logo
SingTel
Header
Most Relevant RFQs
add new
Logout
Search
logo
logo
logo
logo
logo
logo
logo
logo
Bookmarks
logo
logo
logo
User Actions:
> browse by: tag, search, listing
> click on RFQ: image, title, author, expand
–––
Logic: Most relevant RFQs:
- new/unseen RFQs + soon ending RFQs based on
previous tag/category
logo
see all
Most Recent BOs
add new
Logic: Items Requiring Attention:
- own closed RFQs that lack need a bidder selection
- transactions pending rating
- etc.
logo
logo
Search
logo
image
SGD 200
image
SGD 200
image
image
SGD 200
logo
logo
logo
Bookmarks
logo
logo
logo
logo
logo
logo
logo
logo
logo
see all
RD: RFQ Detail Page
target of any shared link
Logo
SingTel
Header
Logout
logo
logo
logo
logo
logo
logo
expand to RLa
logo
Bookmarks
logo
logo
logo
logo
logo
logo
logo
Logic: Bookmarks:
- RFQs and BOs that were bookmarked
SGD 200
Fusce dapibus, tellus ac cursus commodo, tortor mauris.
logo
logo
User Actions:
> browse/filter by: tag, search, listing, all/relevant,
posting date (default), closing date
> click on "expand" will expand
> click on RFQ title opens RFQ Detail Page
> click on logo or author opens Organisation Page
> click on tags and categories,open RFQ Listing page
with matching criteria
–––
Logic: RFQ Listing:
- sorting: closest first (different per filter)
- display 20 entries per page
Similar Open RFQs
logo
logo
Learn More
logo
RLa: RFQ Listing Expanded View
PR2
logo
logo
report
share
logo
c
bookmark
PS1
HO2: Landing Page: not logged in
logo
User Actions:
> bookmark, report, share via pre-written email or LinkedIn
> apply opens Partner Site
> full details opens RFQ Detail Page
–––
Logic:
- button unfolds and stays unfolded
Display:
– essential details of the RFQ
– user rating (if available)
logo
RDa: Closed RFQ with Ratings
Transaction Rating
Logo
SingTel
Header
Login
Opportunities
how this works
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum.
Most Recent RFQs
Signup
User Actions:
> signup (main focus)
> login
–––
Display:
– sales pitch and explanation at the top
– direct list of benefits in the right panel
Logo
SingTel
All RFQs
partner logo
logo
Login
only relevant
Signup
Search
logo
logo
logo
Header
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum.
Our Strategic Partners
Search
logo
Our Strategic Partners
partner logo
partner logo
logo
logo
see all
Most Recent BOs
image
What Are Bulk Offers?
Search
image
image
logo
logo
Similar Open RFQs
logo
RDb: Closed RFQ with Pending Rating
partner logo
Header
Logout
Please rate the transaction:
logo
public comment
logo
private comment
logo
logo
logo
save
logo
logo
image
User Actions:
– as otherwise plus signup
–––
Display:
- small signup banner remains on top with call to
action
right panel explains benefit of signup (bookmarks):
sales pitch and logos
SingTel
logo
logo
logo
RL2: RFQ Listing Page: not logged in
PROCESSING
logo
logo
Bookmarks
logo
logo
logo
logo
SGD 200
SGD 200
SGD 200
how BOs works
SGD 200
see all
expand
logo
Transaction Rating
logo
logo
logo
transaction rating pending
Web Portal Navigation
functionality and navigation
Similar Open RFQs
logo
logo
logo
logo
RDc: RFQ Detail for Partner
logo
Suppliers Who Submitted a Bid:
logo
logo
logo
Loan Details
Amount
25,000
Prepayment
Rs.
Full loan amount in Indian rupees. Mauris iaculis porttitor
posuere. Praesent id metus massa, ut blandit odio.
Interest
10 %
Amount
Annual fixed interest rate.
25,000
Rs.
The planned advance amount.
Tenure
5
years 11
months
After month
Total tenure of the loan. Mauris iaculis porttitor posuere. Praesent
id metus massa, ut blandit odio. Proin quis tortor orci.
Fees
2.3 %
Total Amount:
Equated Monthly Instalment (EMI):
7
When do you plan to start making the
advance payments?
Fee
Processing fees on the loan amount. Mauris iaculis porttitor
posuere. Praesent id metus massa, ut blandit odio.
Rs. 10.53.300
Rs. 8,00,528
Month Start Balance
Interest
Principal
End Balance
1
24,00,000
20,000
24,462
23,75,538
2
23,00,000
20,000
24,462
23,75,538
3
24,00,000
20,000
24,462
23,75,538
4
24,00,000
20,000
24,462
23,75,538
5
24,00,000
20,000
24,462
23,75,538
6
24,00,000
20,000
24,462
23,75,538
7
24,00,000
20,000
24,462
23,75,538
8
24,00,000
20,000
24,462
23,75,538
9
24,00,000
20,000
24,462
23,75,538
10
24,00,000
20,000
24,462
23,75,538
11
24,00,000
20,000
24,462
23,75,538
12
24,00,000
20,000
24,462
23,75,538
Annual Amortisation Table
Every 3 months
Do you plan to pay off parts of the
loan in advance?
Monthly Amortisation Table
5.4 % On each payment
What's the fee the bank charges for
advance payments?
Find better loans on BankBazaar for free:
Car loan · House loan · Personal loan
Loan Amount via EMI
Rs.
25,00,000
Amount Prepaid
Rs.
0
Total Interest Due
Rs.
2,15,327
Prepayment Fee
Rs.
0
Total Cost
Rs.
27,15,327
Loan Breakup
Before Cleanup
After Cleanup
initial design on client site
review + redesign: wireframe
Pay-off Time
Cost-Benefit
…
…
…
Share your thoughts, ideas and files:
Files:
IMG_4813.jpg
IMG_4814.jpg
and 27 more files. add…
Home
Tags: lorem, XYZ, policy, template,
pictures edit…
Title: Lorem Ipsum Dolor Sit edit…
…
Share with: XYZ edit…
Banner
…
…
…
…
©
Intranet Wireframe
user research, ideation + conceptualisation, specification + design
Opera Developer Tools Wireframe
user research, ideation + conceptualisation, specification + design, testing
Standard block element
Margin collapsed block element (inverted highlight)
20%
52ex
Border collapsed block element (inverted highlight)
20%
margin
-1024px
border
1em
padding
–
–
margin collapsed -1024px
52ex
border
1280px
2 2 9999
px em px
–
1
em
52ex
1em
padding
2px
contents 9600em
1
em
20%
-1024px
border
1em
padding
2px
contents 9600em
–
margin
1280px
2 2 9999
px em px
–
1
em
2px
contents 9600em
–
1280px
2em
2em
2em
1px
1px
1px
–
4px
–
4px
0px
Standard inline element.
collapsed
2 2
px em
0px
0px
Inline element with typographic information.
word-spacing:
2em
guan. M
guan. M
a dip is a dip is
lja fac
lja fac
m b
1em
p
2px
ascender
c
–
1
–
em
2 2 999
px em px
–
4px
line-height:
145%
font size:
medium
baseline
descender
2em
1px
Visualisation Concepts
web developer tool box model
Latest news
Opera 9.5 out now
The Swiss say yes to Opera Mini: Swisscom to deploy Opera Mini to mobile phone customers
Ver: 9.51
Discover the new standard in Web browsing. Download Opera today to get the fastest and most powerful Web browser available
and make the most of your time online. Learn more and see video tutorials
Latest news
Opera brings Web standards to classrooms worldwide
Inline highlight
Opera Mini 4.1
Introducing the newest version of our
Block highlight
mobile Web browser — Opera Mini 4.1.
Opera Mini gives you the full Web
everywhere. Download it now, learn more
or get a download link by SMS.
Opera 9.5 out now
Ver: 9.51
Discover the new standard in Web browsing. Download Opera today to get the fastest and most powerful Web browser ava
and make the most of your time online. Learn more and see video tutorials
Opera Mobile
Latest news
Opera brings Web standards to classrooms worldwide
Surf the full Web on your smartphone or
Inverted highlight
PDA with the award-winning Opera Mobile
browser. Learn more about Opera Mobile.
Opera Dra
Opera Dragonfly
debugging envir
featuring a Java
DOM inspectors,
Console.
Opera Mini 4.1
Opera Mobile
Opera Dragonfly alpha 2
Opera Mini 4.1
Opera Mobile
Opera Dragonfly alp
mobile Web browser â!” Opera Mini 4.1.
Opera Dragonfly is a cross-device
debugging environment for Opera 9.5,
featuring a JavaScript debugger, CSS and
DOM inspectors, Command Line and Error
Console.
mobile Web browser â!” Opera Mini 4.1.
Opera Dragonfly is a cross-device
debugging environment for Opera
featuring a JavaScript debugger,
DOM inspectors, Command Line a
Console.
My Opera
Business solutions
Join us
My Opera
Business solutions
Join us
Join and explore My Opera: Opera's social
network and community. Share photos,
start your own blog, meet friends and
start mobile blogging via SMS. It's
completely and totally free, jump in right
now! Don't waste a second and get your
money-maker over here to get all the
great things of Opera Mini.
Operator or OEM? Learn how Opera
technology can power your Web strategy,
accelerate time to market and delight
your customers.
Find out more
Are you passionate about the Web and
want an international career? Check out
our open positions, and apply today!
start mobile blogging via SMS. It's
completely and totally free, jump in right
now! Don't waste a second and get your
money-maker over here to get all the
great things of Opera Mini.
your customers.
Find out more
Are you passionate about the We
want an international career? Ch
our open positions, and apply tod
your
customers.
Copyright Opera
Software ASA. All rights reserved.
my.opera.com | operamini.com | widgets.opera.com | dev.opera.com | jobs.opera.com | operapowered.com
Find |out
more
jp.opera.com
ru.opera.com
| pl.opera.com | de.opera.com | cn.opera.com | tw.opera.com | in.opera.com
Are you passion
want an interna
our open positio
My Opera
start mobile
blogging
via SMS. It's free,
Copyright Opera Software ASA. All rights reserved.
Web analytics
powered by HitsLink.
Site Index | Contact | Privacy
jump in!
jp.opera.com | ru.opera.com | pl.opera.com | de.opera.com | cn.opera.com | tw.opera.com | in.opera.com
Business solutions
Visualisation
Copyright Opera Software Concepts
ASA. All rights reserved.
Join us
Web analytics powered by H
Site Index | Conta
Web an
web
developer tool highlight
jp.opera.com | ru.opera.com | pl.opera.com | de.opera.com | cn.opera.com | tw.opera.com | in.opera.com
sent sit
t
mentum
a bibendum
et massa
abitur
erisque
dui.
que
estie
tas
ris fusce
per enim et
u
bulum
ique
um
na
ntesque
ris leo
ue tempor erat vel
Vestibulum justo
, lobortis sed,
ntum et, tristique
Lorem Ipsum 2
Pellentesque
Mauris leo
Donec mauris
tellus, venenatis
Aenean orci orci,
venenatis eu, laoreet
venenatis.
eu,
eget,
eget,laoreet
aliquam
nec, dolor. Ut
a
l i q uquam
a m n eac
c , dui ornare Consequat, magna eu
eget
Mobile Quisque tempor erat vel
auctor dignissim, elit nibh
pharetra tellus, nec suscipit
dolor.
Ut
eget
feugiat.
Aenean
placerat.
urna. Vestibulum justo
nunc pede non tortor.
Pede eu elit
dapibus. In eget Lorem Ipsum 2 Praesent tincidunt lobortis
q
m saoc c d
Cuuam
i iusi n a t o q u e Maecenas
Praesent sit
mi,
lobortis
sed,
nisi. Aenean nisl risus,
turpis
sed
risus
posuere
amet
2006-09-15
Pede
eu
elit
condimentum id,
sodales.Sed
pharetra
ornare
feugiat.
Pede
eu
elit
penatibus
et
magnis
dis
Fermentum
fermentum
et,
tristique
vestibulum sed, mattis eu,
elementum
dui.
Maecenas
Praesent
sit
Nulla bibendum
elit. Nulla scelerisque,
amet
Fermentum
vitae
justo.
Pellentesque
A
e n e montes,
a n
Velit et massa
Lorem ipsum
parturient
nascetur
ut, enim.
neque vel gravida
bibendum
Praesent
sit
habitant morbi Nulla
tristique
dolor sit amet
Curabitur
Velitet
et massa
tincidunt, augue nibh
Scelerisque
senectus
et
netus
placerat.
Cum
ridiculus mus. Phasellus malesuada famesCurabitur
eros
scelerisque tortor, non
ac turpis
Scelerisque
amet
Vestibulum
Vel dui.
ultrices nunc mauris nec
egestas.
Proin
tristique
sociis
natoque
Fermentum
eros
faucibus nunc non felis. enim sed erat. Suspendisse tincidunt
Quisque
nibh. Quisque neque enim,
Vel dui.
Molestie
feugiat nec, dapibus eget,
Quisque vitae,
p
e n a t ineque.
b u s e tNam lacus. velit velit, fermentum
egestas
Proin
dictum nec, lorem. Aenean
dapibus
ut,
gravida
nec,
Vestibulum
Mauris fusce
Nulla
bibendum
lectus diam, dignissim
tincidunt Sed
odio.
Integer
convallis.
m
a
g
n
i
s
d
i
s
Semper enim et
Aliquam vehicula arcu. semper nisl quisDonc
nonummy, accumsan vel,
mores
Arcu
nisl.
Neque
iactat
vestibulum
fermentum eu, nulla.
Nullam
non
lorem
in
quam
p
a
r
t
u
r
i
e
n
t
Vestibulum
ut et
urna
quis dictum sollicitudin.
2006-09-15 M a u r i s e r o s v e l i t ,
Molestie
Velit
massa
Tristique
Lorem
ipsum
dolor
sit
amet,
egestas
dictum
commodo
non,
m
t o rot onr tu let rsi c,e s l a c i n i a .
Mauris fusce
Magna
pellentesque at, tristique
consectetuer
adipiscing
elit.
Semper enim et
Pellentesque
in, turpis. Nullam purus.
n
a s c e Curabitur
t uat r mi eu orci
Arcu
Vestibulum
Mauris leo
Phasellus egestas, libero vel
vestibulum
Tristique
a l i q u a m mus.
dignissim. Ut
dictum
blandit laoreet, metus zooming
eros in ridiculus
zooming in
Scelerisque
Magna
Vestibulum
P
h
a
s
e
l
l
u
s
viverra
adipiscing
nibh.
Ut
Pellentesque
dictum est, in adipiscing
Mauris leo
eros
faucibus
interdum.nunc
Aenean ligula Pellentesque velit
tincidunt
nulla dolor vitae lacus. Sed
scrolling
clicking
link in.
ligula,
viverra
non
felis.
Proin
libero, bibendum eget,
accumsan, lectus nec
Vel
n
eque. N
a mdui.
scelerisque
et,
vehicula sit
pharetra convallis, pede odio
lacus.
Aliquam
Vestibulum at mi eu
amet, sapien.
Quisque
ullamcorper elit, sit amet
orci aliquam dignissim.
vehicula arcu.
Donec est. Mauris
suscipit nulla ligula nec
scelerisque, ipsum sed
Ut viverra adipiscing
VestibulumVestibulum
ut
dapibus aliquam, sem felis
lectus. Proin pharetra felis
Sed at nulla sit amet justo accumsan ante, nec egestas nibh. Ut interdum.
urna quis tortor
tortor pede non velit.
quis felis. Maecenas fringilla
tincidunt
volutpat consequat.
Nam Vestibulum nec mauris.
Aenean ligula libero,
ultrices lacinia.
Pellentesque vel dui.
odio at erat. Vivamus
quam massa, scelerisque sit Nullam placerat, tortor eu
bibendum eget,
Vestibulum
at
bibendum
dictum,
turpis
suscipit, sem ac gravida
Donc mores
scelerisque et, vehicula
amet, condimentum
quis, tellus feugiat erat, vel
m
i
e
u
o
r
c
i
porttitor
tellus
libero
nec
porttitor, sem felis eleifend
sit amet, sapien.
venenatis eget, dui. Donec quam. Morbi et massa.
a
l
i
q
u
a
m
Neque
iactat
Morbi
lorem.
Aenean
lacus, at consectetuer pede
vel purus. Nam porttitor molestie, leo placerat
dignissim.
Ut
sagittis adipiscing, mi felis
enim eu urna.
condimentum
velit. Integer blandit mi, et congue lacus
Molestie
v i v e r r a
ante vel tellus. Maecenas
posuere arcu a est. Aliquam vehicula. Morbi et velit.
adipiscing egestas
nibh.
Ut et odio id
Sed in nunc et massa
ligula urna, rhoncus non, iaculis accumsan.
Ut interdum.
sapien pretium
sodales ut,Mauris
sagittis sit
amet,
fusce
Aenean ligula
convallis. Sed
quam. Nunc dui. Vivamus in
l i b e r o ,
vitae mauris.
Lorem ipsum dolor sit
Semper
enim
et
quam. Praesent
tristique
bibendum eget,
amet, consectetuer
Donec mauris
magna vitae mi luctus
Vivamus
suscipit,
sem ac A e n e a n o r c i o r c i , adipiscing elit.
scelerisque
et,
tellus, venenatis
Arcu
a c c u m s a n . V e s t i b u l u m venenatis.
Phasellus egestas, libero
gravida
v e h i c u porttitor,
l a s i t sem felis
eu,
eget,
eget,laoreet
aliquam
nec, dolor. Ut
interdum vestibulum
ante quis mi.
vel blandit laoreet,
eamet,
l e i fsapien.
end lacus, at
a
l i q uquam
a m n eac
c , duiuser
eget
ornare
research,
ideationtortor
+ conceptualisation,
design
Suspendisse
orci,
metus eros dictum est,
consectetuer pede enim eu
dolor.
eget placerat.
feugiat.UtAenean
Tristique
fermentum in, consequat ac,
urna. Praesent et nibh. Sed Praesent tincidunt lobortis in adipiscing nulla dolor
q
m saoc c d
Cuuam
i iusi n a t o q u e
Aenean nisl risus,
vitae lacus. Sed
sollicitudindictum
nec, leo. Donec nisi.
euismod orci
nec mauris c o n d i m e n t u m i d ,
ornare
feugiat.
penatibus
et magnis dis
Portfolio:
Wolfgang
Maehr, 2012
vestibulum
sed,
mattis
eu,
accumsan,
lectus
nec
sed velit eu mauris hendrerit
Lorem Ipsum
Aliquam
2006-09-15
Consequat, magna eu
Maecenas dapibus. In eget
turpis sed risus posuere
sodales.Sed pharetra
elementum dui. Maecenas
vitae justo. Pellentesque
habitant morbi tristique
senectus et netus et
malesuada fames ac turpis
egestas. Proin tristique
enim sed erat. Suspendisse
velit velit, fermentum vitae,
dapibus ut, gravida nec,
odio. Integer convallis. Sed
semper nisl quis nisl.
Nullam non lorem in quam
dictum sollicitudin.
Aliquam
Lorem ipsum
dolor sit amet
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus egestas, libero vel
blandit laoreet, metus eros
dictum est, in adipiscing
nulla dolor vitae lacus. Sed
pharetra convallis, pede odio
ullamcorper elit, sit amet
suscipit nulla ligula nec
lectus. Proin pharetra felis
quis felis. Maecenas fringilla
odio at erat. Vivamus
porttitor, sem felis eleifend
lacus, at consectetuer pede
enim eu urna.
Quisque tempor erat vel
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Donec mauris
tellus, venenatis
eu,
eget,
eget,laoreet
aliquam
nec, dolor. Ut
a
l i q uquam
a m n eac
c , dui ornare
eget
dolor.
eget placerat.
feugiat.UtAenean
q
m saoc c d
Cuuam
i iusi n a t o q u e
ornare
feugiat.
penatibus
et magnis dis
A
e n e montes,
a n
parturient
nascetur
placerat.
ridiculus Cum
mus. Phasellus
sociis
natoque
faucibus nunc non felis.
p
e n a t ineque.
b u s e tNam lacus.
Proin
m
a g n i s vehicula
dis
Aliquam
arcu.
p
a r t u r i e nutt urna quis
Vestibulum
m
t o rot onr tu let rsi c,e s l a c i n i a .
n
a s c e t uat r mi eu orci
Vestibulum
ridiculus
a l i q u a m mus.
dignissim. Ut
P
h a s eadipiscing
llus
viverra
nibh. Ut
faucibus
interdum.nunc
Aenean ligula
non
l i b e rfelis.
o , bProin
ibendum eget,
n
e q u e . N et,
a m vehicula sit
scelerisque
lacus.
Aliquam
amet, sapien.
vehicula arcu.
Vestibulum ut
Sed at nulla sit amet justo
urna quis tortor
volutpat consequat. Nam
ultrices lacinia.
quam massa, scelerisque sit
Vestibulum at
amet, condimentum quis,
mi eu orci
venenatis eget, dui. Donec
a l i q u a m
vel purus. Nam porttitor
dignissim. Ut
condimentum velit. Integer
v i v e r r a
posuere arcu a est. Aliquam
adipiscing nibh.
ligula urna, rhoncus non,
Ut interdum.
sodales ut, sagittis sit amet,
Aenean ligula
quam. Nunc dui. Vivamus in
l i b e r o ,
quam. Praesent tristique
bibendum eget,
magna vitae mi luctus
Vivamus
suscipit,
sem ac
scelerisque
et,
accumsan. Vestibulum
gravida
v e h i c u porttitor,
l a s i t sem felis
interdum ante quis mi.
eamet,
l e i fsapien.
end lacus, at
Suspendisse tortor orci,
consectetuer pede enim eu
fermentum in, consequat ac,
urna. Praesent et nibh. Sed
sollicitudin nec, leo. Donec
euismod orci nec mauris
sed velit eu mauris hendrerit
elementum lobortis. Nulla
elementum. Pellentesque
eu neque eu lectus sodales
adipiscing. Suspendisse
velit.
egestas. Nullam semper
bibendum odio. Pellentesque
pellentesque nonummy elit.
Suspendisse dignissim
In vehicula turpis
venenatis quam. Sed id
condimentum massa.
lacus. Proin auctor
rhoncus turpis.
Consequat, magna eu
Maecenas dapibus. In eget
turpis sed risus posuere
sodales.Sed pharetra
elementum dui. Maecenas
vitae justo. Pellentesque
egestas. Proin tristique
enim sed erat. Suspendisse
velit velit, fermentum vitae,
dapibus ut, gravida nec,
odio. Integer convallis. Sed
semper nisl quis nisl.
Nullam non lorem in quam
dictum sollicitudin.
2006-09-15
Pellentesque velit
ligula, viverra in.
Vestibulum at mi eu
orci aliquam dignissim.
Ut viverra adipiscing
nibh. Ut interdum.
Aenean ligula libero,
bibendum eget,
scelerisque et, vehicula
sit amet, sapien.
Donec est. Mauris
accumsan ante, nec egestas
Vestibulum nec mauris.
Nullam placerat, tortor eu
bibendum dictum, turpis
tellus feugiat erat, vel
porttitor tellus libero nec
quam. Morbi et massa.
Morbi lorem. Aenean
molestie, leo placerat
blandit mi, et congue lacus
vehicula. Morbi et velit.
iaculis accumsan.
Aenean orci orci,
venenatis.
Praesent tincidunt lobortis
condimentum id,
neque vel gravida
Mauris eros velit,
commodo
non,
Quisque tempor erat vel
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Pellentesque velit
ligula, viverra in.
Donec est. Mauris
accumsan ante, nec egestas
Vestibulum nec mauris.
Nullam placerat, tortor eu
bibendum dictum, turpis
tellus feugiat erat, vel
porttitor tellus libero nec
quam. Morbi et massa.
Morbi lorem. Aenean
molestie, leo placerat
blandit mi, et congue lacus
vehicula. Morbi et velit.
iaculis accumsan.
amet, consectetuer
adipiscing elit.
in adipiscing nulla dolor
vitae lacus. Sed
pharetra convallis, pede
odio ullamcorper elit, sit
amet suscipit nulla
ligula nec lectus. Proin
pharetra felis quis felis.
Maecenas fringilla odio
at erat. Vivamus
porttitor, sem felis
eleifend lacus, at
consectetuer pede enim
eu urna.
Aenean orci orci,
venenatis.
Praesent tincidunt lobortis
condimentum id,
neque vel gravida
Mauris eros velit,
commodo
non,
Ut eget quam
ac dui ornare
feugiat. Aenean
placerat. Cum
sociis natoque
penatibus et
magnis dis.
Donec mauris
tellus, venenatis
eu, laoreet eget,
ali nec, dolor.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Phasellus
faucibus nunc
non felis. Proin
neque. Nam
lacus. Aliquam
vehicula arcu.
amet, consectetuer
adipiscing elit.
in adipiscing nulla dolor
vitae lacus. Sed
pharetra convallis, pede
odio ullamcorper elit, sit
amet suscipit nulla
ligula nec lectus. Proin
pharetra felis quis felis.
Maecenas fringilla odio
at erat.
Suspendisse dignissim
venenatis quam. Sed id
lacus. Proin auctor
rhoncus turpis.
Mobile Browser Interaction Concepts
Thanks for your interest.
For any questions, feel free to contact me:
[email protected]

Portfolio - Wolfgang Maehr

Transcription

Similar documents

PCS 2014 Spirit Wear Flyer - Plumstead Christian School

ARNOLD SCHWARZENEGGER - Arnold Classic Australia

Album Booklet - Resonus Classics

2015 sponsorship packages

first baptist church apparel - First Baptist Church of Mount Holly

2015 sponsorship packages

Sean Ringgold PK.pptx

May 22 – 25, 2016 I Las Vegas, NV

The Four Tenors - Hudson Riverfront Performing Arts Center

Academy Opera Today 2013 / 2014

St. John Paul II High School

good enough isn`t good enough for me. i prefer great.

Sponsorship Options

Study guide - Pacific Opera Victoria

Blue Jeans Babies Bash

2014 Opera Insider - Central City Opera

Edin Kecalovic Dissertation - Repositório Aberto da Universidade do

Rigoletto - Minnesota Opera

Program Book advertisements - American Musicological Society

polar - Kinnarps

Newsletter - TELMONDIS

calendar - Experience Anacortes