The Easiest Way To Build a Pro Website: Relume + Webflow (Tutorial)

Building a Wedding Website: A Step-by-Step Guide

Introduction to the Project

• The speaker introduces the project of creating a wedding website for their sister, emphasizing that the tools and processes used are similar to those employed by professional web designers.

• Highlights the potential complexity of modern websites, contrasting simple tools like Wix and Squarespace with more advanced options.

Tools and Planning

• The primary tools mentioned are Reloom for planning content and wireframing, followed by Webflow for building functionality and publishing.

• The speaker critiques AI site builders for being too simplistic, advocating for a thorough planning process using Reloom to differentiate between amateur and professional work.

Sitemap Creation

• Begins with creating a sitemap in Reloom, which serves as an architectural plan outlining the structure of the website.

• Discusses using Reloom's AI sitemap creator to generate ideas based on prompts related to wedding details and RSVP information.

Editing the Sitemap

• After generating suggestions from AI, the speaker decides to customize the sitemap by deleting unnecessary pages while retaining essential sections like RSVP instructions.

• Emphasizes maintaining basic website structures such as navigation bars and hero sections that introduce key information about the wedding.

Content Structuring

• The speaker outlines various sections including welcome messages, background stories of the couple, highlights (date/time/venue), gallery images, location details, and an FAQ section. They prioritize user experience by placing call-to-action elements strategically at the end of the page.

• Mentions adding a gallery section featuring images related to Mickey and Noom along with contact information detailing how guests can reach the venue.

This structured approach ensures clarity in both design intent and user navigation throughout the wedding website creation process.

Homepage Structure and Wireframing Process

Initial Feedback and Homepage Structure

• The speaker discusses the structure of the homepage, indicating a collaborative approach where feedback can be shared via a link for comments and discussions.

• Emphasizes that wireframing is a low-fidelity design process, focusing on layout and content without colors or images to understand the overall structure.

Wireframing Details

• The wireframe provides initial layout suggestions, including text alignment options with images. This serves as a time-saving starting point for design.

• The speaker explores navigation component options, considering different placements for logos and menu items to enhance user experience.

Navigation and Content Layout

• Discusses internal scrolling features for RSVP buttons that lead users to specific sections like event details or story highlights.

• Plans to prioritize storytelling in the layout by rearranging components based on importance, such as placing "their story" first.

Hero Section Design Choices

• Considers various elements for the hero section, including image/video placement and button functionality. A centered text alignment is preferred for aesthetic appeal.

• Decides against multiple buttons in favor of a single RSVP call-to-action to streamline user interaction.

Event Details and Gallery Adjustments

• Focuses on refining event details with clear headings (date, location, dress code), suggesting AI assistance for enhancing text length and clarity.

• Evaluates gallery layouts to find more engaging compositions while ensuring essential information like location maps are included effectively.

Finalizing Forms and Footer Design

• Searches for suitable form components necessary for RSVPs; considers adding dropdown menus later during implementation in Webflow.

Wireframe Completion and Style Guide Exploration

Finalizing the Wireframe

• The speaker expresses satisfaction with the wireframe's content, structure, and layout, indicating readiness to explore design elements.

Experimenting with Look and Feel

• Introduction of a new feature from Reloom that allows quick experimentation with color schemes and typography, enhancing the visual appeal of the wireframe.

Image Integration

• The speaker plans to replace placeholder images with actual images of Mickey and NS to better visualize the website's appearance.

• Acknowledges that while initial color schemes may not work perfectly, they can be adjusted later as more images are uploaded.

Color Scheme Adjustments

• Discussion on simplifying the color palette for wedding photography; suggests reducing colors to create a cleaner look.

• Transition from dark theme to light theme is noted as an improvement in aesthetic appeal.

Typography Selection

• Emphasis on selecting elegant typography for headings; preference for serif fonts is expressed.

• Utilization of Google Fonts for free options; exploration of various font collections leads to satisfactory choices for both headings and body text.

Button Design and UI Elements

Design Concepts and Webflow Integration

Exploring Design Concepts

• The speaker appreciates the aesthetic of round corners in design, emphasizing that professional designers typically explore multiple ideas before finalizing a concept.

• The process involves pitching various concepts to clients, allowing for comparison and selection among different designs.

• A new concept is being created with a focus on color diversity, moving away from a single-color palette to incorporate more vibrant options.

