Designing a Splash Page in a Few Days

People have side hobbies and that’s pretty cool. My side hobbies include AR, VR, video games and a video game channel on youtube. On occasion I also stream games on mixer with friends or just when I get a new game. One of my favorite series is coming out soon for the Xbox One and that’s Forza Horizon 4. The Horizon series has been my favorite racing games since it’s based around a music festival and you drive in a HUGE open world area over different terrain. I was super stoked about it and even had the Ultimate Edition pre-ordered months ago to make sure I get to play 4 days earlier before it’s official launch.

My excitement didn’t stop there because I knew I was going to stream this game. I just downloaded the free Adobe XD program that I use for work, on my home PC and wanted to practice some site designs. I also wanted to see how our developers used it on a day to day basis after they take it from us designers. So this was my chance to try to design then collect and use XD to develop a site. I decided to create a website splash page announcing that I will be streaming this game and all are welcome to watch! I got started right away with some sketches to see what I wanted and how I wanted it to look. Here are some of the sketches created:

If you were following my on Instagram at https://www.instagram.com/cliffnow/ you got the sneak peeks of it all!

After I had all the sketching done, I broke open Adobe XD and went to town. I tested some ideas out and realized that due to asset issues of finding what I wanted in a good enough quality, I had to make some changes. I also began to look more into the development side of things and realized that there were a few things I was unsure of, or would take more than a day to put it all together. This was meant to be a quick weekend project, and I didn’t want it getting out of hand. Make it simple stupid!

The final design created was this:

 

The final design isn’t that far off from what I developed! You can view the design on my behance here. Once I was finished, I had to decide how to put this together. I wanted quick and simple, so my two choices were to use a quick pre-made grid framework from Bootstrap or Foundation. Why those two? Those were the two frameworks I’m familiar with and I’m not going to “challenge myself” when I need something done in a day. I went with Bootstrap since I’ve used it the most. Since I only needed the grid, the new Bootstrap 4 had a grid only css file, which worked great to keep load speeds at a minimum.

My original idea was to offset items, but then realized that wasn’t going to work for a mobile version. I was able to find some quick solutions to the problems. The process of using Adobe XD’s design spec helped to a point, but I found myself going back to the original XD file for correct sizing between objects which was kind of a pain, new respect for our teams developers. Batching out the images was super fast and easy and I’m glad that’s a feature! It took some tweaking here and there, but I got the images just right.

The next task was to figure out the countdown timer. I looked around for some simple javascript that I would be easily able to edit the CSS for to make it match up with my design. Could I of done it from scratch? Of course! Again though, timing. I could crack open a book or go through some online tutorials OR I could find a script. Not only did I find a script, but I also found one that perfectly matched what I wanted with great documentation. Win win! You can check out the script I used here. The only down side is that I was only able to go to the launch date, and not the time as of this posting. I’m in the process of asking some developer friends to see if there’s quick fix that my feeble javascript brain didn’t understand…or tried to understand at 2am. Bad combo.

Everything looked great on desktop, now it was time to add some media queries to it looked great on the phone. I didn’t have to spend too much time, which was great as it was a super simple page. After I tested on my Chrome browser, I did some testing on Firefox as well as my Pixel phone. Everything laid out nicely and turned out smoothly. I put it out there on the internet, and now it’s time to wait and see if anybody will watch me play Forza Horizon 4 on September 28th, at 9pm.

View the full complete site here.

It was a nice fun exercise in sketching, designing and developing within a few day span. I feel that the move to using Adobe XD for my full design process was not only a smart move, but a good one that helped my workflow rather than using Photoshop to layout a website.

 

Edit: Update 12:50pm. A good developer friend, Teresa, was able to help me solve my countdown clock Javascript timer issue. Thanks again!

Artificial Intelligence Bots – First Attempts

There’s no blog post today, but instead I’ll give a quick heads up on what’s going on. I’ve been busy with family things and enjoying the last few weeks of summer with my boys before they go back to school.

