Daily UI Challenge Day 004

The prompt for Day 4 was “Calculator”. I decided to do a simple BMI calculator for this challenge. I have been on my own weight loss journey for a little over a year now, so BMI calculators are something that I have personally used a lot recently. There are many different ways to calculate BMI, but I decided to stick with the most basic formula, which is Weight(kg)/Height^2(cm).

From stage one of this design I envisioned creating the entire page including the graphics using pure CSS. In fact, the reason I am posting Day 4 so late is because I knew that I wanted to implement the design, so I waited until I had a chance to site down and code it.

The design I created in Adobe XD can be seen here:

Custom Size – 1

And here is a GIF of the implemented design:

ezgif.com-video-to-gif

See the Pen BMI Calculator by Melissa Dagley (@mdagley) on CodePen.

I used HTML, CSS, and JavaScript to make the completed app. It came together pretty quickly, I’m sure there is more that I could do to improve it, but I am happy with it as a creative exercise.

 

Advertisements

Mama Mia’s Pizzeria Stage 4 – Branding Part 2

In preparation for the menu page design for the website I decided to tackle redesigning the pdf version of Mama Mia’s menu. The current menu is dated and hard to read and I really wanted the new version to match the branding that I’ve already created for the website redesign. This is my first time designing a menu, and the first time doing any real graphic design work in years, but I think I was able to achieve my goals.

My goals for this redesign:

  • Modernize the menu
  • Improve readability
  • Match the design to the branding I’ve created

Here are some side by sides of the original design and my redesign.

For the cover, I decided to keep things very simple and I stuck very close with the design that I used on the website. This cover is essentially the header that I used across the website.

For reference, here is a screenshot of the website beside the menu cover.

The next page was very crowded, so I ended up breaking it up into two pages to improve the readability. The last section, with the Stromboli and Calzones is from page 4 in the original menu, but I thought it fit better here.

The pizza page contained a lot of information, and I felt like the toppings list was not user friendly. I decided to break the toppings down by category and give them more space on the page.

I am really pleased with how the last page came out. Because I moved the Stromboli and Calzones Section I was able to have plenty of space on the last page for a large image. The sections on this page were all small a easy to manage compared to some of the other pages of the menu.

I also decided to make a final page for the menu, I guess it would be the back cover for a print menu, although I did not create spreads, just individual pages since I knew I was intending this for web use only. I thought that this would be a more appropriate place to list the locations/hours/phone/etc. Originally this information was on the front cover.

MamaMiaMenu_Page_6

You can view the full PDF [HERE].

Mama Mia’s Pizzeria Stage 5 – Coding Part 5

I’m trying to wrap up this project, so rolling full steam ahead I designed and coded the about page. This was a very simple page so I knew I would be able to put it together quickly. The existing site does not have an about page, so I used some information that is included at the bottom of their existing menu. Of course if I was actually creating this page to be used by the business I would find out more information about the history of the company itself and a company statement.

I skipped straight to the coding with this one since I knew I was planning to keep things very simple.

Here is a screenshot of the completed page.

aboutscreenshot

I’m sure I will still tweak the design a little, I did throw this together fairly quickly, but it’s not an area of the site that I’m planning to concentrate much time on. The next big design challenge will be the menu page. I haven’t completely decided how I want to approach it yet, but I do know that I want to have a web version of the menu available, unlike the current site which only provides a PDF. I’m sure you will hear from me again before the weekend is over.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

Mama Mia’s Pizzeria Stage 5 – Coding Part 4

Over the past couple of days I worked on designing and coding the locations page. This was my first time working with the google maps API, but I have worked with other google APIs in the past, so it was pretty simple to figure out the basics.

I started out by doing some thumbnail sketches of possible layouts.

locationsthumbnails

I toyed with the idea of having one map with both locations, but the two locations were far enough away that you couldn’t see much detail about the cross streets or nearby businesses on one map. Because of this I decided to go with one map for each location.

I decided to keep things pretty simple, but I could always go back and add more features. I kind of the like the idea of the last sketch where a map with both locations is displayed and then a div with more specific information would be displayed once you selected a location.

I skipped the prototyping stage for this page and went straight into coding, so it came together pretty quickly.

Here is a screenshot of the completed page.

locationscreenshot

I am happy with how the page turned out, although I have not done much testing different screen sizes, so there are some more tweaks that will need to be made.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

 

 

 

React & GraphQL Web App

I recently went through the application process for a local start up, and while I didn’t get the job, I did get the chance to try out some tools that I’ve never used before.

The coding challenge was to create a single page app using react that would list all of the star wars movies, the list of characters in each movie, and a profile page for each character.

This challenge was my first time ever building a full react web app, I had previously played around with building components a little bit on code pen.

The back end of this site was a GraphQL server, and used GraphQL and Apollo with react to query the data. This was also my first time working with GraphQL and Apollo. Learning to write queries for GraphQL didn’t take me too long, it reminded me of SPARQL, which is a graph-based query language for semantic web databases.

With this project I also played around some with mobile design for the first time. I’ve always tried to design my pages to be responsive to screen size, but of course responsive and mobile-friendly are not the same thing. I used media queries for the first time to cater the content to the screen size. So instead of displaying a four column grid of movies/characters there is a single column display for small screens.

Here are some screenshots of the final product. This was created over the course of about 4-5 days.

starwarsapp1starwarsapp2starwarsapp3starwarsapp4

And here are some simulated iPhone X screen shots.

starwarsappmobile1starwarsappmobile2starwarsappmobile3starwarsappmobile4

I hosted the app online using heroku, and it can be viewed [HERE]