• The speaker experiments with pastel colors for better visual appeal, aiming for sufficient contrast between elements while maintaining a light theme.

• Typography choices are discussed, considering bold fonts for larger displays and adjusting letter spacing for improved aesthetics.

Finalizing Design Choices

• The speaker decides to experiment with sharp corners for buttons and images to create a distinct vibe compared to previous designs.

• After refining the concepts, the first version is selected for client presentation. Feedback mechanisms are highlighted as part of the professional workflow.

Transitioning to Webflow

• To develop the website in Webflow, the initial step involves cloning a starter file from Reloom which contains essential styles and content templates.

• The speaker reassures viewers that minimal prior knowledge of Webflow is needed to follow along with the tutorial effectively.

Importing Content into Webflow

• Instructions are provided on how to install Reloom within Webflow and import previously designed concepts into the platform.

• Concept one is chosen for importation; this process saves significant time compared to manual section building.

Editing in Webflow

• Once imported, attention turns to editing elements like navigation bars and logos within Webflow's interface.

• The speaker demonstrates replacing an image logo with text while applying pre-defined styles from the style guide created by Reloom.

Applying Styles Consistently

Creating Functional Navigation and Forms

Setting Up Section IDs for Navigation

• The speaker discusses the need to make buttons functional by linking them to specific sections of a webpage, starting with assigning IDs to each section (story, event details, location, RSVP).

• The speaker demonstrates how to open the Navigator and assign an ID of "story" to the story section in the settings panel.

• Similar IDs are assigned for other sections: "details" for event details, "location" for location, and "RSVP" for the RSVP section.

• The speaker explains how to link buttons to these newly created section IDs so that clicking on them scrolls smoothly to the respective sections.

• A preview test confirms that all buttons correctly navigate to their designated sections.

Updating Icons

• The next task involves replacing existing icons with new ones sourced from Icon Finder, a preferred site for free icons.

• The speaker searches for a date icon and selects one that fits their style preference before downloading it as an SVG file.

• A location icon is also chosen based on visual appeal and downloaded in SVG format due to its scalability without pixelation.

• Finally, a dress code icon is selected and downloaded as well. All three icons are uploaded into Webflow's assets panel.

• Each icon is then replaced in the design: date with date icon, location with location icon, and dress code with dress code icon.

Creating a Functional Form

• The speaker notes the need for a dropdown menu within a form where users can select how many people will attend an event.

• They locate an existing dropdown menu element in the style guide and copy it into their homepage form setup.

• Adjustments are made by removing unnecessary elements from the copied dropdown menu while ensuring proper labeling of fields like “how many people will come.”

• Options are added into the dropdown including values such as 1 person through 4 persons along with an option indicating someone cannot attend.

• Field names are finalized (e.g., “people coming”) which will be crucial when receiving email submissions from this form.

What is the RSVP Form and How Does It Work?

Overview of the RSVP Form Functionality

• The form is named "RSVP form" and includes various fields for user input. Currently, submissions trigger a simple email notification.

• The current setup sends an email to the creator but can be modified to include other recipients, such as clients.

• Upon submission, users receive a success message or an error notification if something goes wrong. Styling options are available for these messages.

Enhancing User Experience with Animations

• The speaker aims to improve website interactions by adding animations that create a more engaging experience as elements load.

• Elements can be grouped together for animation; in this case, text areas and buttons are selected for effects like fading in on page load.

• A scroll-triggered animation is set up so that elements fade in when they come into view, enhancing visual appeal.

Implementing Staggered Animations

• Additional animations are added sequentially: first the text fades in, followed by images with slight delays to create a staggered effect.

• More elements are animated using similar techniques; each element has its own timing to ensure smooth transitions during scrolling.

• Adjustments can be made to delay timings for optimal visual impact; experimentation is encouraged to achieve desired results.

Mobile Responsiveness Considerations

• The design must also look good on mobile devices; breakpoints allow adjustments for different screen sizes without affecting desktop views.

• Font sizes can be adjusted specifically for mobile views while maintaining larger sizes on desktops, ensuring readability across devices.

Finalizing and Testing the Website

• Once design adjustments are complete, the site can be published using Webflow's free domain option. For professional use, purchasing a custom domain is recommended.

• The website functions fully after publishing; testing features like the RSVP form confirms successful submissions via email notifications.