I have been playing around with wit.ai, a ai bot website, where I intense to create my own bot for an AR app. I’m still working on a course where I will use the bot to be able to voice control my app and tell it to do things. I’m not sure how, as I’m not to the voice part yet. However, I’ve bee teaching it new things and plan to keep it open to the public. Since the app is essentially a car model with interactive pieces, the voice control will let me say “Open the doors” and then then doors will open. It’s been real fun teaching the bot.

The entire time I kept thinking how I could make a Jarvis from the Iron Man movies. Little steps first! My hope is high with AR right now. I plan on look more into other ai bot creators and give a quick overview for other beginners like me.

Cliffs AR/VR Life Recap – August 6th – 12th

Welcome to another quick recap of my AR/VR life, which has been super fun with momento360 and 360 images.

Websites

Momento360
This is an easy upload are to put your 360 images up and check it out online through the browser, or through your phones VR headset. I’ve been playing around at work with this, so I don’t really have anything I can show as of right now, but I’m working on it. Super fast and easy to upload and share.

Flickr VR
I literally came across this site thinking the following plugin “Flexify 2” was called flickr 2 for some reason. Either way, it was a happy mistake. Flickr VR is Flickr, but with only 360 images to view. This helps you check out all the cool stuff on your headset without getting stuck with a normal image. It’s been fun checking out some of the breathtaking images.

Software

Flexify 2 – Photoshop Plugin

This is a plugin I found online for the equirectangular grid that takes that grid, turns it into something manageable, and lets you built a cube VR room from there. What exactly is an equirectangular grid? It’s a grid use to proportionally show align everything in a 360 image. The process is simple. Take a flattened image of your grid, use the plugin to turn it into a “horizontal cross”, insert what you want or hatch together your photographs, and reverse the process. This easily puts it in an image ready to upload to your favorite VR image area.

The only downside is that it’s pretty pricey at $55. Is it worth it? You can check it out for yourselves with a free trial. I tried doing a warp in Photoshop myself, and I seem to do a real hack like job. This plugin makes it super easy to put it all together. If this becomes a thing or I find a niche in it, this plugin will make its way onto my computer.

That’s all I have for this week. Stay tuned as i continue a few more things and post them up to Momento360. I’ll be making sure to put the up on my twitter as well as post here for a more complete version.

Cliffs AR/VR Life Recap – July 30th – August 5th

Here’s a random snap of me reading in the waiting room my wife took while at the hospital. The book neatly hides my 4-6″ goatee and gives me the nice appearance of a clean shaven man. It’s been a crazy week involving multiple trips to the hospital for family reasons so I haven’t been able to do any actual work in Unity or programming this week. On with what little I’ve looked into this week.

News:

Make VR Designs

I saved this early in the week to try later so I could hook up my Merge VR and try to see what I could do. While I haven’t done that, and haven’t gone through it to see if it’s worth doing, I plan on checking it out later this week. It’s on my list!

Software

Cortana

I was looking over at my Yeti mic wondering if I could use it with Cortana on my Windows machine to make it do stuff for me. I figure Cortana on my xbox interrupts me all the time mid-game asking me if I want something, why not my PC? Well it turns out to work just fine! I’ve been mainly opening up applications by saying “Hey Cortana, Launch…” followed by the name of the program.

To set it up, just go to Settings > Cortana and make sure it’s checked to “On” for “Let Cortana respond to ‘Hey Cortana’”. That’s it! You’re now set up to talk to your computer with your mic.

Events:

Inclusive Web-based Virtual Reality: A11Y & WebXR Immerses the Visually Impaired Webinar

This is a meetup BUT it’s also a free webinar, so check it out! Here’s a description from their page:

This presentation will showcase different approaches to accessibility in web-based virtual reality. Specifically, we will present an experience designed for visually impaired and blind users, showcased on the Oculus Go, empowered by spatial sound and audio navigation. We will also touch on a collaborative project with Equal Entry, that uses spatial audio in a virtual representation of a critical NYC street crossing, to train and prepare blind users to navigate and orient themselves in the everchanging urban jungle of Manhattan.

Thanks again everybody for checking this blog post out. If there’s anything you wanna show me, have me try out or just look in to, make sure to reach out!

