Website Designs steps in AEM

Website Designs:

------------------------

Websites designs are going to be created under Tools>etc/designs.

All site design components like css,images,js etc. are placed in this location.

http://localhost:4505/miscadmin#/etc/designs

Create a design:

-----------------------

Go to tools> designs and create a new design by selecting your design page template. Put all your css,images etc. files in this design level directories.

Applying design to website

--------------------------------------

Go to side kick>page>pageproperties>Advanced>designs> select required/created designs through above procedure.Save it, so that your website's all pages will have the new design now.

Content components:

Content appearing in side kick are content components.

Need to get your component in your side kick? Have any below items mapped to the component.

Edit config, design dialog, dialogue

Dialogues will have

1) Field label: messaging information about input.

2) xtype:  type of the user interface

3) Name: is responsible for storage mechanism(it will always start with./ if it is used as storage mechanism)

Default Widgets

Adobe has implemented many widgets which can be used. All these can be seen at

/libs/cq/ui/widgets/source/widgets/

Eg: Rich text : /libs/cq/ui/widgets/source/widgets/form/RichText.js

Read More: 
Solr and AEM
JSON for Solr
AEM INTERNALIZATION
Search Persistance
Navigation in AEM

Website design steps in AEM