Scribd Logo
Upload

Welcome to Scribd!

  • Atomic Design For Android-Emilio Zarraga

    Uploaded by

    Mikhail Yegipko
    80 views28 pages
    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 incorporate templates and define the navigation. 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.

    Original Description:

    Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner

    Original Title

    Atomic Design for Android-Emilio Zarraga

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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 incorporate templates and define the navigation. 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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    80 views28 pages

    Atomic Design For Android-Emilio Zarraga

    Uploaded by

    Mikhail Yegipko
    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 incorporate templates and define the navigation. 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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 28

    Atomic Design for android

    Mobile Day

    Lets 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 Zrraga
    @emiliovirtual

    Atomic Design for Android

    You might also like