Cliffs AR / VR Life Recap – July 23rd – 29th

It was a pretty fun week as my focused was changed to VR momentarily. I picked up a headset that is also good to use with AR and spent a lot of time downloading random apps.

News:

Augmented Reality Puts the Magic in ‘Magic: The Gathering’ Cards

This was really awesome to see. In the beginning of my AR idea list, Magic the Gathering took top of it. The concept seemed simple to have stats pop out and somehow mix with each other. This news article shows just some simple tricks, like video and what appears to be language changing, which is great for those who came across foreign cards but would really like to read them.

Hardware:

Merge VR 

This was the headset I picked up for only $14.99 on sale at Microcenter. You can click on the link above for Amazon who has it currently for $29.99, but if you’re anywhere near a Microcenter and love going there, go check it out to see if it’s still on the cheap!

VR Videos:

Clouds over Sidra

“Meet Sidra. This charming 12-year-old girl will guide you through her temporary home: The Zaatari Refugee Camp in Jordan. Zaatari is home to 130,000 Syrians fleeing violence and war, and children make up half the camp’s population. In this lyrical VR film, Sidra leads you through her daily life: Eating, sleeping, learning and playing in the vast desert city of tents.”
This being my first official video in full VR, I was hooked! This will forever be the one I compare all things too since it’s that first video on a headset.

Apps:

VR Thrills

This is the first thing I found on the app store when I got my headset. I always wanted to go on roller coasters, but after a few times, I had to stop because i’m just not a roller coaster guy. I wouldn’t say this is the best app, but it’s what I tried. I kept freezing and the quality was very poor.

Movies:

Ready Player One

After reading the book, I was excited to finally watch this movie on Blu-Ray. While it doesn’t stay fully true to the book, the entire concept is there and it does a pretty decent job of at least keeping things together.

That’s all for this week. Make sure to check back throughout the week for any random posts and until next week, see ya!

Merge VR Headset

I’ve always wanted to buy a headset for my phone that would allow me to slide my phone in and watch VR. Yesterday I picked up a Merge VR headset for about $15 at Microcenter. I originally went there for a spare mouse, but I don’t think I could ever just go into that store and get what I came for and leave. There were a handful of headsets to choose from for my phone that ranged from $5 to $50. The ability to open up a window for AR is what sold me on this particular set.

The headset sat on my dresser until today when it finally saw some use. You think for someone so excited about it, he’d try it first thing right? My phone didn’t have any particular VR programs on it, but I was reading a book about VR today and it mentioned a website with the full video experience. The video is a short one called “Clouds over Sidra” which gives you a VR mode. It was super fun to watch for the first time! While my phone had about 15% battery when I started, I passed the headset around to the family so they could check it out and they were all amazed.

For the first time my kids experienced VR in a way and they were super excited and happy. It was different. After watching them half stumble, reach out as if they could touch someone, we had to set some ground rules. The first one is obviously space. What was I thinking passing them the headset in a crowded room? No touching, no stepping in front of people and no trying to mess around while having the headset and earbuds in.

I’m currently looking for all the VR stuff I can find for my phone so I can test out this headset.

Cliffs AR Life Recap – July 16th – 22nd

It feels like a lot of stuff has happened in the past week with injuries and everything. I’ve finished the book “Common Sense, the Turing Test, and the Quest for Real  AI” and it turned out to be a pretty interesting read. I wasn’t sure what I was hoping for in reading it, but I came out with some new ideas. I’ve also dove more into the Udemy course by Diego Herrera called “Discover Voice Controlled AR Apps”. In It I did a quick 10 minute Unity / Vuforia demo where it was essentially creating a scene that used my webcam as I raise my phone to show a picture of a Lamborghini. The screen would then show a 3D lambo I placed on it. Old and boring to most, but fascinating to me! My screen came out all janky when trying to screen record it, so I’m looking more into OBS to figure out the issue.

Anyways, here’s some random resources I came across this past week, hope you enjoy!

News:

Next Reality 

