Mock-Up Website Design--Nibble Cafe

Logo Designer

Web Designer

Adobe XD

Canva

Examples of Web Design and Development

Nibble Cafe

A dummy website to showcase my skills as a web designer. I first created the website with this color palette: I tend to generate the colors first to have an idea of the direct I want to go.

Color Palette

Logo Design

I wanted the logo to be something simplistic, but not too fancy--essentially something that gets the point across that this was a cafe. I did go through a variation of texts to finally decide upon the one I wanted to do.

Nibble Cafe Logo

After having a design for a logo, I started my work in Adobe XD to figure out how I wanted to layout the website. After playing around with shapes I came to this final home design.

Home Page

I knew I wanted to have a gallery to show case any desserts. And I also knew that I wanted the logo to be centered with clickable links. I then designed the rest of the pages following the color palette. The images I selected are from pexelbay.

About Section

Contact

Shop

The shop I wanted to add a shop area so that you could see the desserts available. The small arrow on the side was what I wanted to enable scroll to the top. And then the footer. Since this was my first design, I decided to take a break and come back to it again with a fresh new eye.

Nibble Cafe Front End Code:

Since this was primarily front-end I used HTML, CSS, and a bit of JS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nibble Cafe</title>
</head>
<style>
    html {
        scroll-behavior: smooth;
    }
body 
{
	margin: 0;
	padding: 0;
	background-color: #F6F3F4;
}

.header {
background-image:url(assets/navbar-bkg.png);
	background-repeat:repeat-x;
	justify-content: center;
	margin: 0;
	padding: 0;
	display:flex;
}

.navbar 
{
	justify-content: space-between;
	margin: 0;
	padding: 0;
	display:flex;
	width: 1920px;
	max-width: 1920px;
	
}
.nav-logo img 
{
	width: 250px;
	flex-grow:1;
}
.navbar ul
{
	list-style-type: none;
	margin: 0;
	padding:0;
	 display: flex;
  justify-content: center;
}
.navbar li
{
	list-style-type: none;
	margin: 0;
	padding:0;
	flex-grow:2;
	text-align:center;
	/*
	width:auto;
	float:left;
	padding-left: 50px;
	clear: none;*/
}
.nav-side 
{
	    padding-top: 53px;
		flex-grow:3;
}
.nav-side li a 
{
	color:#000000;
    font-family: "Adlery Pro";
	text-decoration:none;
	font-size:24px;
}
.nav-side li a:hover 
{
	color:#FFFFFF;

}

button
 {
    border: none;
    cursor: pointer;
    background-color: inherit;
    margin-left: 551px;
    margin-top: 419px;
    position:absolute;
    z-index: 2;
 }
.home-content 
{
	background-image: url(assets/HomeAsset_Clouds.png);
    background-repeat: no-repeat;
    height: 601px;
    background-position: center;
	display: block;
    float: left;
    clear: both;
    position: relative;
    width: 100%;
}
.home-gallery
{
	height: 586px;
	width: 661px;
	background-color:#9FF8FB;
	display: block;
    float: left;
    clear: both;
    position: relative;
    border-radius: 40px;
    margin-left: 74px;
    margin-top: -73px;
    z-index: 1;
}
.scroll-up button
{
    border: none;
    cursor: pointer;
    background-color: inherit;
    bottom: 60px;
    right: 30px;
    position: fixed;

}
    .footer-design ul
    {
        list-style-type: none;
        margin: 0;
        padding:0;
    }
    .footer-design li
    {
        list-style-type: none;
        margin: 50px;
        padding: 0;
        text-align: right;
        margin-right: 218px;
    }
.footer-design a
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;

}

