Category: Web design

Expose App Development

adminLeave a comment
Expose logo
Expose logo

The Expose App is a health app for people who have specific diets. The main function of the app is to be a scanner. The idea is to have a brand that exposes the hidden healthy meals and to expose unhealthy meals for what they are. So this means that you will be able to know immediately if a food product fits your diet. This will be especially helpful for people who follows a diet due to health reasons such as allergies or medical conditions as it will include a function to search through ingredients.

Rough wireframe of the app
Rough wireframe of the app

This functions of the app will include:

  • Scanner – that allows you to scan a logo or bar code.
  • Log – to see past products that you want to find again.
  • Contacts – to be able to share products that will fit the diet of your friends or family
  • A blog for top Exposed hits – to see what products are trending

One aspect that is important to bring in is that people only want the information they care about. For example, for people who have allergies, in many cases they only want to know if they can eat something without worry. Some people want to know how many Calories (American measurement) or KiloJoules (South African measurement) is in a meal. Some want to know is a meal is dairy free or gluten free. Some want to know if it is ethically harvested and manufactured. This is why the design will be modular. This means that when you make a profile you can choose from common diets or make a custom diet based on your preferences. The information will then just show the data modules of the product you care about.

Poster of app pages
Poster of app pages

The image above shows the flow of how the app would work. There is a page for a blog, but did not make it as I don’t have content for it yet. I wanted to focus on the actual process a person would go through when using the App.

I made the app using illustrator, which in hindsight was not the best idea. I am not sure why, but this document got really slow and crashed at one point. I believe masking images takes far more Ram than it is supposed to but I cannot prove it. In the future I will make individual elements with Illustrator and learn to use Adobe XD. I like the layout and functionality of XD but for some reason I cannot scroll horizontally. Adobe XD also allows you to copy on the exact same place as other art boards. I will be teaching myself on how to set up a XD document with Assets and using the library as I see this will be an important skill for a web designer.

Another aspect I did not anticipate is the difficulty in making all the Icons. My plan for the set up is based on using icons to choose your diet. The icons will be simple as seen on the app itself. I will also add text as some things look too similar to distinguish.

Click here to see the rough Prototype

Animated menus

adminLeave a comment

Social Media Links

I wanted to create a fixed menu to show my social media links. I found a Folding Menu by Animated Creativity that I decided to use as a template for my Social Media links.

While implementing it was fairly simple, it was not responsive, and I had to learn the code to ensure I could edit it without breaking it. This animation is done through CSS animation activated by hovering the pointer over the “FOLLOW ME” text and through some clever transition-delays. I edited the positions but left the animation itself largely alone as it was exactly what I wanted.

Main Menu

Original menu for portfolio
Original menu

For the main menu, I wasn’t sure what I wanted. I wanted a similar line based menu animation but a simple hover effect was boring. The original menu looked like the image above. There were no colour animations (menaing the active menu just stayed blue) and the hover effect simply duplicated the blue colour gradient to the other menu items.

This is the first time I tried animating with the hover effect, so I used the code in the pen Magic Line Navbar by seto89 to figure out the timing and syntax needed. I also added some text and a photo to make it look like an about page to make sure the spacing looked right. I just duplicated the about page so what we could see the menu difference when it was active on other pages.

I decided to code my style first and then add this animation to my menu. I only added the line animation from the pen as I couldn’t figure out how to recreate it myself. I also believe it will break in any browser other than Chrome. From this point I decided I needed to animate the colour to replicate the background colours and got it to work. I also tried to get the animated to line to be on the top and bottom, but I can either get to work on top or on the bottom. From this point all I had to do was make the menu responsive. This was tricky as the animation tended to stop working if you fiddle with it. In the end I left it at the bottom as it still looked cool and I feel like it will break I fiddle too much with it. My goal for the end of the year is to have this animation working on all browsers on the top and the bottom the menu.

To download the file, click here.

References

Animated Creativity, na. CSS – Folding menu | Codepen. [Online]
Available at: https://codepen.io/animatedcreativity/pen/wOqBQr
[Accessed 21 10 2019].

seto89, na. Pure CSS Magic Line Navbar | Codepen. [Online]
Available at: https://codepen.io/seto89/pen/WmGwwp
[Accessed 21 10 2019].