I just found this site today looking for AR news. There’s tons of sources I use for web design and development, but being new to the space I had no idea where to go for AR stuff. If there’s any AR or related sites out there such as VR, then please let me know!

Unity 2018.2 Is Out

I meant to post this last week but forgot, but it’s worth downloading the latest and greatest if you’re new like me.

Books:

To go with the Udemy course I been doing, there’s a portion of the course to teach that says it’ll teach Machine Learning. It’s most likely on a small scale, but I decided to check out the subject matter with a few books that I plan on reading, this time with affiliates!

 


I feel like I’m not 100% sure on what goes into an AR resource post. If there’s something glaring that I’m just flat out missing or a particular focus, then let me know! I’m also not sure exactly what to call this weekly round up of AR related things I find. It feels like it’s just missing the point for a serious AR post or something. I’ll possibly come up with some tester names over the next few weeks to see what works best.

July 15th – 2018 – Cliffs AR Resources

While this list isn’t a bunch of stuff that is the hottest, greatest or even newest, it is what I’ve been looking at. If you want the latest resource then keep on moving because this is my resource list. I’m giving you the look into what I’ve been looking at, watching, reading and everything outside the actual programming aspect of it all. This could mean links to articles I’ve read, books I’ve read, books I want to read, online deals for resources, tutorials and everything. Not everything on this list is free, but it’s worth checking out!

Books:

Common Sense, the Turing Test, and the Quest for Real AI (MIT Press) 1st Edition by Hector J. Levesque (Author)
This book has been intersting just learning more about everything the title is. Common Sense, The Turing Test and the Quest for Real AI. I’m nearly done, but it does bring up interesting studies that were done to try to create AI as well how scientists are trying.

Experience on Demand: What Virtual Reality Is, How It Works, and What It Can Do
I picked this one up at the library and plan on reading it after the first one I mentioned.

Humble Bundle

Virtual Reality by Springer Nature
I love a good Humble Bundle special! My collection of Steam games is essentially 95% from paying the minimum $1 for a few cheap games. I was bummed at first knowing they had books, but then was happy to know it was all about Virtual Reality! I plan on getting the full tier. Act fast though, this deal ends July 16th at around 2pm Eastern I believe, which isn’t much time if you’re reading this.

Tier 1: Pay $1 or more

  • Learning Webbased Virtual Reality
  • Processing for Android
  • Develop Microsoft HoloLens Apps Now
  • Humanity 2.0

Tier 2: Pay $8 or more

  • Human Factors in Augmented Reality Environments
  • Virtual Reality and Animation for MATLAB and Simulink Users
  • Feeling Present in the Physical World and in ComputerMediated Environments
  • Beginning Windows Mixed Reality Programming
  • Pro Processing for Images and Computer Vision with OpenCV

Tier 3: Pay $15 or more

  • Echoes of Other Worlds: Sound in Virtual Reality
  • Augmented Reality Art
  • Being Really Virtual
  • Augmented Reality
  • Learn Unity for Android Game Development
  • Envisioning Holograms

Online Udemy Courses

Introduction to Unity for Absolute Beginners 2018

If you’ve seen my last posts, then you’ve seen some things I been creating. I did those through a free Udemy course by Diego Herrera. I was unsure of where to go for AR and Unity stuff and I saw him but I wasn’t sure of his teaching style. There’s a ton of cool Udemy courses out there showing cool things, but I’ve purchased those courses and the teaching style just seemed out of place and hacked together. He offered the course for free so I gave it a shot. I absolutely loved his tone and teaching style that when I went looking for more, I went and made a purchase for his latest course.

Discover Voice Controlled AR Apps | Unity & A Cloud Based AI

Just by watching the preview for it, it seems like something I can’t wait to dig into after writing this article. Expect more of my next blog posts to be focused around what I create in that course.

That’s all I have for today. Short and simple and of course I came up with it in the past 6 hours cause I was so excited to share with what I’ve been checking out today. I look forward to bringing you more info on what I was able to find out on my journey!

— Anything linked to Amazon is under no affiliation, so I don’t make any money. 

FPS Terrain building in Unity 3D

