No Degree in Fun Web Design? No Problem.

Screen Shot 2014-12-07 at 7.45.14 PM

While I may be attending a $40,000 a year school, it doesn’t take a piece of paper to build on your Web Development skills— it just takes an interest in creating fun web design.

 

Fun Web Design? Huh? What? Why?

            If you’re like me, coding, debugging, programming, and other aspects of web development really get your jets going. FrillyWeb is constant updates—on our site and through e-mail!– on ways to make it fun for beginners, professionals, students, and the site users.  

 

What’s FrillyWeb Got to Do With It?

            Since I’m on my first semester of Junior Year and only recently chose a major I have been latched on to my professors’ every word and mentally note every tip and piece of advice. Every new thing I learn has me delving further and further into the latest technologies of web development—learning fun web design is just apart of the journey but it’s my favorite pit stop along the way.

Interested in Fun Web Design? Then subscribing to our e-mail list will keep you updated for free on all the ways FrillyWeb is helping keep the fun alive!

How to create Faded Bottom Text with Creative CSS trick

How will this help?

            As a web designer it’s partially our responsibility to make sure users enjoy their experience on a web site and sometimes that can be hard to do when there is a site structured entirely around text content. Although the typeface chosen is the utmost importance for text, there has to be other ways to work with the content to improve the user likability and encourage them to continue reading. This Creative CSS trick helped me with a website for an RWU criminal justice professor, he had a lot of published research done and adding this really boosted the look of the page.

What does the faded bottom text do?dl-thumb-fadebottom

            It’s a cool effect where the bottom of the page seems to fade out. The technique makes use of a fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. The example on the left should give you a good idea of how it’ll look.

So How Do You Use it? (Beginners)

            This creative CSS trick needs to be put in your style section of Screen Shot 2014-12-07 at 4.30.24 PMthe page you want it to appear on or a separate style sheet that you attach. The CSS code contains adjustments to selectors and also div id’s that you put around your text in the code. You can change the text to what you want but if you don’t know what you’re doing I wouldn’t mess around with any of the other parts of the CSS. The code is the top right picture. Now for the CSS to be applied to the text your text must be inside a div “<div id=”page_wrap”></div>.” At the end of the text inside the page_wrap div put <div id=”bottom_fade”></div> and then close the page wrap div. Make sure you use the exact same ID’s as the ones in the CSS, adding capitals or spaces will make it not work.

If you like this code subscribe to our e-mail list and receive updates for when FrillyWeb posts more! Tell us about how you used it in the comments to inspire other readers and share the post to friends so they can learn this creative CSS trick and more.

When it comes to creating a unique web design, fun is always the inspiration.

Just like a writer having writer’s block, web designers can also experience a shortage of ideas and with millions of sites out there unique web designs are crucial when it comes to make a client’s page stand-out. Just like art, web designers need some inspiration to create the page that will grab attention and keep users happy. If you watched the video above, and it sounds a lot like you, FrillyWeb found a couple of articles that’ll help inspire you by making the job a little more fun.

John Siebert’s article, which particularly helped me, outlines a 7-step process to creating a web page. Each step ends with a tip to make the step more fun. To read more click here. 

Jeremy Girad’s article, “A Fun Approach to Creating a More Successful Website,” promotes unique web design through improving the ordinary. His ideas came to him after watching a contest video for The Fun Theory. The Fun Theory was a competition in which people created videos that make everyday things more fun. So elements most web pages have, such as about me, contact pages, or 404 error pages are examples of pages that can be improved in fun ways for a better user experience. To read his article click here.  (Check out this post if you’re looking to improve upon an about me page with a lot of text.)

The last article I found is by Debra Gelman called “Designing Fun.” Her article shares how to develop a long-term approach to incorporating fun into unique web designs. Her steps are: define it, rank it, research it, task it out, and test it. Read more about these steps here.

These articles were pretty helpful, right? Subscribe to our e-mail list on our Free Updates Page and receive updates when FrillyWeb has new posts that could also contain helpful articles. Also, comment your ideas on how incorporating fun helps create unique web designs and share our posts and help spread the importance of fun.

Fun JavaScript Ideas to Jazz Up Your Website

JavaScript is one of the best ways to increase the fun on a web page. There are so many things you can do with JavaScript from the navigation to the content. I have three ideas that use fun JavaScript to improve your user experience. But first I’d like to point out the importance of JavaScript, it’s very complicated coding but they recently just introduced as a required class for kids ages 5 to 16 in English Public Schools. If you like fun JavaScript I’d encourage you to watch the video below to see how teachers are making it fun for these students of such a young age.

Games

Who doesn’t love playing a fun game? JavaScript makes putting a game on your webpage easy. From solitaire to packman, the JavaScript library has it all. Having a game will make your site more memorable to users and keep them coming back. One of the most popular JavaScript games today is The Convergence, which will remind a lot of people of Super Mario Bros.

Less Distraction

Another fun JavaScript code that improves user experience is the ability to maximize the user’s browser when the site is fully loaded. This will make the user be less distracted when looking at your page.

Picture Presentation

The last fun JavaScript idea isn’t as revolutionary but it’s essential. Every web site has pictures but the user likability comes from how they are presented. Using a JavaScript slideshow code will help present pictures in a fun and enjoyable way.

This won’t be our only installment for fun JavaScript so make sure you subscribe to our e-mail list to receive free updates when FrillyWeb has a new post. Comment with your fun JavaScript ideas and share this post with friends who might need some ideas to make their page more fun!

 

Fun HTML Codes Tutorial Classes

Abstract speech cloud and two connected computersFor a limited time only FrillyWeb e-mail subscribers have the opportunity to sign up for a tutorial class for fun HTML codes. Entirely online, I’ll demonstrate for an hour twice a week how to make use of hundreds of fun HTML codes through a program that allows viewers to see my desktop as I work and ask questions for codes that are giving them problems.

One lucky subscriber will win a 6-month membership to a web host and a domain name of their choosing. So make sure you subscribe to our e-mail list so you can sign up for the tutorial classes and a chance to win! Comment what want to see in the tutorials and share this post so your friends can have an opportunity for a FREE class in fun HTML codes.