Elective 2 Continuation of CCS animations

adminLeave a comment
Moon reflection on water created to animate
Moon reflection on water created to animate

In this elective I decided to animate a illustration using CSS animation. I decided to do a reflection of the moon on water. I used a flat illustration style as it would be the easiest to animate simpler shapes. I made this illustration in Adobe Illustrator.

Showing the SVG code of a section in the image
SVG code of the star

To build the image in code, I exported the image in sections in SVG format and placed them in position on top of a gradient made with code. I then copied the text into the code. This means when I scale the image, it will scale as a vector in the browser itself. For example, the image above shows the code of the star in the yellow circle. The text in the yellow square is the code that makes the star image. If you zoom in on your browser on where you have the file open, it means the image will not pixelate at all. Additionally, the file size is very small. In total, the size of the animated drawing is about 43KB. To compare, the recording below with 4 seconds that would repeat is about 500KB. With larger websites with many animations, the smaller file size can literally save money as file space and download speed is reduced significantly.

Animated moon reflection

As for actual animation itself, I used the Scale and Translate 2D transformations from the Elective 1 CSS animations. The way it works is that you designate a animation duration for a certain amount of seconds, and specify what the animation would look like through keyframes. I use percentages to select my keyframes as I feel it is the option that makes more sense. In the keyframes I selected a beginning frame, a middle frame and a end frame. The beginning frame and the end frame are the same to ensure that the animation does not look like it is glitching.

This is a simple animation, but this entire image was made with code. Getting the timing and movements right took time. But I am proud of this animation as it was my first illustrated animation made only with code.

To download the file, click here.

Elective 1 CSS animations

adminLeave a comment

This learning unit is about learning a new skill. I decided to work on CSS animations and made a page on the basic transitions and transformations you can do to divs. This page is more of a reference guide summarizing what I learned from online resources rather than a visual solution but I feel like I got the basics down. I would like to make a reference to w3schools as I used a lot of the text from the site. Also, I want to reference the site called CSS tricks for animation count down as I used a tutorial to learn how the code works.

You can see this document as process work where I tested a bunch of code I found online in a way that would make sense to me in the future. I do have to admit that I am probably the only person who would be able to make sense of it without context as a lot of the explanations are done with notes in the code itself if I felt it was necessary. It also has the basic functions down so I only have to use the Inspect browser function to see what I did to reuse the code in the future.

As for the actual content, it includes:

  • Transitions – which affects the speed at which animations happen.
  • Animations – this is the function that actually makes the animation happen
  • 2D/3D Transforms – which is a overview of how the animations would work and look like
  • Perspective – to show how one would change the perspective of a object with code
  • SVG (Scalable Vector Graphic) – a file type for vector images that allows you to directly affect the code. It is also commonly used in animations as it is one of the smallest file sizes.
  • SVG Animation – followed an online tutorial to learn more about the code. This animation is done by moving the nodes you use to make the image. Thus you need to ensure you have the same number of nodes in every image to make the animation work.

One thing I learned through this is the amount of effort that goes into making animations accessible across different browsers. The code I wrote works in Chrome. Browser support is specific syntax that allows your site animations to work on multiple browsers. To learn more about Browser Support click here.

To show the animations I used Xbox live screen recording to make the video.

Click here to download the original practice file.

References

CSS-Tricks, 2015. A Guide to SVG Animations (SMIL). [Online]
Available at: https://css-tricks.com/guide-svg-animations-smil/
[Accessed 21 10 2019].

W3Schools, 2019. CSS 2D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_2dtransforms.asp
[Accessed 21 10 2019].

W3Schools, 2019. CSS 3D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_3dtransforms.asp
[Accessed 21 10 2019].

W3Schools, 2019. CSS Animations. [Online]
Available at: https://www.w3schools.com/css/css3_animations.asp
[Accessed 21 10 20191].

JavaScript basics

adminLeave a comment

We had an introduction to the JavaScript language and how it fits into our skill set as web designers. In the class we were asked to do an online tutorial on JavaScript to get the basics. This tutorial is made by Codecademy and is a free online platform to learn and practice coding. The syllabus is also frequently updated and thus a good solution for current developers to stay up to date with new addictions to coding languages.

