by Cliff Nowicki | Oct 19, 2022 | Blog, Web Design
I’ve changed my main site’s home page a few months ago to make it look more updated after not updating for years. Before, it was a full image of something I took years ago which is a little humorous, but at the same time added nothing. No background text to tell you what to do, just a big ole image. I’ve recently been getting back into designing, drawing and creating and I really want to show my “behind the scenes” look at my projects.
If you’re reading this currently, on October 19th, 2022, the page looks like a divi template at the top and you probably have to click the back button on your browser to go back to my home page. I’m not going to lie, it’s messy and not in any sort of organization in its current state.
What’s on the list of things to do for this site?
- Create global header
- Create Blog Page template
- Create a case study design on a project I’m working on
- Create a better about me page
I’ll be hoping to get to these in the coming week alongside my game design project that I’m currently working on. I’d love to be able to properly show off what I’m working on with all my socials. For the time being, if you’re reading this, thank you!
by Cliff Nowicki | Feb 17, 2019 | Blog
I’ve been waiting since the end of November when I got the first initial contact to tell everybody about this news. Back in late November, I was asked if I would be interested in taking part in a .net magazine design challenge. For those who don’t know, .net magazine is an industry magazine for web designers and developers. The magazine has a section called “Design Challenge” in which 3 designers are given a brief and must create a home page layout / mobile layout version that coincides with that brief. Back to me, I was chosen to see if I’d be willing to take part, as I’ve showed interest in the past on twitter.
I got the brief and with only 3-4 days to complete it for editorial proofing and what have you, I got to work. I got a single brief that read “This month we would like you to design a Secret City Guide. The focus will be on the lesser known attractions, restaurants and areas of the city that the typical tourist doesn’t get to see. Think how the user may search the site and the information they will want“. It was a real fun time coming up with ideas of what it could be and I spent the following nights after the kids went to bed to come up with what I thought would be a great site.
I found myself having more trouble writing stuff down as I’m awful at grammar, writing and putting my thoughts into words. I’m better at putting them into art, but I tried my hardest so the editors didn’t have to roll their eyes too hard at me. After that, I had to choose a photo. I looked through my stack of .net magazines to kind of see how everybody else looked. Lots of fancy well dressed people with very light backgrounds. How could I compete? I’m just a bald dude with a beard that loves video games and has a closet that is 80% video game / 80’s reference tee’s. I decided to go with an image I took a few months earlier of me holding my favorite Fallout mug with trees in the background. I could of dressed all nice, but that’s just me. I wear what’s comfortable and love video games! Anything else and those who know me would know I was being fake, a poser and a fraud.
After a few back and forth emails, talking with the editor on text changes, it was done. I was shown what the page will look like in the magazine and I was totally excited! Now I just had to wait…and wait. Did I mention this magazine was based in the UK and we don’t typically get copies in the stores until late in the month or even a month after the original issue?
The day finally came today! I went to Barnes and Noble and I found the issue! Issue 315, February 2019. I’ve been excited all day since I can now put up the artwork on my portfolio! It’s called “Hidden Gems – Detroit Field Guide”. A website where you can search the lesser known places in the city on the go. Here’s the link and I hope you enjoy! https://www.behance.net/cliffnowicki
by Cliff Nowicki | Sep 16, 2018 | Blog
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!