.about-content 
{
	background-image:url(assets/AboutAsset_AboutPage.png);
	 background-repeat: no-repeat;
	 height: 1249px;
	 width:105%;
	 float: left;
    clear: both;
    position: relative; 
	background-position: center;
}
.contact-content
{
    background-image:url(assets/ContactAsset_CafeContactPage.png);
    background-repeat: no-repeat;
    height: 1067px;
    width:100%;
    float: left;
    clear: both;
    position: relative;
    background-position: center;
}
.shop-content
{
    background-image: url(assets/NibbleCafe_ShopPage.png);
    background-repeat: no-repeat;
    height: 1891px;
    width:100%;
    float: left;
    clear: both;
    position: relative;
    background-position: center;
}
.footer-content
{
    background-image: url(assets/ShopAsset_Footer.png);
    background-repeat: no-repeat;
    height: 350px;
    width:100%;
    float: left;
    clear: both;
    position: relative;
    background-position: center;
}
.site-content
{
	width:1920px;
	margin-left:auto;
	margin-right:auto;
}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
    max-width: 661px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #9B7EDE;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color:#533C88;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
.photolibrary
{
    width: 660px;
    height: 590px;
    border-radius: 30px;
}
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

</style>
<body>

	<div class="header">
       <div class="navbar">
        <div class="nav-side">
        	<ul>
            <li><a href="#Home">Home</a></li>
              <li><a href="#About">About</a></li>
            </ul>
        </div>
        <div class="nav-logo">
        <img src="assets/logoCafe.png"  alt="logo" />
        </div>
        <div class="nav-side">
        <ul> 
         <li><a href="#Contact">Contact</a></li>
         <li><a href="#Shop">Shop</a></li>
        </ul>
       
        </div>
    </div>
    </div>

    <div class="site-content">

    <div class="home-content">

            <div class ="shopbtn">

                <a href="#Shop"><button onclick=""><img src="assets/Shop_Button.png" alt=""/></button> </a>

            </div>

    <div class="home-gallery">
        <!-- Slideshow container -->
        <div class="slideshow-container">

            <!-- Full-width images with number and caption text -->
            <div class="mySlides fade">
                <div class="numbertext">1 / 3</div>
                <img src="https://images.pexels.com/photos/6408290/pexels-photo-6408290.jpeg" class="photolibrary">
                <div class="text">Caption Text</div>
            </div>

            <div class="mySlides fade">
                <div class="numbertext">2 / 3</div>
                <img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg" class="photolibrary">
                <div class="text">Caption Two</div>
            </div>

            <div class="mySlides fade">
                <div class="numbertext">3 / 3</div>
                <img src="https://images.pexels.com/photos/867452/pexels-photo-867452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="photolibrary">
                <div class="text">Caption Three</div>
            </div>

            <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>

        <!-- The dots/circles -->
        <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>


            </div>
        </div>
    </div>
    </div>
    <div class="about-content">
    <div class="about-design">
        <div class = "scroll-up">
            <button onclick="topFunction()" id="myBtn" ><img src="assets/NibbleCafe_UpArrow.png" height="96" width="96" alt=""/> </button>
        </div>
    <div id="About"></div>
    </div>
    </div>
    <div class="contact-content">
        <div id="Contact"></div>
        <div class="contact-design">
        </div>
    </div>
    <div class="shop-content">
        <div class="shop-design">
            <div id="shop-locate"></div>
        </div>
        <div id="Shop"></div>
    </div>
        <div class="footer-content">
            <div class="footer-design">
                <ul>
                   <li> <a href = "#"> Home</a></li>
                    <li><a href = "#">About</a></li>
                    <li> <a href = "#">Contact</a></li>
                    <li><a href = "#">Shop</a></li>
                </ul>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

//scrollup button

// Get the button
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
    } else {
        mybutton.style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
//
    let slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
    }
</script>
</body>
</html>

Nibble Cafe Final Product:

Nibble Cafe 2.0

I felt like the design could be a little better so I decided to re choose my color palette this time with less colors to work with:

I still liked the logo so I decided to go keep that. I wanted the website to feel like a bakery, so I delved into a lot more inspiration research to capture that bakery feel.