Screenshot of Introduction to JavaScript progress on Code Academy tutorial.

References

Codecademy, 2019. about. [Online]
Available at: https://www.codecademy.com/about
[Accessed 21 10 2019].

What is Ruby on Rails

adminLeave a comment

Where HTML is the builder and CSS is the designer in a website; JavaScript is the wizard. JavaScript is the one that makes stuff work such sending data from forms or some specialised functionality. All three of these languages focuses on front end design.

Ruby on Rails works on the back end of websites and apps to request and fetch data from databases and to display data that contains HTML, CSS, and JavaScript content.

Ruby coding language is best understood when compared to JavaScript. For example, in the following video you see how you would use Ruby and JavaScript.

Ruby is easier for the programmer to use. It is simple and thus harder to create errors and bugs.

“Ruby on Rails (or Rails) is a web development framework that gives Rails developers a time saving method for writing code” (Morris, 2018). Frameworks are collections of code libraries that are referred to in the coding process to save time when doing time consuming and repetitive tasks such as building menus or forms. Rails is built on the Ruby coding language. It’s key tenets are:

“Conventions over configurations” which helps save time by defaulting to what their developers believe are the most common convention rather than specify though intricacies of configuration files.

“Don’t Repeat Yourself”: the DRY principle which basically mean what it says. If you have to write the same code twice, then it’s written wrong. This helps keeping things simple which means easier to maintain and harder to mess up.

(Morris, 2018)

The role this syntax would fill would be as an aid to build websites. You cannot use this to replace the original trio, but rather as a method of doing the same things differently. This would be a good addition to a designers repertoire for projects that need to be updated frequently.

References

Morris, S., 2018. 4 Key Things You Need to Know About Ruby on Rails. [Online]
Available at: https://skillcrush.com/2015/01/29/13-ruby-rails/
[Accessed 13 02 2019].

Refined Website

adminLeave a comment

Refined Website Rationale

I ended up changing the design to a one page design. It feels more cohesive and makes more sense that having such small bits and pieces on different pages. I also changed the colours to fit the logo.

The images is in sliders with smaller images so that people can see the room in multiple angles. I also added a image of the house from the street so that people will be able to recognize it. These sliders are very big since it is the most visually appealing way to advertise the house itself, which is the point of the website.

I added were icons to the activities. Originally I wanted to have a written narrative, but I ended up making the icons instead. It uses the same colours of the logo as well. I also added links to google maps that has directions to other places in the area.

Bookings can be done through the links to reputable booking sites and you can see a calendar to ensure the dates you want aren’t booked.

Finally, I added a map for directions to the area from the airport. This was specifically done done because the client always has to send these directions to people so that they don’t damage their car by taking googles recommended route. Most of the other roads in the area is in a horrible state.

The font is a google font called Roboto and Open Sans. These fonts are also linked to the google fonts database, in case users don’t have these fonts.

Download the working files of StilleWaters – Final website here

Final Website design: Stille Waters

 

 

Week 19 Web design

adminLeave a comment

We consulted on our websites in class and just continued working on it.

I really like embedding things in the website, but it is so tricky to find things my client is capable of using without having to pay for it. I really like SociableKit but I need to pay to use it and the free trial wont last long enough for marking purposes. I probably will end up paying for this when I start working and have enough clients, simply because of how powerful of a tool it is for embedding interactive social media feeds, galleries, calendars, etc. It also does not ask for increased payments on how many people see it but on how many solutions you use.

Below is a embedded Google calendar and Facebook page. The Google calendar is simple enough to use for my client. She can make notes and share chosen information to clients. I wish I can change the design a bit. The Facebook feed looks odd to me. I used one for another guest house I am making a website for, and it looks odd. I also looked at an Instagram feed but my client does not use it and you can only embed a single post for free, not feeds or photo galleries which you need a third party site for.

 

Week 18 Web

adminLeave a comment

Final Website Mockup

I tend to change the design as I work on it. There was quite an evolution to the design. Even the colours were changed to fit the logo more, but was still based on the blue colours the client liked.

Click here to see the image of the home page

Ironically, I ended up having so much trouble due to bootstrap. It was a pain to change the designs for certain things. I do like their code for the navigation bar, but the rest is becoming more of a hindrance than a help.