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

Daily UI Challenge Day 002 + 003

Yesterday kind of got away from me, so day I am posting about days 2 and 3 for the Daily UI challenge. Day 2’s prompt was “Credit Card Checkout” and Day 3’s prompt was “Landing Page”.

For Day 2 I designed a payment flow that could work for web or mobile with some simple tweaks. The mock up I made is for web, but for mobile I would simply have a small tab for the cart in the corner of the screen.

Custom Size – 1

The idea is that if the cart tab is pressed then the cart will slide open and take up the open area of the page. The input sections are all divided up and when one section is done it closes and the next one opens. This allows us to keep scrolling to a minimum. I like the look of other credit card payment screens where you fill in the information on a graphic credit card, see the examples below, but I feel like it’s a little overdone, so I opted to lay the fields out in a similar fashion to a credit card without actually drawing a credit card on the screen.

For Day 3 I decided to design a landing page for a fake bakery. I focused on finding a high quality background image and creating a simple typographic design. I chose to go with dark, warm colors to make the page feel cozy and home-y.

Custom Size – 1

So far I am having a lot of fun with this UI challenge. It is a much different mindset focusing on design first. My approach for this project has been to keep things fun and laid back and not try to aim for perfection, so I have been trying to finish each design pretty quickly and not agonize too much over the details.

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 3 – Design

This is just a quick update on the Mama Mia’s Pizzeria project. I quickly started throwing a homepage design together using Adobe XD. I tried to stay with the same feel that the site already had, but a little more modern and clean. I still plan to work on updating the logo a bit.

Web 1920 – 2

Version 1

Web 1920 – 2

Version 2

I used the colors from the logo as inspiration for the header and I replaced the mostly empty body of the page with a gallery, which will rotate through photos and specials/information. This allows more information to be placed on the page without overwhelming the user. I also removed a lot of the extraneous links in the body of the page as they seemed unnecessary with the top and bottom navigation.

I’ve added more information to the footer, as well as a box to subscribe to the newsletter that I’m planning to add. You can also see the added social media links in the top right corner. New to the navigation is the about and contact pages, and the coupons and photos pages have been removed.

I will continue to tweak this design, and begin laying out the designs for the other pages as well. They will all have the same basic layout with the same header and footer for consistency.

Mama Mia’s Pizzeria Stage 1 – Assessment

For my first portfolio project I am going to be redesigning the website for a local restaurant. Mama Mia’s Pizzeria in Anna, TX is your typical pizza place, with offerings of pasta, subs, salads, and of course pizza. I love their food, but their website leaves something to be desired.

The first step in this process is to take a look at the original website.

 

The website currently consists of three pages and a link to a pdf file of their menu.

Pages:

  • Home
  • Photos
  • Locations

The home page has the phone numbers for the two locations, a link to a pdf file with some coupons, and multiple ways to get to the other two pages. I created a webflow diagram to get a sense of the current flow of the website.

Website Flowchart - New Page (1)

In this diagram I broke down the different content on each page, as well as how the navigation flows from each page. Navigation to a new page is indicated in the orange/red color, and the dashed lines indicate pages that are the same location.

The current site does not contain very much information and is fairly simple, but looks very dated and does not function as well as it could.

Some improvements that could be made:

  • Modernize website appearance
  • Improve the branding
  • Either reduce the number of pages, or add more content
  • Improve the current photo gallery implementation (currently displays thumbnails of images, but they cannot be enlarged)

At first look these are some things that I think could improve the website. The next step in my process will be to look at some other pizza restaurant websites and see how they have approached their design.

 

Research Topics

One thing that I would like to do with this blog is take the time to research some areas of web development that I do not have experience with, or would like to explore deeper. I often see blog posts on certain topics and think to myself that I should look into it further, or try out a certain technology, but later never comes. Staying up with new technologies and continuing to learn new skills is important in an ever-changing industry like web development.

Some topics that I have come up with off the top of my head that I would like to research are:

vTEAjgrid-vs-flexbox

Web Layout: DIVs vs Flexbox vs Grids

I’ve only used DIVs (and tables in my much younger days :p), but I would like to try out flexboxes and the new CSS grids that I have been reading about. From what I understand there are different uses for each and one doesn’t necessarily replace the other, but when should you use each layout technology, and can they be used together?

convert-css-to-sass-twitter

SAAS

I don’t know much about SAAS, but I do not that it is supposed to make your life a lot easier when it comes to CSS.

how-to-improve-your-online-security-and-privacy-in-10-easy-steps

Security

Security online is more important now than ever. It seems like we hear about new data breaches every day, and no company is safe. Of course the most well known security breach to date was equifax. I’ve learned some basics of security in school, but I would like to delve in deeper and find out more about best practice in the real world.

open-source-ecommerce-platforms

Payment/Checkout Services

Of course everyone knows about paypal and amazon pay, but there are many other online services that can be used for eCommerce sites. Many security breaches that websites face involve the payment process. Customers need to enter sensitive data and they out their trust in the website their using to protect their information, process the order correctly, and get their item delivered to them in a timely manner. I do not have any experience setting up a payment system on an eCommerce site, so this is an area that I would like to learn more about.

image004

User Interface Design Principles

I have taken courses on design and user interfaces, but I would like to brush up on some of the core design principles.

41gFDJ5s1vL._SX399_BO1,204,203,200_

Evil By Design – Chris Nodder

User Experience

I would like to learn more about user experience design. The way users navigate through your website is very important. You want users to be able to find what they’re looking for without being frustrated and having the right design can increase sales, newsletter signups, etc. In one of the classes I took we went through many of the concepts in the book Evil By Design, which talked a lot about how to guide users through your site and encourage the desired behavior through the design of your site. This book focused on user experience design from the point of view of a business owner, but I would like to look into user experience from the view of the user and helping the user make the most of their experience.

Mobile-Web-Design-Strategy

Mobile Web Development

Mobile web development is one of those topics that I know a lot about from a users perspective, but not from a developer’s perspective. I know that I personally do about 75% or more of my web browsing from my phone, and I’m sure I’m not alone in that. Having a mobile friendly site can make or break a company in today’s business model. I try to design responsive sites, which are somewhat mobile friendly in most cases, but I have never truly designed a mobile website. Having developed some mobile apps and learning about material design does give me some insight into mobile web development, but I would like to get my feet wet and actually make a mobile web site.

I hope to look into many of these topics in the coming weeks, and I plan to write up what I learn on this blog. I hope that this exercise will be as informative to others as it will hopefully be to me.