I’ve posted a video before on a quick set I did in Unity 3D with two space soldiers jumping up and down. I used a Frame Capturer package I found on github which can be found here. For this video today, I tried using OBS on window capture which made everything kind of janky and choppy. I’ll keep on trying though.

WARNING: I’m new to all of this, so feel free to laugh or just reach out and tell me all the technical things I’m missing out. I want to learn!

Today I’ve done something new! I started out with stuff that Unity already provides, which makes things really easy when you have no idea where else to go. I set up the scene by painting the grass on and making mountains with the terrain component. There were a lot of options for grass and trees that I used to just splatter around the world. It was pretty cool picking the random size of everything and the density of the trees. It’s almost like a hard to navigate Minecraft mode. Hard? Yes. I’m still getting used to the Unity interface as a n00b, but I’ll manage and be able to hot key and slide through it all soon enough.

I used an FPS controller to create that walking around view. Walking through the trees and grass was pretty cool, but I wasn’t done with the rest of my tutorial video! Adding in wind to blow the trees around was the next step. The levels of everything seemed to be off since it seemed like a hurricane at first, but I changed it down. It feels a little windy and its set at a sphere, so only parts of the map are affected. I managed to create a dust storm next in the mountains and later added it to my FPS controller so it followed me around. A Particle system was set to my FPS controller as well and the end result is almost a blizzard like feel, which I thought came out well. Disregard the fact that EVERY thing is green.

That’s what I did and learned in Unity 3D today. It was fun and my only regret is not getting more detailed on the map. Maybe in the future I can put together a local area? Maybe check out google maps and recreate some areas familiar to me? The idea is to learn AR, so that may be put on the back log of things to do when I get frustrated or stuck in the programming.

Refresh!

Everybody needs a refresh sometimes, and this is my temporary refresh. I’ve had my portfolio site up for nearly two years, showing off stuff that’s almost 4 years old. What’s the point in that? The web design changed, but the projects remained the same. I kept telling myself when I get the time, I’ll properly update my portfolio site with new projects, new case studies and explain everything I do and all that jazz. I’d fill it with all that design bullshit jargon that everybody looks for in a designer with words that are supposed to make it sound like you deserve the title “President of Everything Design”. I’d name drop every UX twitter handle I follow, quote everything they say and walk around with a big jewel encrusted rod touting the next big thing.

That’s not me. Those who know me personally are possibly laughing right now about how ridiculous I’d look and sound doing any of that. Whoever has spent more than 10 minutes with me knows that I like to simplify every little thing. I don’t like making everything I do sound like I just came down the mountain declaring the commandments of design. What I do is get super excited about things I learn. Hounding people and oversharing something I learned so they can know about it too is just something I’m a natural at in life.

That’s what this blog is going to continue being about. I’ve archived everything from the past so it’s not page after page of my old exciting times. Going forward, my new focus is going to be centered around my current loves and passions. Right now I’ve been getting into the idea of AR and maybe even VR. There’s a few Udemy courses ready to go as I learn the basics of Unity 3D and C# programming. Why did I choose Unity over Unreal? There was more info in my search when it came to AR/VR for Unity 3D, so that’s the direction I took. Nothing personal and I don’t hold any loyalty over one or the other. I’ve used Unreal in the past and I’ve loved it, but this is just the way I’m going.

The ultimate goal here is to create AR or VR games for gamers to enjoy and play. Video games have always been a big part of my life growing up and even at 35 as of this writing, I still dream of being in the gaming industry. So why not start now? Ready. Set. Go.

Ok, not yet. I’m not done talking and referencing myself in this blog. I’m still a web designer! I still love opening up Photoshop, Illustrator and Adobe XD on a daily basis to create great designs. Will that stop? Of course not! I’d love to pick up some freelance work, especially for the gaming industry. All my work and side projects will be shown on the portfolio link that goes to my Behance page, https://www.behance.net/cliffnowicki. Go check it out! Unlike your typical portfolio where people put their best 5 or so pieces, I’m just putting up everything. Why not?

This page will be centered around my next journey as well as my passions. I’d love for you to share and check me out and everything on this page as it continues.