Ribbon Designer

Using the Ribbon Designer is fine for simple ribbons.

Select Project > Add New Item and select Ribbon (Visual Designer)
You can leave the Name as Ribbon1.cs
SS
Press Add
SS

A tab designer will be displayed and a new class called Ribbon1.cs will be added to the project
SS

Select (View > Toolbox) and expand the Office Ribbon Controls
SS

Select the Button control and click on the Ribbon to add a button
Select (View > Properties Window)
Change the ControlSize to Large
SS

Add "HappyFace" to the OfficeImageId
SS

Double click the button
Add the following line of code:

System.Windows.Forms.MessageBox.Show("button1_Click"); 

SS

Build > Build Solution
Debug > Start Debugging
This will launch an instance of Excel and will load the add-in
You should see the Add-Ins tab displayed with the following button.
Clicking on button1 will display the following message
SS

Changing Tab Name

Click on the right hand side of the tab where no controls have been added
The following information will be displayed in the properties window
SS
By default the designer will have a control Id of TabAddIns.
This control id refers to the tab which which is the default for any customised buttons (TabAddIns).
This tab is also the default for any custom UI created in versions of Excel prior to 2007.
Let's change this control id to something else.
Expand the ControlId group
Change the ControlIDtype to custom
Change the OfficeId to myNewTab
Change the Name property to myNewTab
Change the label property to My New Tab
SS

Changing Button Sizes

By default when you add a button control to the designer a small button is added.
You can change the size of your buttons by changing the ControlSize property in the properties window
Use the drop-down and choose RibbonControlSizeLarge
Changing the button sizes to large will mean that the buttons are displayed next to each other rather than on top of one another
SS

Changing Button Image

You can add an image to your buttons by changing the OfficeImageId property of your button
SS

Adding Event Handlers

Double clicking on a control will create the click event handler
You can see which events are available for the different controls by clicking on the Events icon at the top of the Properties window
SS
A Button control shows one event: Click
A CheckBox shows one event: Click
A ComboBox shows two events: ItemsLoading and TextChanged
A DropDown shows three events: ButtonClick, ItemsLoading and SelectionChanged
A EditBox shows one event: TextChanged
A Gallery shows three events: ButtonClick, Click, ItemsLoading
A Group shows one event: DialogLauncherClick
A Menu shows one event: ItemsLoading
A SplitButton shows one event: Click
A ToggleButton shows one event: Click

Creating Groups

If you have a large number of controls or buttons that you want to display it is a good idea to divide them into groups.
Select the Group control on the toolbox and click on the tab
At the bottom of the group is a descriptive name which can be changed from the properties windows
Change the Name property to More Buttons

Hidden XML File

The xml file that corresponds to your ribbon designer is not shown in the solution explorer by default.
If you have added a ribbon designer and want to see the actual XML file, right click on the designer and choose "Export Ribbon to XML"
This will add the ribbon.xml and ribbon.cs files to your project (for reference) This XML file is not linked to the designer.
SS - right click on the ribbon designer

RibbonBase Class

When you add a new Ribbon using the Visual Designer two partial classes are automatically added to your project.
One file contains the event handlers
The other inherits from the Ribbon.RibbonBase class

public class Ribbon1 : Microsoft.Office.Tools.Ribbon.RibbonBase 
{ 
   public Ribbon1() : base(Globals.Factory.GetRibbonFactory()) 
   { 
      InitializeComponent(); 
   } 

   public class ThisRibbonCollection 
   { 
      internal Ribbon1 Ribbon1 
      { 
          get { return this.GetRibbon<Ribbon1>(); } 
      } 
   } 
}