Digital Media and App Design

1. DESIGN FOR PRODUCTION
SANGEETA JAIN

2. LECTURE 8 DIGITAL MEDIA/APP DESIGN

3. Digital media is content (text, graphics, audio, and video)
that is in digital formats and transmitted over internet or
computer networks.
The digital world includes computers, software, and the
movement and storage of digital information via networks
and storage (hard drives and cloud services).
DIGITAL MEDIA

4. • Digital media has dramatically and dynamically changed the way of
life today, the way we live, work, communicate, share, entertain and
educate ourselves.
• It has also opened up a vast avenue of digital advertising (also
known as online advertising). It is digitally displayed through the
Internet, on smart phone and other hand-held devices.
• Digital media is trans-disciplinary in nature which brings together
digital arts, technology, business strategy, human computer
interaction, design and development in a meaningful and innovative
combination that possibly can cater to a global society.
DIGITAL MEDIA

5. • Digital by default
• Push vs. Pull
– content is "pulled" by the consumer, not "pushed" by the media.
• Convergent
– separate technologies blend together in a common digital denominator.
• Wired, Wireless, Terrestrial and Satellite-based
– configured for a variety of transmission methods.
• Distance Insensitive
– can be assessed from any/every geographical location
• Networked
– connectivity - one-to-many to one-to-some and one-to-one
– real time
– decentralized
• Interactive
– responsive
– personalized - the tailoring of content in real-time on the website
– non-linear
CHARACTERISTICS OF DIGITAL MEDIA

6. • In January 2011, the American Dialect Society named “app” the word of the year
for 2010. Being named word of the year also implies that the word is newly
prominent. We may listen to the radio, read the news and or watch television
shows more and more often on our mobile devices or to be more precise within
an “app”. So…what is an app?
• The word app is a noun, and it’s short for “application.” Application is a software
program…a special type of software program designed to be used online or run
on mobile devices.
• Most mobile devices are sold with several apps bundled as pre-installed
software, such as a web browser, email client, calendar, mapping program and
an app for buying music or other media or more apps. Some pre-installed apps
can be removed by an ordinary uninstall process, thus leaving more storage
space for desired ones. Apps that are not preinstalled are usually available
through distribution platforms called app stores.
WHAT IS AN “APP”

9. • In 2007, Apple Inc. unveiled the Apple iPhone, which was the world's
first advanced touchscreen smartphone. It's the first phone to have
an operating system, the iOS, and by enabling apps to run on the
phone, it had allowed cellphones to become the primary mobile
device of use.
• Apple App Store launched in July 2008, a year after the first iPhone
was released. It had 500 apps and, to many, was a revelation. It also
signaled the dominance of the native mobile application. 10 million
applications were downloaded in the first weekend.
THE FIRST MOBILE APP

10. APP DESIGN

11. Designing an app starts with…
• A thorough understanding of the user
• A list of tasks that the user may often perform
– user scenarios / interaction design / user interaction
• steps the user will take to complete a particular task
• alert and/or error messages to be included
• secure areas to be provided (if required)
• Wireframes
– architecture of the app
– links and labels
– what will go on each page
– how it will all work together
PROCESS OF APP DESIGN

12. The design stage which is also known as the FRONT-END
DESIGN or User Interface Design involves:
• Visual Design
– Logo
– Fonts
– Colors
– Layout
– Styling
– Look and Feel
• In the design phase high-resolution Photoshop files are created that are
mock-ups of what the app will look like.
• Knowledge of operating systems, platforms, screen sizes and
resolutions help to create a functional design.
PROCESS OF APP DESIGN

13. Wireframes
https://www.smashingmagazine.com/2013/06/sketching-for-better-mobile-experiences/

14. • The focus should be on simplicity and functionality.
• The content should take the whole screen.
• Negative space should be user to bring focus to the content.
• Typography needs to be visually pleasing and optimal for reading.
• It is absolutely essential for the user to know where they are or
which section of the app is active. This can be achieved by simply
having 2 states of an icon or 2 different colors on the text links.
*DESIGN TIPS
The grey icon can be used when the page in inactive and blue when it is active.

15. The little red dot under the cup indicates the active section on the navigation

16. • The style, colors and typography should be consistent. Ex: one
consistent color to indicate interactive element.
• Animations such as slide, scale and color transitions must enhance
the user interaction and not distract them.
• Sounds when played, they can transform a mundane action into an
enjoyable experience. People can recognize the app without even
seeing it by its sound however sounds are used minimally in an app.
They need not have a continuous music playing in the background.
• Last but not the least remember: app design is not just about one
static page design (like in print), it's how you connect multiple
screens to create an interactive experience.
*DESIGN TIPS

17. Then comes the process of building the app which is also known as
DEVELOPMENT or BACK-END DESIGN is done by the developer and includes
the following:
• translating the design into a working app
– scripting and coding: building the design
– testing it: usability testing and quality assurance
– making it go “live” or launching the app or distributing it
– social network integration: allowing users to access, publish, share
information
– server-side logic: customizing the user experience
– user management: managing authentication, security and access control
• It helps as a designer to know the basics of development process and/or the
basic terminology used by the developers in order to design effectively and
accurately.
PROCESS OF APP DESIGN

18. SCOPE AND LIMITATIONS
• The benefits of an app are as follows:
– Build a brand:
• Apps provide valuable brand awareness and higher visibility.
– Improve customer engagement:
• Apps give easy access to brands anytime, any place.
– Create a direct marketing channel:
• Apps allow businesses to connect instantly and directly with the customers.
– Reduce cost:
• Apps reduce the cost of papers, newsletters, staff etc. for businesses.
– Real time content:
• Apps can regularly deliver new and targeted updates in real-time thus users
are kept up to date with the latest information and resources available.

19. Simone Eyles
Wagga Wagga is the home of an award-
winning app that allows users to order
coffee from a café with their mobile phone.
Since launching in 2011, the app created
by the startup called 365cups has been
used to place 740,000 orders worth almost
$5 million.
Read more @
http://www.wonnsw.com.au/case-studies/
2016/7/4/simone-eyles

20. Benefits of using mobile apps.
Base: Mobile apps users.
Source: ACMA-commissioned survey, May 2013.

21. SCOPE AND LIMITATIONS
• The limitations of an app are as follows:
– Storage space:
• Since mobile devices has limited amount of storage, it creates limitation in
installing and using apps.
– Privacy and Security:
• When downloading applications, users possibly have to allow the publishers
to track and analyze their actions. This may cause to the loss or abuse of
personal information.
– Connectivity:
• If the internet goes down or is slow the user cannot access the app.
– Distractions:
• It is easy to get distracted with the apps being integrated with social media.

22. • https://en.wikipedia.org/wiki/Mobile_app
• https://en.wikipedia.org/wiki/Digital_media
• http://www.wonnsw.com.au/case-studies/2016/7/4/simone-eyles
RESOURCES