Scribd
Upload
83 views

Atomic Design For Android-Emilio Zarraga PDF

This document discusses Atomic Design for Android applications. It introduces Atomic Design as a methodology composed of five stages: atoms, molecules, organisms, templates and pages. Atoms are the basic building blocks like colors, buttons and icons. Molecules are groups of atoms joined together. Organisms are composed of molecules or other organisms. Templates are made of organisms and define views like a screen's layout. Pages are template views combined with data. The document provides examples of atoms like colors XML and button code. It also discusses tools for design like Sketch and Craft and styleguides like Zeplin and Sympli.

Uploaded by

Fabrice Teche
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

Atomic Design For Android-Emilio Zarraga PDF

This document discusses Atomic Design for Android applications. It introduces Atomic Design as a methodology composed of five stages: atoms, molecules, organisms, templates and pages. Atoms are the basic building blocks like colors, buttons and icons. Molecules are groups of atoms joined together. Organisms are composed of molecules or other organisms. Templates are made of organisms and define views like a screen's layout. Pages are template views combined with data. The document provides examples of atoms like colors XML and button code. It also discusses tools for design like Sketch and Craft and styleguides like Zeplin and Sympli.

Uploaded by

Fabrice Teche
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Atomic Design for android

Mobile Day

Let’s talk about design


A long time ago…

Atomic Design for Android


Mobile Day

What is Atomic Design?

Atomic Design for Android


Mobile Day

“Atomic design is a methodology composed of five distinct


stages working together to create interface design systems
in a more deliberate and hierarchical manner”

- Brad Frost

Atomic Design for Android


Mobile Day

http://atomicdesign.bradfrost.com/chapter-2/
Atomic Design for Android
Mobile Day

http://atomicdesign.bradfrost.com/chapter-2/
Atomic Design for Android
Mobile Day

“Atomic design as a buzzword encapsulates the concepts


of modular design and development”

- Brad Frost

Atomic Design for Android


Mobile Day

Project: Weather App

Atomic Design for Android


Mobile Day

Atoms
Colors
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="Yellow">#DBEAFC</color>
<color name="Blue1">#DBEAFC</color>
<color name="Blue2">#0073c0</color>
<color name="Green1">#05a749</color>
<color name="Green2">#009688</color>
<color name="Red1">#00579E</color>
<color name="White">#FFFFFF</color>
<color name="Gray1">#F9F9F9</color>
<color name="Gray2">#F9F9F9</color>
<color name="Gray3">#DBDBDB</color>
<color name="Gray4">#4A4A4A</color>
<color name="Black">#000000</color>
</resources>

Atomic Design for Android


Mobile Day

Atoms
Inputs

Atomic Design for Android


Mobile Day

Atoms
Buttons

<Button
android:id=”@+id/login_button”
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:background=”@drawable/mybutton”
android:contentDescription=”@string/login”
/>

Atomic Design for Android


Mobile Day

Atoms
Buttons

<?xml version="1.0" encoding="utf-8"?>


<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:drawable="@color/blue1" />
<item android:state_pressed="true"
android:drawable="@color/blue2" />
<item android:state_focused="true"
android:drawable="@color/blue2" />
<item android:drawable="@color/colors" />
</selector>

Atomic Design for Android


Mobile Day

Atoms
Typography

Atomic Design for Android


Mobile Day

Atoms
Typography

Atomic Design for Android


Mobile Day

Atoms
Icons

Atomic Design for Android


Mobile Day

Atoms
Icons

Atomic Design for Android


Mobile Day

Real-world example

Atomic Design for Android


Mobile Day

Atoms

Atomic Design for Android


Mobile Day

Atoms

Atomic Design for Android


Mobile Day

Molecules

Atomic Design for Android


Mobile Day

Organisms

Atomic Design for Android


Mobile Day

Template

Atomic Design for Android


Mobile Day

Pages

Atomic Design for Android


Mobile Day

Tools

Atomic Design for Android


Mobile Day

Tools
Design

Sketch Craft

Styleguides

Zeplin Sympli

Atomic Design for Android


Mobile Day

Bonus Track

Atomic Design for Android


Mobile Day

Atomic Design for Android


Mobile Day

Thank you!

Emilio Zárraga
@emiliovirtual

Atomic Design for Android

You might also like