The github repo for this app can be found [HERE]

Mama Mia’s Pizzeria Stage 5 – Coding Part 3

To finish up the main functions of the contact page I decided to go with a jQuery plug-in to perform the validation functions for my contact form, and I’ve used a php file to process the posted data.

Here is a screenshot of the contact form, it hasn’t changed since my last post.

 

contactscreenshot

The validation rules for the form are fairly simple. The first name and last name fields just need a minimum length of 1 character.

The email field should contain a valid email address.

contactscreenshot2

And the comment box should have a minimum of 100 characters.

contactscreenshot3

All fields in the form are also required before the form can be submitted.

contactscreenshot4contactscreenshot5

Once the form is successfully submitted an email containing the data will be received.

contactscreenshot6

There are still some stylistic changes that I would like to make, especially for the email that is sent. I also plan to use Ajax when processing the form so that I can display a success message directly on the page rather than using a pop up window. Another thing I would like to add is a confirmation email for the user. These changes will probably not take place until I’ve finished some more functionalities/pages for the site.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

 

 

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 2

Moving right along with this project, I have completed the basic coding for the contact page. Of course the main component for this page is the contact form. I have laid out all of the form elements, now the next step will be to set up the input validation.

I created a quick layout in Adobe XD:

Web 1920 – 5

I stuck pretty closely with this layout when coding, though I did change the submit button. I may still add some more elements to the page as it seems a little bit plain at the moment, but we’ll see.

Here is a screenshot of the current look of the page:

contactscreenshot

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

I have made many forms before, both for personal projects and school, but one thing I did come across while making this page was a CSS property I have never seen before, which is the box-sizing property. The box-sizing property allows you to set elements to calculate their size including padding and borders. So if you set an element to be 250 px wide, and have 5px of padding and a 1 px border, the overall width of the element will still be 250, rather than 262px.

Here is an illustrated example:

Without box-sizing:

divsize

With the box-sizing property set to border-box the total width for the element will be the size you set it to, so if you set a width of 250 px the total width will be 250 px.

With Box-sizing:

divsize_boxsizing

For more information you can read the W3 Schools article on the box-sizing property [HERE].

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 1

Over the past couple of days I began coding the homepage for my Mama Mia’s Pizzeria site. I started out coding traditionally, the way I normally do, using pure HTML and CSS. Having created a mock-up of the different sections of the site and figuring out how I would layout the divs, it was fairly simple to create the code for the page.

mock-up1

Overview of AI file

mock-up2

Header Layer

mock-up5

Navigation Bar Layer

mock-up3

Body Layer

mock-up4

Footer Layer

I initially just worried about the structure of the page, making everything look just right, getting the design right. Then I moved on to some of the bells and whistles so to speak. The big task for this page was the photo gallery. This was my first time coding a photo gallery from scratch. I wanted to see what I could come up with, without looking at anybody else’s existing gallery plug-ins. I did look at the W3C article on automatic slideshows to figure out the automation part. They executed their slideshow by creating multiple divs and then only displaying the active div, which is something I have done in the past, most recently for a data mashup visualization[GitHub] I created. For my slideshow I created one div, and set the background image based on the class assigned to the div, so essentially the buttons just change the background image for the div, and the carousel loops through the different backgrounds.

The next major step I took in the project was to look into templating frameworks. From the articles I found, nunjucks sounded like the best choice, so I followed a couple tutorials to get an idea of how it worked, and then I converted my existing code into a nunjucks project. There was a bit of a learning curve because I have never used gulp before, but I can already see that it will save me a lot of time as I begin coding the rest of the site. In the past I have handled “templates” by converting all of my pages to php and using includes for reoccurring sections of code.

Nunjucks is much better for this though for several reasons. One big reason is the ability to create a layout template which includes everything from the HTML tags and metadata to the navigation bar and footer. With php includes I would not be able to include the basic layout because you can only include uninterrupted chunks of code. I would also have to include the navigation and footer separately for the same reason. With nunjucks the code I write for each new page has been reduced down to just the body content.

codescreenshot1

nunjucks code for the index page

codescreenshot2

snippet from the nunjucks layout code

Another advantage to nunjucks is that I can preview my website without having to run a server, php of course is a server side language so in order to view the site you need to run it on a server. The workflow is much easier for me with nunjucks. I have just barely scratched the surface with can be done I know, but I look forward to learning more as I move forward.

The tutorials that I looked through were:

Nunjucks: A JavaScript Template Engine – Medium.com

How to Modularize HTML Using Template Engines and Gulp – Zellwk.com

I have started a github repository for this project located [HERE].

A live version of the site can be found [HERE].

Here are some screenshots of the site so far:

screenshot2screenshot3screenshot4screenshot1

Mama Mia’s Pizzeria Stage 4 – Branding Part 1

 

MAMAMIASLOGO1

Existing Logo

MamaMiaLogoSideBySide

Updated Logo

mamamiav7

Example of updated logo as it would appear on the homepage

As I continue to work on the design for the homepage, I decided to take a break and create a very simple, updated version of the existing logo for Mama Mia’s. This is not a final version by any means, hence the title of this post, but it does help to see a more clear vision of the what the site will look like. The existing logo is low-res and has a lot going on, so I just scaled back some of the features in the logo and focused on what I felt were the more important aspects.

This is just the first design that came to my mind when I thought about how to update this logo, so I’m sure I will go back and sketch some more ideas and of course play with the typography and smooth out the line work.

Update:

Reworked the logo a tad, here is the updated look at it.

MamaMiaLogoSideBySide2

mamamiav8