Five months ago, I decided to start learning web design. I had a very vague idea of a handful of HTML tags and CSS classes, but otherwise, it was a mystery to me. But, the world is going digital, and I have plans to break out on my own as a full time freelancer, so adding to my skill set was essential. I started with some basic lessons online, and I did a simple site for my mom’s business, but I had to take it to the next level. I decided my outdated site really needed an update, and it would give me new opportunities to learn some more advanced skills.
I decided I liked parallax design and wanted to do a single scroll site. Web trends are gearing toward single scrolls now that mobile and responsive design is so essential. Of course, 5 months ago, I didn’t know what parallax or single scroll meant. I had to Google that. I used super advanced search terms like “what is that animated background that scrolls on websites.” Google found it. Ha! It really was a process of learning what the trends were and searching websites for ideas I liked and basically using the internet to even find out what they were called.
Next steps meant some tutorials. I started with basic lessons on Code Academy, which is an awesome free site that offers web tutorials in HTML, CSS and the developer languages. But, honestly, after the basics, I just had to start doing. I built my wireframes in Illustrator, and then I went to Dreamweaver to start building my code. It was endless battles of trial and error and using resources like Stack Overflow and CodePen to troubleshoot the problems I ran into.
Frankly, I didn’t understand most of the answers. I began by cutting and pasting their code just to see what happened. Once I understood the functionality, then I started learning more and more ways to customize it to make it my own. I learned how to fix problems and make it work for my site. It was a challenge, because as a designer, I have a strict aesthetic that I feel my designs must adhere to. Therefore, I refuse to let a technical problem get in the way of good design. This is probably why it took me so long to get my site right, but I know I’m putting my best work out there, not a work around.
I wanted my site to be responsive. Given that I wasn’t even entirely sure how to design a site in general, taking it to the responsive level was a new headache, but essential for success. It took me nearly two weeks to figure out how to make my menu transition from a top nav bar to condense down into a menu that will toggle in a mobile setting. It involved jQuery, which is REALLY a mystery to me, but I was able to learn enough on Code Academy to be able to manipulate other code.
I’d always learned that web graphics were strictly low res GIF, JPG or PNG files. Turns out, with HTML5 and CSS3, you can now do vector graphics for the web, if you use the SVG format. Who knew?! Music to my ears though since vector art is so much more clear and crisp. CSS3 allows for fun transitions and effects on text and scroll functions. I wanted to add a scrolling image carousel for my portfolio work. The basic Boostrap carousel didn’t work for me and didn’t produce what I wanted, but I found a slider I liked better and made it work.
I had to ask a developer friend for help one time during that menu debacle, but otherwise, I did this entirely on my own through self troubleshooting and problem solving. I’m really, really proud. I feel confident that I’m getting the hang of this.
Web design and development is a complex industry that changes every 30 seconds, so it’s impossible to know it all, but I have a really good start. And, after all the screaming, head banging, I can actually say that I really love coding. It works a different part of my brain that I thought couldn’t function like that. It gives me a new outlet for my creativity and a new medium to express myself.
My site is 99.9% done, but the final tweaks are adding and swapping some portfolio photos, testing it in a few more mobile options and proofing my copy. All of the functionality is there. I can now tell people, I am a web designer with a growing knowledge of front-end development. Visit it at www.noeldolan.net to see the mostly finished product.
RESOURCES
- Twitter Bootstrap (Makes for great frameworks and easy to learn)
- Stack Overflow (You can find the answer to almost any problem here)
- CodePen (see how other people coded their stuff and practice your own, live in the browser)
- Code Academy (Learn the basics in small, easy to digest doses for free)
Homepage shown at full screen
Explore my work is my first option, seeing the intro to my work and the gallery is a cards style layout with rollovers that scroll up to reveal the product.
Example of my portfolio page, each one of my pieces will have an image gallery
Below the photo gallery is an explanation of my work, the client challenge, the deliverables, etc.
The portfolio pages have a small footer that includes social media information and basic contact, but doesn’t have the big contact form and big graphic seen on the main site.
About me section, shows a brief bio and an option to download my resume. I inject some quirkiness with my design and list my cat as a production assistant
I offer brand identity, print design and web design services with my company
This is the main contact footer on the big page that includes a form and more elaborate design for the plane and social media. I used a plane since I’m a creative explorer.
I’ve included client testimonials on my site as a way to break up the content and show that my clients like my work.
The horrid responsive menu that took me weeks to figure out, but I eventually did. I’m so proud of that stupid toggle, it’s kind of ridiculous.
creativeplateblog.wordpress.com 