MODULE 10 d.

Unique design features content, or websites that

CREATING A WEBSITE e. Customer service want to evenly combine
written copy and
2. CHOOSE WEBSITE BUILDER imagery. Online stores
CREATING A WEBSITE A website layout is the arrangement of all visual elements on that segment users by
• Web design the webpage and the resulting relationships between them. age, gender or behavior
- refers to the design of websites that are displayed on the •It determines the sequence in which page elements are are a good fit for this
internet. registered amongst visitors, which elements draw the most layout.
-is the process of planning, conceptualizing, and arranging attention, and the overall balance achieved in the design.
content online. • A good website layout can lead visitors’ focus in the right 3. DEFINE THE LAYOUT
• Designing a website today goes beyond aesthetics to include direction. Ideal for: Websites that
the 3. DEFINE THE LAYOUT are going for the
website’s overall functionality. •Considerations: contemporary and
• Web design also includes web apps, mobile apps, and user a. Accommodate the content innovative look, and are
interface b. Content is heavy – multi-site interested in driving user
design. c. Content is less – one page website engagement.
d. Use common lay-outs A business website or
HOW TO DESIGN A WEBSITE e. Z-layouts, F-pattern, Fullscreen image, Split screen, the portfolio of a design
1. Goal Setting Asymmetrical layout, single column, box-based, cards agency are good
2. Choose a website builder layout, magazine layout and horizontal strips layouts examples.
3. Define your layout 3. DEFINE THE LAYOUT
4. Claim the domain name 3. DEFINE THE LAYOUT Ideal for: Long-form
5. Gather your content content websites, or
6. Add the right pages 3. DEFINE THE LAYOUT websites that display
7. Design website elements Ideal for: Pages that content in chronological
8. Pick the professional tools needed are highly visual and order. These can be
9. Make it accessible to everyone contain minimal anything from blogs to
10.Optimize for mobile written copy. social media feeds.
11.Strengthen the SEO Landing pages that 3. DEFINE THE LAYOUT
12.Engage with visitors serve a specific Ideal for: Complex
13.Ask for feedback conversion purpose are website structures with
14. Publish and update usually a perfect fit several pages.
3. DEFINE THE LAYOUT This layout is a good
HOW TO DESIGN A WEBSITE –CONT’D Ideal for: Websites that solution for a graphic
Goal setting – being crystal clear about what to achieve. mainly revolve around design portfolio, with
•Considerations for designing a website: text. each box leading to a
a. An online store to sell your product When creating a blog, different project page.
b. A portfolio website to showcase your art for example, this 3. DEFINE THE LAYOUT
c. A business website to manage and grow your business website layout is Ideal for: Content-rich
d. A resume website to grab the attention of potential applicable for both the websites. This website
employers homepage and the layout is perfect for a
1. GOAL SETTING individual blog post vlog or an online store.
e. A blog to share your knowledge with the world pages. 3. DEFINE THE LAYOUT
f. An event website for weddings, parties and company 3. DEFINE THE LAYOUT Ideal for: Contentheavy websites such
events Ideal for: Businesses as news publications
g. A photography website to display and sell prints that want to highlight a or blogs.
h. A fitness website to book new clients specific niche or 3. DEFINE THE LAYOUT
i. A restaurant website to help with online orders, product. Ideal for: Long-scroll
delivery and payment For example, websites. This layout is
restaurant websites can particularly beneficial
1. GOAL SETTING proudly display a when it comes to one
Choose website builder – A website builder (also known as a particular dish, while a page design.
CMS) is a platform on which you can design, personalize and wedding website can • Domain name is your address on the internet. It’s what your
publish a website without any knowledge of coding. show the happy couple. visitors will see in the bar of their browser, right after the www.
• Considerations: 3. DEFINE THE LAYOUT • Considerations:
a. Price models Ideal for: Websites that a. Registering the domain name is critical for online success.
b. Design Customization offer two significantly b. Websites with a customized domain are automatically
c. Professional solutions different types of perceived by internet users as more professional and
trustworthy. c. Colors •Install a content delivery network (CDN) if you publish a
c. Picking a domain name also means using the right domain d. Fonts lot of content.
extension like .org, .com and .net 7. DESIGNING THE WEBSITE • Compress product images and videos.
4. CLAIM THE DOMAIN NAME e. Header & footer • Remember, when it comes to site speed, every second
e. Short: The longer it is, the higher the chances of visitors f. Motion matters. Literally.
misspelling it. g. Scroll effects 2. IT MUST BE FAST
f. Simple: Avoid symbols, special characters and numbers. h. Favicon - A favicon is a small icon that will be used in •Set up an easy-to-browse product catalog featuring:
g. Professional: domain name should incorporate own name or a website browser to “represent” your website • Clear navigation — categories, tags, filters
business name, to avoid confusion. i. Whitespace • Advanced functionality — filters, search by size, color,
h. Evocative: incorporate words that are related to your 7. DESIGNING THE WEBSITE material
business. 9. Accessibility – making it accessible to everyone • Attractive visuals — clean design, beautiful color palette,
4. CLAIM THE DOMAIN NAME 10.Optimize for mobile product photography
Gather the content – what the website is all about includes 11.Strengthen the SEO • Almost complete description of the product – size,
images, text, logo, videos, and more. • Considerations: materials and design
•Considerations: a. Conduct keyword research 3. MANY PRODUCTS TO CHOOSE FROM
a. Use own materials as much as possible to ensure b. Include on-page SEO •Apart from using a responsive, mobile-friendly website
you’re offering unique and branded content. c. Add alt text theme, be sure to:
b. Content is fully branded d. Boost internal linking • Adapt your layout for finger scrolling.
5. GATHER THE CONTENT IAN JADE E. LOZADA, MBA • Use crisp pop-up product images.
A. Multi-page COLLEGE OF BUSINESS AND ACCOUNTANCY • Reduce the number of fields on the checkout page.
•Home page – clean and eye catching. Must contain most CENTRAL PHILIPPINE UNIVERSITY 32 •Include big call-to-action buttons (e.g., add-to-cart
crucial information: logo, the name of your business, ACCESSIBILITY, OPTIMIZE, button).
and a navigation menu inviting visitors to browse STRENGTHENING SEO
further. - connecting with followers across multiple channels is a 4. MOBILE FRIENDLY
•About us page - Tell your story, and share your values, powerful way to build relationships with them - and will •User-generated content (UGC) such as customer
methods and any other information that defines your ultimately bring more eyes to your site. reviews are a must-have for an ecommerce store.
brand with an About Us page. • Considerations: •The volume of product reviews increases the conversion
6. ADD THE RIGHT PAGES a. Live chat rates.
• Contact page: When visitors want to reach out, they should b. Social media 5. USER GENERATED REVIEWS
be able to get hold of you easily. Make sure to include your c. Newsletter •User-generated content (UGC) such as customer
phone number, postal address, business email address and d. Forms reviews are a must-have for an ecommerce store.
social media accounts. 12. ENGAGE WITH VISITORS •The volume of product reviews increases the conversion
• Product or service page: the product page (or service page, •Considerations: rates.
depending on your industry) is where your visitors discover a. Check text and spelling
what you have to offer, and if they’re convinced, take out b. Navigation of pages 5. USER GENERATED REVIEWS
their credit card and make a purchase. c. Website is optimized for mobile device
6. ADD THE RIGHT PAGES d. Links are working BEST PRACTICES FOR WEB DESIGN
•A blog: Creating a blog boosts your reputation as an e. SEO elements are filled out correctly AND USABILITY
expert, helps you foster a loyal community, and is an 14. Publish and update Practices Purpose
effective way to drive traffic to your website. 13. ASK FOR FEEDBACK ❑ Simplicity (Colors, Typefaces, Graphics) Remove
•Testimonials: An honest testimonials page is a 1. Beautifully designed unnecessary design elements
wonderfully effective addition to your website design. 2. Fast. Fast. Fast ❑ Visual Hierarchy Arranging and organizing website elements
•Splash page: A splash page acts as a preview to your site, 3. Many products to choose from so that visitors naturally gravitate
greeting visitors before they reach your homepage. 4. Mobile-friendly toward the most important elements first.
6. ADD THE RIGHT PAGES 5. User-generated reviews ❑ Navigability Help visitors find what they're looking for.
•FAQ page: An FAQ page is a dedicated page on your WHAT MAKES A GREAT ❑ Consistency (Content, Mobile Friendly) Overall look and feel
website that provides visitors with quick and simple ECOMMERCE SITE? of your site should be similar across all of your site's
answers to common questions in an organized and • Great ecommerce website design should: pages
structured manner. It can save time by providing • Use a color scheme and typography that matches your brand. ❑ Responsivity (Load Time) Investing in a highly flexible
automated answers and provide a great experience for • Include a lot of white space to make it easier on the eyes. website structure
users. • Have eye-catching call-to-action (CTA) buttons. Bright colors ❑ Accessibility Goal of web accessibility is to make a website
6. ADD THE RIGHT PAGES work best. that anyone can use, including
•it is all about the details of the website and how to arrange • Follow the best conversion rate optimization practices. people with disabilities or limitations that affect their browsing
them to form one cohesive design and must be guided by • SEO (search engine optimization) friendly. experience.
your brand identity. • Easy to share on social media. ❑ Conventionality Balancing originality with your expectations
• Considerations: 1. BEAUTIFULLY DESIGNED ❑ Credibility Increase the level of trust your site conveys
a. Website architecture •Ensuring fast website one must: ❑ User-Centricity Conduct user testing, gather feedback, and
b. Menu • Choose a reliable ecommerce platform. implement changes
1. Homepage
2. Landing page
3. Category pages
4. Product pages
5. Checkout page
6. About us page / Contact us page
7. Search bar and search results page

ECOMMERCE WEBSITE DESIGN

CHECKLIST
8. Account registration and login forms
9. Email subscription form
10.Blogs
11.Customer feedbacks / reviews
12.Set-up live chat box or help desk
13.Policy for shipping, refunds, returns
14.Frequently asked questions (FAQ) page
15. Test run website