Update README.md

README.md

@@ -10,6 +10,22 @@
 
 React implementation of the Marigold Design System built on [Emotion](https://emotion.sh/).
 
+## Installation 🔧
+
+```sh
+# after first release:
+# with npm
+npm install marigold-ui --save
+
+# with yarn
+yarn add marigold-ui
+
+# for now:
+git clone https://github.com/marigold-ui/marigold.git
+cd marigold
+yarn install
+```
+
 ## Usage 💡
 
 Use the styles for your component from a global `theme` object. To provide the theme in context, wrap your component into the `MarigoldProvider`. You can add custom styles via style props.
@@ -25,39 +41,20 @@ import { Text, theme } from '@marigold/components'
 </MarigoldProvider>
 ```
 
-## Documentation 📖
-
-Start your local storybook server via
+## For Developers 
 
-```
-yarn start
-```
+### Setup & Usage
 
-to access the Marigold documentation pages.
-
-## Setup 🔧
-
-```sh
-# after first release:
-# with npm
-npm install marigold-ui --save
-
-# with yarn
-yarn add marigold-ui
-
-# for now:
-git clone https://github.com/marigold-ui/marigold.git
-cd marigold
-yarn install
-```
-
-## For Developers
+Open a terminal and navigate to a folder of your choice. Clone the project `git clone https://github.com/marigold-ui/marigold.git` and navigate to the new folder `cd marigold`. Install the yarn packages using `yarn` command in the root and use `yarn start` to start storybook. Open [localhost:6005](http://localhost:6005) to see the components in storybook. 
+Navigate to the documentation `cd docs` and start the development server `gatsby develop`, which opens the documentation site on [localhost:8000](http://localhost:8000).
+When working on the components, use the following commands for development.
 
 - Coverage: `yarn coverage`
 - Linting: `yarn lint`
 - Test: `yarn test` (with optional `--watch`)
 - Type checking: `yarn typecheck`
 
+
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):