wolfgang maehr · wolfgang maehr! 2017 portfolio digital transformation & product creation...
TRANSCRIPT
Wolfgang MaehrPortfolio 2017
Wolfgang Maehr2017 Portfolio
Design must elevate, not merely delight.
Wolfgang Maehr2017 Portfolio
Digital Transformation
Architecting truly digital business operations
Product Creation
Creating products for digital business operation
Interaction Design
Designing how people will engage digitally
UI & Visual DesignDesigning the surfaces of
digital products
Wolfgang MaehrDIGITAL PROBLEM SOLVER × INTERACTION DESIGNER = PRODUCT CREATOR
We are living through the complete convergence of our physical and meta-physical worlds as this digital revolution advances. We all impact this profound transformation and thus carry responsibility for its outcome.
I want my life’s work to have contributed to a more just, sustainable, free and vibrant world for all. I hope to achieve this by creating products and systems that treat all humans with respect, are interoperable and agile, open and distributed, sustainable and worth the effort.
A curious kid with a growing fascination for technology, I moved through software architecture into interaction design to create usable and useful digital products. Recently I have been working on industrialising software to achieve the same quality, predictability and scale as all other engineering disciplines.
I enjoy exploring and solving meaningful, complex and unconventional problems, diverse environments and fostering people.
Global perspective. Local actuation. Nomadic spirit.
Wolfgang Maehr2017 Portfolio
Digital Transformation & Product Creation
Wolfgang Maehr2017 Portfolio
Digital Transformation & Product Creation
Software is eating the world. We’re still only at the start of this fundamental shift and merely a fraction of organisations and people are able to keep up. We still have a long way to go until digital interactions are as accessible and omnipresent as electricity and industrially manufactured goods.
People have become used to a certain quality of engagement and service: multi-channel engagement, self-service, flexibility and customisation. Most non-digital organisations struggle doing this at scale.
At Gumbuya my responsibility was to help our customers to become truly digital:
1. Provide a vision for their truly digital operation.
2. Elicit their operation model and devise an architecture and roadmap for it.
3. Design and develop products enabling this digital operational model.
ARCHITECTING TRULY DIGITAL BUSINESS OPERATIONS
Examples – Compliance Platform
– Inventory Management System
– Gumbuya Methodology
– Gumbuya Platform
Wolfgang Maehr2017 Portfolio
Compliance Platform
2015–2016
Project Scope Helping the client CEO to transform from a pure consulting business to a hybrid product business by building some of their services as a SaaS product.
My Responsibilities – Guiding conceptualisation,
modelling and architecture of the product
– Creating the required bill of materials (specification) and estimated costing
– Leading the development of the product from a user and customer perspective
Challenges – Defining meaningful roadmap, MVP
and go-to-market
– Creating definite yet flexible processes to scale well across clients
DIGITAL TRANSFORMATION & PRODUCT CREATION — 1
INFORMATION ARCHITECTURE
Trainings
Certifications
Consumers Bulletins
Consumer
Bulletin
Training
Attachments
Reports
Report
Issue
Certification
Internal Auditor
Whistleblower Issues
Provider Certification Providers
Region
Task
Group
<Role>
<Role>s
Deadline
groups
subgroups draft | <date>
attachments
<date>
all
<risk level>
<status>
<date> | unread
<date> | unread
<type>
<date>
draft | availableregions
draft | available
<status>
provider
draft | available
variant
untaken | taken<status>
<status>
auditor
investigations
affects
issues
consumer
<date> | impending
invited | attended | missedconsumers
roles
tasks
<date> | incomplete
On customer deployment
Collection
Item
Collection item
Connected item Owned by customer
Owned by end customer
Present in all cases
On end customer deployment
Created through workflow
Present in some cases
Entry point
PRODUCT CONCEPT
Strategy
Compliance Strategy
Face-to-Face Training Compliance Bulletin Training +
Certification Whistleblower App
ANY INDIVIDUAL
AUDITOR
EXTERNALAUDITOR
BOARD
HIGH RISK EMPLOYEES
EMPLOYEES + SUPPLIERS
Reports
������
OPERATOR
Dashboard
�
�
�
�
�
�
Wolfgang Maehr2017 Portfolio
Inventory Management
2016
Project Scope A luxury beauty and healthcare brand required a modern digital operational fabric from production planning, inventory management to logistics, point-of-sale and consumer engagement portal.
My Responsibilities – Envisioning concept,
fundamental architecture and capabilities
– Define and model the platform, estimate the cost and time of development
Challenges – Architecting complex system
with little customer input
– Building a feasible roadmap with bite-size updates
DIGITAL TRANSFORMATION & PRODUCT CREATION — 2
BUILD PROPOSAL
Build ProposalThe 8 key propositions are one Facet each, driven by a shared Model running on Gumbuya’s Platform.
Building on Gumbuya’s framework, each solution follows this archetypical structure.
Aspect Outcome CostsGumbuya Platform Operating system to run the Client’s applications.
Gumbuya Cloud Dedicated infrastructure (Gumbuya Vault) later.
Operation: Users, Consumption, Development & Operation Platform, Support
Foundation Services Common capabilities used in typical IT systems.
4 Foundation Services User Management, Authentication System, Notification Service, Export Service
Build: License, CustomisationOperation: External infrastructure
Model Core architecture for all parts of the solution.
8 Custom Facets +4 Foundation Services
Build: Stage 0, further Conceptualization and Scoping in later stages
Custom Facets Build of all the custom facets and their facilities.
8 Custom Facets: 15 Facilities Build: Stages A–E
Integrations Third party integrations needed for Custom Facets.
6 Integrations Validation Generator, Validator, POS, Online Shop, CRM, Payment System
Build: Integration workOperation: Infrastructure charges
Analytics & Reporting Track, analyze and report system and user activity.
250* Analytics + 26* Reports *Estimate
Build: Stages A–E
External Infrastructure
Foundation ServiceModel
Facility Facility
CustomFacet
Gumbuya Platform
Analytics &Reporting
Facility
SYSTEM OVERVIEW
Wolfgang Maehr2017 Portfolio
Gumbuya Methodology
2015–2017
Project Scope At Gumbuya we want a reproducible and modular process for all client engagements from sales through development to support.
My Responsibilities – Define a streamlined and
industrialised engagement process based on customer engagements
– Define a formalised model for predicting delivery cost, time and effort
– Deliver customer projects through said process
Challenges – Defining a generic yet all-
encompassing model
– Formalising said model in an approachable yet precise manner
DIGITAL TRANSFORMATION & PRODUCT CREATION — 3
SOFTWARE BILL-OF-MATERIALS
Model
Consumer Experience
Front-Office Back-
Office
Information ArchitectureDefines all business objects in an organisation; shared across
solutions and products.
Interaction ArchitectureDefines how users and other systems interact with the business objects for a given set of capabilities.
Access ManagementDefine the type of users within and outside the organisation,
and how they can interact with what data.
IntegrationsExternal integrations
exchanging data with the model.
Analytics & ReportingTrack, analyze and report system and user activity.
IDEA TO MODEL
� �
CREATE BULLETIN
SELECT RECIPIENTS
SEND BULLETIN
ADVICE
RECIPIENT
BULLETIN
Integrated Publishing & Engagement Platform for
Agents & Customers Agent Management
CRM & Engagement
PlatformPublishing Platform
Financial Modelling System
BUSINESS PROBLEM SYSTEM FACETS MODEL
Wolfgang Maehr2017 Portfolio
Gumbuya Platform
2013–2017
Project Scope Gumbuya provides a revolutionary tech stack in a PaaS offering. In addition, it requires a set of tooling that enables to actually build on the technology.
My Responsibilities – Defining the analytics product from
low-level telemetry to reporting dashboard
– Collaboration on billing and revenue model driven by low-level telemetry
– Collaboration on developer tools, documentation and onboarding
Challenges – Combining a wide range of
telemetry event types into a consistent framework
– Creating developer materials and tools that are powerful yet approachable
DIGITAL TRANSFORMATION & PRODUCT CREATION — 4
SYSTEM OVERVIEW
�
� �Integration Services
REST ConnectorsFTP ConnectorsSOA Connectors
�Delivery Engine
Communication & Session ManagementCDN, Bundler & Delivery ToolsNotification & Subscription System
Telemetry System
Telemetry SystemDiagnostics ServicesTelemetry Store
�Analytics Export
Analytics Raw ExportDashboard & Tools
Client
RuntimeDevice or Cloud
Device Framework & Snaplet RuntimeNotification & Subscription SystemTelemetry CaptureCommunication & Session Management
�Module
Library & Marketplace
Snaplet LibraryAsset/Code Repository IntegrationUser/Role Management
�End User Experience
Consumer ExperienceManagement Experience
RepositoryIdentity & Rights ManagementGumbuya Graph ProcessorGumbuya Graph
�
Tooling Environment
ModelerComposer
��
Snaplet: Code executing graph operations
Wolfgang Maehr2017 Portfolio
Interaction Design,UI & Visual Design
Wolfgang Maehr2017 Portfolio
Interaction Design, UI & Visual Design
While the first step of a successful product is to be useful, the next step is to be well usable and appealing. The quality of the visual design for digital products has improved significantly recently, yet usability is often still neglected due to it’s relative complexity.
As interaction designer my focus is on how users engage with the product and the world it gives access to:
1. Design how people engage across endpoints and channels (e.g. applications).
2. Design how people navigate between surfaces to achieve their outcomes
3. Design how people interact within a surface (e.g. screen)
4. Design how each of these surfaces looks like.
DESIGNING HOW PEOPLE WILL ENGAGE DIGITALLY
Examples
– Multi-Channel Engagements
– Interaction Architecture & Navigation
– UI & Visual Design
Wolfgang Maehr2017 Portfolio
Multi-Channel Engagements
Almost every project now needs to work across channels and endpoints. Some may be highly specialised like QR code scanners and beacons, others communicate the same content in a different form factor and context.
Challenges – Giving access to the same information
through tailored modes of operation
– Giving access to the same information tailored to the specific context and task
– Enabling seamless transition between channels, keeping the system in sync
Strategies – Consistent underlying model
– Atomic transactions
– Mapping of non-linear user journeys
Examples – Financial advisory dashboard (2015–2017)
– Inventory management system (2016)
– Compliance platform (2015–2016)
– Meeting room booking system (2015)
INTERACTION DESIGN — 1
MEETING ROOM BOOKING SYSTEM
Gumbuya Confidential: meeting-concept.graffle — 2014-09-30
!
����� ������������ ��
������ ������
�Meeting management remains on the devices in Outlook, Calendar, etc.:– Creation– Invitation– RSVP– Modifications
Gumbuya pollsExchange for new
meetings.
Each meeting has a micro-site with:– Organiser + attendees– Agenda– Related meetings (project, series,…)– Comment, share, link to meetings + resources
���������� ������
���������������������
Lists the meetings happening in the room– Organiser + attendees– Available slots (timetable)
Provides information on the current and next meetings.– Allow set a message for outside– Input modes? Touch screen?– What size?
Overview over rooms and vacancies:– List of meeting rooms (equipment, status)– Look up by time– Possibly floor plan– LATER: Find my meeting– LATER: Directions to my room
Wolfgang Maehr2017 Portfolio
1. HIGH LEVEL IA
Interaction Architecture & Navigation
The ease of moving through a digital engagement can make or break products.
Challenges – Matching people’s approach,
communicating where they are and providing predictable next steps
– Not encumbering people with excessive steps but keeping interactions crisp
– Linking together use cases to fit the bigger picture
Strategies – Consistency from high level down to the
screen flow and on-screen interaction
– Modular assembly
– Streamlining use-cases
– Testing, testing, testing
Examples 1. Financial advisory dashboard (2015–2017)
2. Spuul: Movie streaming web site (2012)
3. Financial advisory dashboard (2015–2017)
4. Reporting dashboard for parents (2012)
INTERACTION DESIGN — 2
2. NAVIGATION FLOW
LA1: Home Page(spuul.com)
LA2: logged in (free)
LA3: logged in (premium)
LA2a/LA3a: first login
CL1: Clip Listing Page(spuul.com/popular)
SR1: Search Result Page(spuul.com/search)
CD1: Clip Detail Page(spuul.com/watch?clip=xyz)
CD2: resume
CD3: play clip
CD4: play trailer
CD5: special clip page
UA1: User Account Page(spuul.com/account)
ER1: Error 404 Page(spuul.com/404)
FA1: F.A.Q. Page(spuul.com/faq)
AC1: About & Contact Page(spuul.com/about)
TC1: Terms & Conditions Page(spuul.com/tnc)
O2: Registration Overlay
Progress Feedback Overlay
O1: Login Overlay
Progress Feedback Overlay
O3: Special Payment Overlay
Progress Feedback Overlay
Wolfgang Maehr2017 Portfolio
Interaction Architecture & NavigationINTERACTION DESIGN — 3
3. SCREEN FLOW
">7=��>47><4��� ���������24;;��� ���������9>7=�3>42><
�33�2><<4=CJ
�38C
�����E4A6A44=�+4AA024�;>2:����*?A8=6584;3���#
�� +F #8
#>68=
>?D;B4
�<08;� 90=4�3>42><
#>68=
&?D;B4�;>68=
'0BBF>A3� �������
)4<4<14A�<4
�0B71>0A3
�;84=CB %4FB '>AC5>;8> $0A:4CB
%4FB�!C4<*7>AC�34B2A8?C8>=��D8B�<>;;8B��4BC�=>=�2><<J
%4FB�!C4<*7>AC�34B2A8?C8>=��D8B�<>;;8B��4BC�=>=�2><<J
">7=��>4� ���������
� ��������� !=BC8CDC8>=�8=BC8CDC8>=���
">7=��>4� ���������
� ��������� !=BC8CDC8>=��8=BC8CDC8>=�����<>A4
%4FB�!C4<*7>AC�34B2A8?C8>=��D8B�<>;;8B��4BC�=>=�2><<J
%4FB��4C08;
%4FB�!C4<��!=C464A�?>BD4A4�4A0C�0�0=C4�E4=4=0C8B�30?81DBJ�70==4; ��270==4;���270==4;�
*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C
$0424=0B�B43�380<�464C�A8BDB�E0A8DB�1;0=38C�B8C�0<4C�=>=�<06=0��A0B�<0CC8B�2>=B42C4CDA�?DADB�B8C�0<4C�54A<4=CD<�-8E0<DB�B068CC8B�;02DB�E4;�0D6D4�;0>A44C�ADCAD<�50D281DB�3>;>A�0D2C>A�-4BC81D;D<�83�;86D;0�?>AC0�54;8B�4D8B<>3�B4<?4A
'A>3D2C�%0<4*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C
'A>3D2C�%0<4*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C
'A>3D2C�%0<4*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C
'A>3D2C��4C08;
'A>3D2C�%0<4*7>AC�34B2A8?C8>=��A0B�9DBC>�>38>��30?81DB�02�5028;8B8B�8=��464BC0B�464C�@D0<�-4BC81D;D<�83�;86D;0�?>AC0�54;8B�4D8B<>3�B4<?4A
�;>B8=6�34B2A8?C8>=J�-4BC81D;D<�83�;86D;0�?>AC0�54;8B�4D8B<>3
�;84=C��4C08;
%0<4 .4867C�4B2A8?C8>=
�BB4C�2;0BB�=0<4 ���
�BB4C�=0<4 ���*7>AC�34B2A8?C8>=��A0B�9DBC>�>38>��30?81DB�02�5028;8B8B�8=��464BC0B�464C
">7=��>47><4��� ���������24;;��� ���������9>7=�3>42><
�DBC><�=>C4�>=�C74�2;84=C��4=40=�;028=80�1814=3D<�=D;;0�B43�2>=B42C4CDA��DB24�30?81DB��C4;;DB�02�2DABDB�2><<>3>J
�>=3�=0<4 ���!�� � ������ ��� �������������
*H<1>; (D0=C8CH.4867C -0;D4%0<4 �70=64
�BB4C�2;0BB�=0<4 ���� � ���������� ����
'A>3D2C�%0<4��
�BB4C�?>AC5>;8>
��)8B:�?A>58;4�D?30C4
*4;42C43�?A>3D2C�'A>3D2C�%0<4���D?30C4
�38C
�DBC>380=
�8=0=280;�!=BC8CDC8>=� �8=0=280;�!=BC8CDC8>=���8=0=280;�!=BC8CDC8>=���8=0=280;�!=BC8CDC8>=��
�33�2DBC>380=
$0A� �)8B:�@D4BC8>==08A4�C0:4=�41� ��'>AC5>;8>�<>34;�0BB86=<4=C
+A0=B02C8>=� 8BC>AH
�38C��4C08;��%4F��;84=C�
,?30C4�A8B:�?A>58;4
*4;42C�?A>3D2C
�33�2DBC>380=
)4<>E4��8=0=280;�!=BC8CDC8>=��� )4<>E4
*0E4
&E4A�F70C�?4A8>3�>5�C8<4�F8;;�H>D�8=E4BC�C>�02784E4�H>DA�6>0;��>A�4G0<?;4��85�H>D�?;0=�C>�A4C8A4�8=�58E4�H40AB�0=3�1468=�F8C73A0F8=6�<>=4H�5A><�H>DA�?>AC5>;8>�0C�C70C�C8<4��H>DA�C8<4�7>A8I>=�8B�=>C�9DBC�58E4�H40AB��1DC�A0C74A�C74�=D<14A�>5�H40AB�H>D�?;0=�C>�14�8=�A4C8A4<4=C�05C4A�58E4�H40AB
K��H40AB
�0=24;
%4F�2;84=C
%4F�2;84=C
�;84=C��4C08;���;40=�
=�0)8B:�?A>58;4�D?30C4
*4;42C43�?A>3D2C�=�0�D?30C4
�38C
�DBC>380=B �33�2DBC>380=
';40B4�64=4A0C4�0�A8B:�?A>58;4�0=3�B4;42C�0�?A>3D2C�
+A0=B02C8>=� 8BC>AH
$0A� ��;84=C�2A40C43
�����
� � 'A>3D2C�%0<4���K ��
'A>3D2C�%0<4���K��
*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C
<>A4�34C08;B
*4;42C
'A>3D2C�%0<4���K��
'A>3D2C�%0<4���K��
'A>3D2C�%0<4�� K��
/>DA�A8B:�?A>58;4
��
�0=24; *40A27
�DBC>380=� $H�10=:�=0<4
*40A27�2DBC>380=
#>68=�C>�2DBC>380=
�<08;� 90=4�3>42><
#>68=
$H�10=:�=0<4�;>68=
'0BBF>A3� �������
�02:
�22>D=C�B4;42C8>=
�33
*4;42C�022>D=CB
�0=24;
�22>D=C�=0<4�=D<14A �� ��� ������
-0;D4�22>D=C
*C>2:�BH<1>; *40A27�/07>>��8=0=24
*C>2:�BH<1>; *40A27�/07>>��8=0=24
$0A:4C�)4BD;C
#>6>DC
$0A:4CB
'A>3D2CB
%4FB
�;84=CB
#>6>
"0=4��>4
�0B71>0A3 #>6>
�;84=CB #>6> %4FB #>6> 'A>3D2CB #>6> $0A:4CB #>6>
�;84=CB���">7=��>4 #>6> %4FB���%4FB�!C4<�=0<4 #>6> 'A>3D2CB���'A>3D2C�%0<4 #>6> $0A:4CB #>6>
�;84=CB���">7=��>4 #>6>
�;84=CB���">7=��>4���)8B:�?A>58;8=6 #>6>
�;84=CB���">7=��>4���*4;42C�?A>3D2C #>6>
'A>3D2C��4C08;
�����E4A6A44=�+4AA024�;>2:����*?A8=6584;3���#
�� +F #8
�0=24; *0E4
%0<4� ">7=��>4
><4� � ���������
�<08;� 9>7=�3>42><
,?;>03�=4F�8<064
�DBC><�=>C4�>=�C74�2;84=C��4=40=�;028=80�1814=3D<�=D;;0�B43�2>=B42C4CDA��DB24�30?81DB��C4;;DB�02�2DABDB�2><<>3>J
�><<4=C�
'7>C>�
�4;;� � ���������
�33A4BB� �����E4A6A44=�+4AA024�;>2:����
�8CH� *?A8=6584;3
*C0C4� �;>A830
�0241>>:� 4=C4A�,)#
+F8CC4A� 4=C4A�,)#
#8=:43!=� 4=C4A�,)#
�38C��4C08;��%4F��;84=C�
�38C��4C08;��%4F��;84=C�
=4F
�;84=C��4C08;
�;84=C��4C08;
�;84=C��4C08;�0=24;
4. NAVIGATION ARCHITECTURE
T&C Page
About Page
Privacy Policy Page
FAQ PageFooter
Header
App Page
Login Overlay
Signup Overlay
Retrieve Overlay
1: email changed
Settings Page
Delete Account Overlay
Change Password Over-lay
Reminder Settings Over-lay
Change Email Overlay
Share on Twitter
Share on Facebook
Share on e-Mail
2: password changed
3: password not changed
4: password sent
5: activate account
6: set up logging
7: too little data
8: mail settings changed
9: account deleted
10: advice shared
Header
logout
Home Page(not logged in)
Curriculum Pagelogged
in
Skill Pagelogged
in
logged in
Advice Pagelogged
inGame Page
logged in
Home Page(logged in)
Wolfgang Maehr2017 Portfolio
1. UI FRAMEWORK
������
�����
���� ��� ��!�������!���
������ �����!
��!�����������
���"�!���!���
! ;"
��!��
���"�!����������!��
"
#
4
;
4
"
�����
;
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
"
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!�� "
��"��������!
#
4
%
���"�!������
�����
;
"
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!�� "
#
4
;
4
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!����"�
��!��
���"�!����������!��
#
4
"
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
�����
��!��
���"�!����������!��
��!��������!��
#
4
������
!"
������
!"
�����
���"!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!��������!��
��!��������!��
��!��������!��
l ����
l ��!����"�
l ��!����"�
���"�!���!���
���"�!���!���
��!�������!���
l ����
l ��!����"�
���"�!���!�����!�������!���
���"�!���!���
��!�������!���
��!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
������ �����!
�����
��!��
���"�!����������!��
��!�������������!�����������
�����
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��"��������!
��"��������!
�����������
��!��
������
!"
���"�!����������!��
���"�!����������!��
��!��������������!��
��!��������������!��
����� "
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
����
��!��
;
4
"
����� "
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!�������!���
���"�!���!���
�����
;
"
;
4
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!�������!���
��!��
l ����
������ �����!
�����
��!��
���"�!����������!��
�����
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
���"�!����������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
��!��������������!��
������ �����!
�����
��!��
�����
��!��
��!��������!��
��!��������!��
��!��������!��
��!��������!����!�����������
���!����!�����������
���!��
��!��������������!��
��!��������������!��
Banners
Products
Articles
<Topic> Content
<Topic> Content
<Topic> Content
Products
Articles
Articles
"
BannersAll Collection4
<Topic> ContentAll Collection4
ArticlesAll Collection4
ProductsAll Collection4
�������!���������!��!"��
Product A# Product B#
Product X#Product C#
Article 1;Article 2;
Article n;Article 3;
%
About us;
Link to Blogl
Link to Cataloguel
Header"
Footer"
Banner: shows some products & articles; link to articles
Header: Logo/home, Catalogue, Blog, About Us
Products: show 4–6 random products; link to product details; link to full catalogue below
Articles: show 4–6 random products; link to article; link to full blog below
Article: shows article
Related products: collection of products connected to the article
Comments: Allow visitors to comment and reply. No uploads or embeds…
Product: shows product details
Buy button: links to shopping cart
Related products: collection of products connected to the product
Related articles: collection of articles connected to the product
Full list of products
Full list of articles
Article
Articles: show 4–6 random products; link to article; link to full blog below
Products
Mobile: alternative, more compact visualisationTablet: Similar/same visualisation as on desktop
Articles
Mobile: alternative, more compact visualisationTablet: Similar/same visualisation as on desktop
- Product Collection: holds all products- Article Collection: holds all articles- Banners: holds all articles/products that appear in the banner- Topic Collections:
- topic article collections hold all articles belonging to a topic- topic product collections hold all articles belonging to a topic
- Advice forum/chat- Sharing of articles and products- Banners
"!"����#!�� ���
2
If we need custom product and article visualisers, these topic collections for now need to be split into two collections each.
$% & '
2 2Sharing: Not possible if the return page shall be at the
Sharing: not feasibleProduct:
- custom visualisation- custom schema: requires shell to be able to create and edit items
Share buttons are not available as I cannot create share links…
For now only random is possible
- Carousel to be extended to support article- Tunnelling out may have issues
Currently to be done by linking explicitly
product cannot be created from
shell if custom schema
UI & Visual Design
Traditionally the focus of design efforts, the visual and UI design is the icing on the digital products.
Frankly, as my visual design skills are comparatively weak, my focus is on clear information structure and clean design.
Challenges – Communicating information based on
it’s importance
– Balancing a visual language across different surfaces
– Aesthetics
Strategies – Visual design frameworks and
modules reused across the products
– Striving for minimalism
Examples 1. Aesthetic Essentials: Online shop (2014)
2. Gumbuya: Analytics dashboard (2015)
3. Compliance platform (2015–2016)
4. Spuul: Movie streaming web site (2012)
5. GiveBlood: Blood donation app (2012)
UI & VISUAL DESIGN — 1
2. UI MOCKUP
Wolfgang Maehr2017 Portfolio
UI & Visual DesignUI & VISUAL DESIGN — 3
3. VISUAL FRAMEWORK
Gumbuya Confidential: poseidon-ui_mockups_screening-v0.5.graffle — 2016-01-06
https://trident.oceanix.io
TRIDENT GROUP Merinda MillerINTERNAL AUDITOR !"# $
TASKS
Trident » Trident Asia
Archive organization
The Trident mother organisation (this text is a two-line description)
Contact: Deepika RadhakrishnanParent Org: Trident
Initial: A %
in 6d Q2 2015: Quarterly Compliance Report will be compiled soon. Send reminder&
15m ago Dizzy Dionysus was filed. Read and assign'
4mo ago Chirpy Chronos is assigned to you and unresolved. Snooze or Resolve'
2d ago 2015 Annual Training #2 should be completed. Deepika is marking attendance(
1w ago 28 employees did not complete Asian Hiring Laws 101. Send reminder)
1w ago 217 consumers are failing in compliance. Send reminder*
2w ago 9 new certifications were made available to your Consumers by YouComply. Mike is assigning certifications+o
3w ago Aug 2015: Compliance and Legal Update has a low open rate. Send reminder,
3mo ago Q1 2015: Quarterly Compliance Report is ready. View now&
5mo ago 7 consumers did not attend 2015 Annual Training #1. Schedule training-
Reports & History&
Whistleblower Issues'1
Sub-Organizations.
Groups/
Consumers#
Trident Asia
72% (-10%)Overall Compliance
100%Face-to-Face Training
92% (+12%)Online Certifications
56%Bulletin Read Quota
Bulletins Sent5254Whistleblower Issue1
COMPLIANCE OVERVIEW EDUCATION BULLETINS
4d ago Acme Inc. screening completed with warnings.0 Review report
4d ago Juan Monterola was detected for suspected misconduct.1 Investigate
Overview"
Face-to-Face Trainings(
Online Certifications)
Bulletins,
Screening Requests2
5. WIREFRAME + UI DESIGN
Date Yesterday, September 22, 2011Location The Apollo Clinic, Jyoti Nivas
College Rd, Bengaluru, IndiaBlood AB-Ref IN-KA-BGL-XY02643-ZStatus In need
Requests (3/17)Back
Pledge Blood
4. SCREEN WIREFRAME
�� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� ��
Spuul Wireframes v.0.1 by Extra ThoughtConfidentialCD2: ClipD Resume (fp)
������� � �����
������ ������� ������� �������������
����� ���� ��������
����� � ��� ��
� ����»���� ��»���������
���� �������������������������������
������������!�����������
�������������������������
�������������������� �����������
���!���� �������������
� ������ ���� ����������
���������������� �������������������� �������������
���������
����
#,3�'%2�*35+)7�7,)�6)26%7-32�'5)%7)(�&<�7,)�%:%5(�:-22-2+�281&)5���,30-�/)��))',',)���#-7,�1)03(-)6�73�53'/�7,)�186-'�-2(8675<�%2(�%8(-)2')6�%0-/)���������$���&538+,7�&%'/�'53:(6�73�'-2)1%�,%006��
!,)�139-)�*3003:6�7,)�5)'/0)66�',%6)�3*��%008��%05%1�� %2.%<��877���%�<382+�7)5535-67�:,3�)6'%4)6�*531�.%-0��'%86-2+�18',�(-675)66�73�,-6�.%-035��6)2-35�430-')1%2���%1���%'/-)� ,53**����2�35()5�73�,)04�,-1�'%7',�7,)�9-00%-2���%1�6�*-%2')��%2+%���%(,85-��-;-7��.3-26��%008�6�+%2+�,34-2+�73�085)�,-1�&%'/�-273�'8673(<���%008�5)%0-6)6�,)5�758)�-()27-7<�%2(�6)76�387�73�86)�,)5�73�,-6�3:2�%(9%27%+)���2�7,)�453')66�,)�*%006�-2�039)�:-7,��%2+%�237�/23:-2+�:,%7�0-)6�%,)%(…
"-):6� ���
�'7356� %2.%<��877���%(,85-��-;-7���%'/-)� ,53**���284%1��,)5���%/,))��80=%5���5%13(��87,8���������%2+%0���))2%��847%���0-��6+%5
�-5)'735� 8&,%6,��,%-#5-7)5� 8&,%6,��,%-���%1��)0/%5���%10)6,��%2()<
�%2+8%+)� �-2(- 8&7-70)6� �2+0-6,���-2(-��!%1-0�� 4%2-6,���5)2',���%22%(%���8.%5%7-���82.%&-��
�%0%<%0%1���)51%2���7%0-%2
�-/)6� ���
!%+6� �'7-32$)%5� � �)2+7,� ,���1!<4)�� �5))
����� ���
�����������������
�� ���� ����� !��#
��������������������������������� �������!
��������������������������������������������������
����������������������
������������������� �������� ������!�������m Ipsum…�������� �������!
����� ������������������ ��������! ����!
�����������
�������� � ������
������
���"��
����������
�������"��
�������������������������������������…
���"��
��������������������…����� �������� ������…
���"��
������������������…
�������"��
��������������������…����� �������� ������…
������"�������������������"��� ������������� ���� � �����������������������!���
��������
��������������������������������
��������
����������� ������
��������
������������������…
�������������������� 1 2 3 4 5
��������
����������
A
B CD
Wolfgang Maehr2017 Portfolio
Other Samples
Wolfgang Maehr2017 Portfolio
Appyzoo’s StickeryEDUCATIONAL GAME FOR KIDS: PARENT ZONE — UI DESIGN (2012)
Spielsprache Wählen
Englishen
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
Españoles Descargar
中国zh 下�
Françaisfr Télécharger
Deutschde Laden
日本jp ダウンロード
Free AccountSkip Signup
More information at http://parents.stickeryapp.com.
Email [email protected]
Password minimum 8 characters
By signing up, you agree to ourterms of service.
Female Male Birthday2008-01-01
Your child's details:
We do not share your child's detailswith third parties.
OPTIONAL
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.
Parent ZoneStickery Logout
Progress Reports Parent Guide
Reset Game
More information at http://parents.stickeryapp.com.
Language: English
Feedback Forum
Share Stickery with Your Friends
Credits
Get the Full Game
Reset Game?The story will restart. Your progress reports
will not be affected.
Cancel Reset
Wolfgang Maehr2017 Portfolio
Opera DragonflyWEB DEVELOPMENT TOOLS — UI FRAMEWORK & CONCEPTS (2008)
contents
padding
border
margin collapsed
2px
2em
2px
–2em9999px
1em
1em
1px
-1024px
–
4px
20%
52ex
0px
–
1280px
9600em contents
padding
border
margin
2px
2em
2px
–2em
1em
1em
1px
-1024px
–
4px
20%
52ex
0px
–
1280px
9600em
collapsed
contents
padding
border
margin
2px
2em
2px
–2em9999px
1em
1em
1px
-1024px
–
4px
20%
52ex
0px
–
1280px
9600em
guan. M
a dip is
lja fac
baseline
line-height:145%
descender
font size:medium
ascender
word-spacing:2em
guan. M
a dip is
lja fac
c
p
bm
2px
2em
2px
–2em999px
1em
1px
–
1em
Standard block element Margin collapsed block element (inverted highlight) Border collapsed block element (inverted highlight)
Standard inline element. Inline element with typographic information.
Wolfgang Maehr2017 Portfolio
Opera Mobile BrowserMOBILE BROWSER — INTERACTION CONCEPTS (2006)
Lorem Ipsum
Aliquam
Consequat, magna eu auctor dignissim, elit nibh pharetra tellus, nec suscipit nunc pede non tortor. 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.
Pellentesque velit ligula, viverra in.
Donec est. Mauris scelerisque, ipsum sed dapibus aliquam, sem felis accumsan ante, nec egestas tortor pede non velit. Vestibulum nec mauris. Pellentesque vel dui. 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 sagittis adipiscing, mi felis blandit mi, et congue lacus ante vel tellus. Maecenas vehicula. Morbi et velit. Sed in nunc et massa iaculis accumsan.
A e n e a n o r c i o r c i , venenatis.
Praesent tincidunt lobortis nisi. Aenean nisl risus, c o n d i m e n t u m i d , vestibulum sed, mattis eu, elit. Nulla scelerisque, n e q u e v e l g r a v i d a t incidunt, augue nibh scelerisque tortor, non ultrices nunc mauris nec nibh. Quisque neque enim, feugiat nec, dapibus eget, dictum nec, lorem. Aenean lectus diam, dignissim nonummy, accumsan vel, fermentum eu, nul la . M a u r i s e r o s v e l i t , c o m m o d o n o n , pellentesque at, tristique in, turpis. Nullam purus.
2006-09-15
Lorem ipsum dolor sit amet
Vivamus suscipit, sem ac
gravida porttitor, sem felis
e l e i f e n d l a c u s , a t
consectetuer pede enim eu
urna. Praesent et nibh. Sed
euismod orci nec mauris
elementum lobortis. Nulla
eu neque eu lectus sodales
adipiscing. Suspendisse
velit.
Pede eu elit
Praesent sit amet
Fermentum
Nulla bibendum
Velit et massa
Curabitur
Scelerisque eros
Vel dui. Quisque
Molestie egestas
Mauris fusce
Semper enim et
Arcu vestibulum
Tristique dictum
Magna
Pellentesque
Mauris leoQuisque tempor erat vel
urna. Vestibulum justo
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Suspendisse dignissim
venenatis quam. Sed id
lacus. Proin auctor
rhoncus turpis.
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
a c c u m s a n , l e c t u s n e c
pharetra convallis, pede odio
ullamcorper elit, sit amet
suscipit nulla ligula nec
lectus. Proin pharetra felis
quis felis. Maecenas fringilla
o d i o a t e r a t . V i v a m u s
suscipit, sem ac gravida
porttitor, sem felis eleifend
lacus, at consectetuer pede
enim eu urna.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Donec mauris
tellus, venenatis
eu, laoreet eget,
a l iquam nec,
dolor. Ut eget
quam ac dui
ornare feugiat.
A e n e a n
placerat. Cum
sociis natoque
p e n a t i b u s e t
m a g n i s d i s
p a r t u r i e n t
m o n t e s ,
n a s c e t u r
ridiculus mus.
P h a s e l l u s
faucibus nunc
non felis. Proin
n e q u e . N a m
lacus. Aliquam
vehicula arcu.
Vestibulum ut
urna quis tortor
ultrices lacinia.
Vestibulum at
m i e u o r c i
a l i q u a m
dignissim. Ut
v i v e r r a
adipiscing nibh.
Ut interdum.
Aenean ligula
l i b e r o ,
bibendum eget,
scelerisque et,
v e h i c u l a s i t
amet, sapien.
tellus, venenatis eu, laoreet
eget, aliquam nec, dolor. Ut
eget quam ac dui ornare
feugiat. Aenean placerat.
C u m s o c i i s n a t o q u e
penatibus et magnis dis
parturient montes, nascetur
ridiculus mus. Phasellus
faucibus nunc non felis.
Proin neque. Nam lacus.
Aliquam vehicula arcu.
Vestibulum ut urna quis
tortor u l tr ices lac inia .
Vestibulum at mi eu orci
a l i q u a m d i g n i s s i m . U t
viverra adipiscing nibh. Ut
interdum. Aenean ligula
l ibero, bibendum eget ,
scelerisque et, vehicula sit
amet, sapien.
Sed at nulla sit amet justo
volutpat consequat. Nam
quam massa, scelerisque sit
amet, condimentum quis,
venenatis eget, dui. Donec
vel purus. Nam porttitor
condimentum velit. Integer
posuere arcu a est. Aliquam
ligula urna, rhoncus non,
sodales ut, sagittis sit amet,
quam. Nunc dui. Vivamus in
quam. Praesent tristique
magna vi tae mi luctus
a c c u m s a n . V e s t i b u l u m
interdum ante quis mi.
Suspendisse tortor orci,
fermentum in, consequat ac,
sollicitudin nec, leo. Donec
sed velit eu mauris hendrerit
elementum. Pellentesque
habitant morbi tristique
s e n e c t u s e t n e t u s e t
malesuada fames ac turpis
egestas. Nullam semper
bibendum odio. Pellentesque
pellentesque nonummy elit.
I n v e h i c u l a t u r p i s
condimentum massa.
Mobile
Lorem Ipsum
Aliquam
Consequat, magna eu auctor dignissim, elit nibh pharetra tellus, nec suscipit nunc pede non tortor. 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.
Pellentesque velit ligula, viverra in.
Donec est. Mauris scelerisque, ipsum sed dapibus aliquam, sem felis accumsan ante, nec egestas tortor pede non velit. Vestibulum nec mauris. Pellentesque vel dui. 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 sagittis adipiscing, mi felis blandit mi, et congue lacus ante vel tellus. Maecenas vehicula. Morbi et velit. Sed in nunc et massa iaculis accumsan.
A e n e a n o r c i o r c i , venenatis.
Praesent tincidunt lobortis nisi. Aenean nisl risus, c o n d i m e n t u m i d , vestibulum sed, mattis eu, elit. Nulla scelerisque, n e q u e v e l g r a v i d a t incidunt, augue nibh scelerisque tortor, non ultrices nunc mauris nec nibh. Quisque neque enim, feugiat nec, dapibus eget, dictum nec, lorem. Aenean lectus diam, dignissim nonummy, accumsan vel, fermentum eu, nul la . M a u r i s e r o s v e l i t , c o m m o d o n o n , pellentesque at, tristique in, turpis. Nullam purus.
2006-09-15
Lorem ipsum dolor sit amet
Vivamus suscipit, sem ac
gravida porttitor, sem felis
e l e i f e n d l a c u s , a t
consectetuer pede enim eu
urna. Praesent et nibh. Sed
euismod orci nec mauris
elementum lobortis. Nulla
eu neque eu lectus sodales
adipiscing. Suspendisse
velit.
Pede eu elit
Praesent sit amet
Fermentum
Nulla bibendum
Velit et massa
Curabitur
Scelerisque eros
Vel dui. Quisque
Molestie egestas
Mauris fusce
Semper enim et
Arcu vestibulum
Tristique dictum
Magna
Pellentesque
Mauris leoQuisque tempor erat vel
urna. Vestibulum justo
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Suspendisse dignissim
venenatis quam. Sed id
lacus. Proin auctor
rhoncus turpis.
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
a c c u m s a n , l e c t u s n e c
pharetra convallis, pede odio
ullamcorper elit, sit amet
suscipit nulla ligula nec
lectus. Proin pharetra felis
quis felis. Maecenas fringilla
o d i o a t e r a t . V i v a m u s
suscipit, sem ac gravida
porttitor, sem felis eleifend
lacus, at consectetuer pede
enim eu urna.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Donec mauris
tellus, venenatis
eu, laoreet eget,
a l iquam nec,
dolor. Ut eget
quam ac dui
ornare feugiat.
A e n e a n
placerat. Cum
sociis natoque
p e n a t i b u s e t
m a g n i s d i s
p a r t u r i e n t
m o n t e s ,
n a s c e t u r
ridiculus mus.
P h a s e l l u s
faucibus nunc
non felis. Proin
n e q u e . N a m
lacus. Aliquam
vehicula arcu.
Vestibulum ut
urna quis tortor
ultrices lacinia.
Vestibulum at
m i e u o r c i
a l i q u a m
dignissim. Ut
v i v e r r a
adipiscing nibh.
Ut interdum.
Aenean ligula
l i b e r o ,
bibendum eget,
scelerisque et,
v e h i c u l a s i t
amet, sapien.
tellus, venenatis eu, laoreet
eget, aliquam nec, dolor. Ut
eget quam ac dui ornare
feugiat. Aenean placerat.
C u m s o c i i s n a t o q u e
penatibus et magnis dis
parturient montes, nascetur
ridiculus mus. Phasellus
faucibus nunc non felis.
Proin neque. Nam lacus.
Aliquam vehicula arcu.
Vestibulum ut urna quis
tortor u l tr ices lac inia .
Vestibulum at mi eu orci
a l i q u a m d i g n i s s i m . U t
viverra adipiscing nibh. Ut
interdum. Aenean ligula
l ibero, bibendum eget ,
scelerisque et, vehicula sit
amet, sapien.
Sed at nulla sit amet justo
volutpat consequat. Nam
quam massa, scelerisque sit
amet, condimentum quis,
venenatis eget, dui. Donec
vel purus. Nam porttitor
condimentum velit. Integer
posuere arcu a est. Aliquam
ligula urna, rhoncus non,
sodales ut, sagittis sit amet,
quam. Nunc dui. Vivamus in
quam. Praesent tristique
magna vi tae mi luctus
a c c u m s a n . V e s t i b u l u m
interdum ante quis mi.
Suspendisse tortor orci,
fermentum in, consequat ac,
sollicitudin nec, leo. Donec
sed velit eu mauris hendrerit
elementum. Pellentesque
habitant morbi tristique
s e n e c t u s e t n e t u s e t
malesuada fames ac turpis
egestas. Nullam semper
bibendum odio. Pellentesque
pellentesque nonummy elit.
I n v e h i c u l a t u r p i s
condimentum massa.
Lorem Ipsum
Aliquam
Consequat, magna eu auctor dignissim, elit nibh pharetra tellus, nec suscipit nunc pede non tortor. 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.
Pellentesque velit ligula, viverra in.
Donec est. Mauris scelerisque, ipsum sed dapibus aliquam, sem felis accumsan ante, nec egestas tortor pede non velit. Vestibulum nec mauris. Pellentesque vel dui. 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 sagittis adipiscing, mi felis blandit mi, et congue lacus ante vel tellus. Maecenas vehicula. Morbi et velit. Sed in nunc et massa iaculis accumsan.
A e n e a n o r c i o r c i , venenatis.
Praesent tincidunt lobortis nisi. Aenean nisl risus, c o n d i m e n t u m i d , vestibulum sed, mattis eu, elit. Nulla scelerisque, n e q u e v e l g r a v i d a t incidunt, augue nibh scelerisque tortor, non ultrices nunc mauris nec nibh. Quisque neque enim, feugiat nec, dapibus eget, dictum nec, lorem. Aenean lectus diam, dignissim nonummy, accumsan vel, fermentum eu, nul la . M a u r i s e r o s v e l i t , c o m m o d o n o n , pellentesque at, tristique in, turpis. Nullam purus.
2006-09-15
Lorem ipsum dolor sit amet
Vivamus suscipit, sem ac
gravida porttitor, sem felis
e l e i f e n d l a c u s , a t
consectetuer pede enim eu
urna. Praesent et nibh. Sed
euismod orci nec mauris
elementum lobortis. Nulla
eu neque eu lectus sodales
adipiscing. Suspendisse
velit.
Pede eu elit
Praesent sit amet
Fermentum
Nulla bibendum
Velit et massa
Curabitur
Scelerisque eros
Vel dui. Quisque
Molestie egestas
Mauris fusce
Semper enim et
Arcu vestibulum
Tristique dictum
Magna
Pellentesque
Mauris leoQuisque tempor erat vel
urna. Vestibulum justo
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Suspendisse dignissim
venenatis quam. Sed id
lacus. Proin auctor
rhoncus turpis.
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
a c c u m s a n , l e c t u s n e c
pharetra convallis, pede odio
ullamcorper elit, sit amet
suscipit nulla ligula nec
lectus. Proin pharetra felis
quis felis. Maecenas fringilla
o d i o a t e r a t . V i v a m u s
suscipit, sem ac gravida
porttitor, sem felis eleifend
lacus, at consectetuer pede
enim eu urna.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Donec mauris
tellus, venenatis
eu, laoreet eget,
a l iquam nec,
dolor. Ut eget
quam ac dui
ornare feugiat.
A e n e a n
placerat. Cum
sociis natoque
p e n a t i b u s e t
m a g n i s d i s
p a r t u r i e n t
m o n t e s ,
n a s c e t u r
ridiculus mus.
P h a s e l l u s
faucibus nunc
non felis. Proin
n e q u e . N a m
lacus. Aliquam
vehicula arcu.
Vestibulum ut
urna quis tortor
ultrices lacinia.
Vestibulum at
m i e u o r c i
a l i q u a m
dignissim. Ut
v i v e r r a
adipiscing nibh.
Ut interdum.
Aenean ligula
l i b e r o ,
bibendum eget,
scelerisque et,
v e h i c u l a s i t
amet, sapien.
tellus, venenatis eu, laoreet
eget, aliquam nec, dolor. Ut
eget quam ac dui ornare
feugiat. Aenean placerat.
C u m s o c i i s n a t o q u e
penatibus et magnis dis
parturient montes, nascetur
ridiculus mus. Phasellus
faucibus nunc non felis.
Proin neque. Nam lacus.
Aliquam vehicula arcu.
Vestibulum ut urna quis
tortor u l tr ices lac inia .
Vestibulum at mi eu orci
a l i q u a m d i g n i s s i m . U t
viverra adipiscing nibh. Ut
interdum. Aenean ligula
l ibero, bibendum eget ,
scelerisque et, vehicula sit
amet, sapien.
Sed at nulla sit amet justo
volutpat consequat. Nam
quam massa, scelerisque sit
amet, condimentum quis,
venenatis eget, dui. Donec
vel purus. Nam porttitor
condimentum velit. Integer
posuere arcu a est. Aliquam
ligula urna, rhoncus non,
sodales ut, sagittis sit amet,
quam. Nunc dui. Vivamus in
quam. Praesent tristique
magna vi tae mi luctus
a c c u m s a n . V e s t i b u l u m
interdum ante quis mi.
Suspendisse tortor orci,
fermentum in, consequat ac,
sollicitudin nec, leo. Donec
sed velit eu mauris hendrerit
elementum. Pellentesque
habitant morbi tristique
s e n e c t u s e t n e t u s e t
malesuada fames ac turpis
egestas. Nullam semper
bibendum odio. Pellentesque
pellentesque nonummy elit.
I n v e h i c u l a t u r p i s
condimentum massa.
Lorem Ipsum 2
Aliquam
Consequat, magna eu auctor dignissim, elit nibh pharetra tellus, nec suscipit nunc pede non tortor. 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.
Pellentesque velit ligula, viverra in.
Donec est. Mauris scelerisque, ipsum sed dapibus aliquam, sem felis accumsan ante, nec egestas tortor pede non velit. Vestibulum nec mauris. Pellentesque vel dui. 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 sagittis adipiscing, mi felis blandit mi, et congue lacus ante vel tellus. Maecenas vehicula. Morbi et velit. Sed in nunc et massa iaculis accumsan.
A e n e a n o r c i o r c i , venenatis.
Praesent tincidunt lobortis nisi. Aenean nisl risus, c o n d i m e n t u m i d , vestibulum sed, mattis eu, elit. Nulla scelerisque, n e q u e v e l g r a v i d a t incidunt, augue nibh scelerisque tortor, non ultrices nunc mauris nec nibh. Quisque neque enim, feugiat nec, dapibus eget, dictum nec, lorem. Aenean lectus diam, dignissim nonummy, accumsan vel, fermentum eu, nul la . M a u r i s e r o s v e l i t , c o m m o d o n o n , pellentesque at, tristique in, turpis. Nullam purus.
2006-09-15
Vestibulum tincidunt
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
accumsan, lectus nec
pharetra convallis, pede
odio ullamcorper elit, sit
amet suscipit nulla
ligula nec lectus. Proin
pharetra felis quis felis.
Maecenas fringilla odio
at erat. Vivamus
suscipit, sem ac gravida
porttitor, sem felis
eleifend lacus, at
consectetuer pede enim
eu urna.
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
accumsan, lectus nec
pharetra convallis, pede
odio ullamcorper elit, sit
amet suscipit nulla
ligula nec lectus. Proin
pharetra felis quis felis.
Maecenas fringilla odio
at erat.
Quisque tempor erat vel
urna. Vestibulum justo
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Suspendisse dignissim
venenatis quam. Sed id
lacus. Proin auctor
rhoncus turpis.
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 mauris
tellus, venenatis
eu, laoreet eget,
ali nec, dolor.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Ut eget quam
ac dui ornare
feugiat. Aenean
placerat. Cum
sociis natoque
penatibus et
magnis dis.
Phasellus
faucibus nunc
non felis. Proin
neque. Nam
lacus. Aliquam
vehicula arcu.
Neque iactat
Pede eu elit
Praesent sit ametFermentum
Nulla bibendum
Velit et massa
Curabitur
Scelerisque eros
Vel dui. Quisque
Molestie egestas
Mauris fusce
Semper enim et
Arcu vestibulum
Tristique dictum
Magna
Pellentesque
Mauris leo
Vestibulum tincidunt
Donc mores
Lorem Ipsum 2
Aliquam
Consequat, magna eu auctor dignissim, elit nibh pharetra tellus, nec suscipit nunc pede non tortor. 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.
Pellentesque velit ligula, viverra in.
Donec est. Mauris scelerisque, ipsum sed dapibus aliquam, sem felis accumsan ante, nec egestas tortor pede non velit. Vestibulum nec mauris. Pellentesque vel dui. 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 sagittis adipiscing, mi felis blandit mi, et congue lacus ante vel tellus. Maecenas vehicula. Morbi et velit. Sed in nunc et massa iaculis accumsan.
A e n e a n o r c i o r c i , venenatis.
Praesent tincidunt lobortis nisi. Aenean nisl risus, c o n d i m e n t u m i d , vestibulum sed, mattis eu, elit. Nulla scelerisque, n e q u e v e l g r a v i d a t incidunt, augue nibh scelerisque tortor, non ultrices nunc mauris nec nibh. Quisque neque enim, feugiat nec, dapibus eget, dictum nec, lorem. Aenean lectus diam, dignissim nonummy, accumsan vel, fermentum eu, nul la . M a u r i s e r o s v e l i t , c o m m o d o n o n , pellentesque at, tristique in, turpis. Nullam purus.
2006-09-15
Vestibulum tincidunt
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
accumsan, lectus nec
pharetra convallis, pede
odio ullamcorper elit, sit
amet suscipit nulla
ligula nec lectus. Proin
pharetra felis quis felis.
Maecenas fringilla odio
at erat. Vivamus
suscipit, sem ac gravida
porttitor, sem felis
eleifend lacus, at
consectetuer pede enim
eu urna.
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
accumsan, lectus nec
pharetra convallis, pede
odio ullamcorper elit, sit
amet suscipit nulla
ligula nec lectus. Proin
pharetra felis quis felis.
Maecenas fringilla odio
at erat.
Quisque tempor erat vel
urna. Vestibulum justo
mi, lobortis sed,
fermentum et, tristique
ut, enim.
Suspendisse dignissim
venenatis quam. Sed id
lacus. Proin auctor
rhoncus turpis.
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 mauris
tellus, venenatis
eu, laoreet eget,
ali nec, dolor.
Ut et odio id
sapien pretium
convallis. Sed
vitae mauris.
Ut eget quam
ac dui ornare
feugiat. Aenean
placerat. Cum
sociis natoque
penatibus et
magnis dis.
Phasellus
faucibus nunc
non felis. Proin
neque. Nam
lacus. Aliquam
vehicula arcu.
Neque iactat
Pede eu elit
Praesent sit ametFermentum
Nulla bibendum
Velit et massa
Curabitur
Scelerisque eros
Vel dui. Quisque
Molestie egestas
Mauris fusce
Semper enim et
Arcu vestibulum
Tristique dictum
Magna
Pellentesque
Mauris leo
Vestibulum tincidunt
Donc mores
scrolling clicking link
zooming in zooming in