Once the mock ups and Adobe XD designs are complete we are ready to move into WordPress and begin the development process.We follow a similar structure here for each website to streamline the workload and cut back on repetition.
Step 1:
- Create our workspace. By using the cloud hosting system call Cloudways we are able to work on the website without taking the current live version down. This allows for a quick transition once the full site is finished and ready to go live.
Step 2: Upload plugins.
- Once the workspace is created it looks just like a regular WordPress website. We then upload Oxygen Builder which is the system we use for developing our websites. During this time we add any other plugin we think may be necessary for the website to function properly.
Step 3: Assign global colors, typography, and headers.
- These are all already assigned in the Adobe XD so all we have to do is put the inputs in Oxygen Builder. This way whenever we add any text or colors all of the global types are already there.
Step 4: Import media.
- The next step in the process is to upload any media files we have to the site. This includes photos, design models, .pdf files, and any other media file.
Step 5: Create Templates
- Now that the website is built, our plugins added, and all the global elements are added we can start building out the website.
Oxygen Builder allows us to create templates that are then applied to other pages throughout the website. The first template to create is a header and footer that will be applied to our main page. Both the header and footer act as the bun in our website sandwich and everything we develop in-between is considered inner content or the meat of the sandwich.
Step 6: Inner Content
- With the header and footer built it is time to follow along the Adobe XD and work from the top of the page down. We start by adding in the hero header video followed by the headliner banner. The rest of the site is developed by simply working our way down.
During this process it is important that any work we do on the desktop version of the website we are also considering the mobile version. No section is complete until all breakpoints have been looked at and edited to fit within the different screen sizes.
Step 7: Revisions and Touch-Ups
By this point the majority of the site has been built out and we are able to show a functioning version to the client. We take feedback and edits that must be made and get back to work.
Important edits:
- Artist Spotlight image changes & photo ratio changes
- Hotel section was added during this step
- Vendor section required mobile/breakpoint edits
