✯ A Thanks and A Farewell ✯ (And My Best Posts)

To anyone who has been following this blog until now: thank you! However, I will no longer be posting on this blog since it was just for a college class. Still, I’m proud of finally being able to write and create the things I’ve wanted to try making forever while providing advice on the things I love that hopefully others have found and will find helpful. In this post, I’d like to look back on my best posts that I think will be of most help to any college student or someone interested in web design that somehow manages to stumble across this blog.

1. 7 Tips for Creating Your Portfolio Website [Podcast] (And PSA for EveryoneOn.org!)

This post is rife with resources, tips, and tricks I have collected over the past year that have helped me progress in web design and explore my options for creating my own portfolio site on a budget, and I think that beginners will benefit greatly from hearing them!

This was my first ever attempt at recording a podcast episode type thing, and I never considered using this medium for the topic of this blog, but the experience definitely taught me more about the importance of sound quality and the challenge of writing and editing professional-sounding scripted segments. Audio is just as important as visual, and the process of editing something that sounds great takes time and effort. I also learned how to quickly sell something like an organization’s cause during a “commercial break” as well as how to handle an online PSA campaign with other blogs (Beat the Algorithm and Game Day Bites)!

2. Professional Portfolio with Tumblr [Video] (and the Great Thing about Videos)

This post not only explores how Tumblr of all sites can be useful for creating legitimate and professional portfolio sites but also my process of creating the video itself since (in many peoples’ opinion) the YouTube video killed blogging. Tumblr also has a strong niche of people in all levels of experience who use it for site development, and I have plans to use Tumblr for my own projects!

This was the first time I ever got to complete a serious script for a video and actually create it, and I learned so much about clarity, timing, and having a solid script and plan when shooting and editing a tutorial video.

In conclusion, it was lots of fun creating this site and the content on it, and I hope you learned as much as I did reading, watching, and listening to what I have to say about web design and creating portfolio sites! I will not be updating this blog anymore, but anyone who is interested can check out my Twitter and my portfolio site for more content similar to what I’ve posted on this blog. There you’ll also find information on my new projects that will hopefully also be of interest to you! And, don’t forget that WordPress.com (the service I used to make this blog) isn’t a bad option for making sites either!

Take care and enjoy the summer, everyone!

 Liz 🐣

How to Use Memes to Further Your Brand (I’m not kidding)

That’s right. One of the ways to get people to notice your content is to turn it into a meme. Even the things that get hate will be circulated enough until it becomes a meme, which means more people will look at it, and the chances of someone who likes it finding it increases. So, today I want to talk about memes, and how the usage of memes can help your brand online, either by turning your stuff into a meme, or creating memes yourself.

There are three categories of memes that I want to shine a light on:

1. The unintentional meme of something everyone hates

comicsans

Screenshot of a Google April Fools Page featured on the Comic Sans Know Your Meme page

Comic Sans is so hated that memes of it are hilarious to look at. The above image is a screenshot of an April Fools joke page that Google made for a fake extension that turns every text on browser pages to Comic Sans because the research “shows that users thoroughly read every piece of content displayed in Comic Sans” according to the heat map on the left.

User The Christmas Pyro sums up the meme’s charm in a comment on this image:

“Just like a car accident. It’s horrible but you just can’t take your eyes of [sic] it…”

Exactly.

However, if your portfolio site uses Comic Sans, please change the font. Just because we can’t pry our eyes off it, doesn’t mean we like it.

Comic Sans is an example of something ugly that people can’t stop mentioning, even though nobody likes it. The font originated in 1994 when designer Vincent Connare created the font for Microsoft after noticing how out of place the Times New Roman font looked in the speech bubbles of the Microsoft Bob virtual assistant. It was originally meant to be used for children’s computer programs, but its inclusion with the Windows operating system saw its popularity explode in all sorts of spaces from personal word processing to the corporate office (“Comic Sans”, 2018). Since then people have been criticizing it as a bastardization of good design when it’s used on professional or serious documents.

Even though the Comic Sans meme was unintentional, you can use this “meme strategy” by creating a website that is so hideous, nobody can stop talking about it. One example of a person who did this is Ling Valentine with her car rental business website LINGsCARS.com. It has been hailed by many as being “so bad, it’s good” even on news websites like NewsWeek.com, helping it reach some levels of fame. This is hard to pull off, however, because it’s likely you’ll end up a joke in the end, so I recommend that you leave this one up to chance.

2. The shareable meme you can make yourself.

whatpeoplethinkido.png

Uploaded by climaxmedia on Know Your Meme

The key to the What People Think I Do meme is that it is relatable and easy to make yourself. It used to be everywhere a few years ago, with one of the earliest instances being spotted on a Facebook post from 2012 about science students, but there were a few precursors to the meme with less panels. This meme spread because of how easy it is to make and the chuckle it gets out of friends and strangers due to the humor related to professional occupations. It also helped that some popular internet users helped it gain traction with their own submissions (“What People Think…”, 2018). I even made one for myself but we don’t talk about that. Admittedly, I didn’t make the image above even though I should have, but occasionally creating and sharing a meme on Twitter related to what you usually create content about will generate you some likes and follows. People like funny people that they can relate to, so use memes sparingly to show that you have a sense of humor. The meme above is from the point of view of a web designer, and although it’s filled with jokes, you get some idea of what web designers do and how they feel about what they do. When making your portfolio, try to put out your best foot forward on whatever it is you do – make people think you do what you think you do!

3. The “fabricated” meme.

Not many people have thought about the fact that The Mannequin Challenge of 2016 was one of the most genius acts of viral marketing ever. The song featured in almost every single Mannequin Challenge video is hip hop duo Rae Sremmurd’s “Black Beatles”. The great thing about challenge memes is that they are participatory and nobody wants to be left out, so you will see large groups of people doing it and posting it online for views and praise. To become popular from a meme is genius because it is also subtle, like in the case of this challenge where the background music was what was being promoted. This challenge may have initially gone viral from a video made by high schoolers, but the concept is nothing new – the Improv Everywhere comedy troupe did a similar prank where they stood still for one minute in Grand Central Terminal in New York City on January 31st, 2008. The video of it has since received over 36 million views on YouTube (“Mannequin Challenge”, 2018).

Another popular form of challenge meme is the ones that individuals do, and these challenges are often seen in the art community on YouTube. If you can come up with an original challenge yourself that other people love, your name will spread far and wide over the Internet.

Now to get technical, what makes memes so effective? Well, according to Patrick Davison’s chapter “The Language of Internet Memes” in the book The Social Media Reader, memes are “malleable” and “replicable” because of the three components of memes which can be replicated or adapted: the manifestation, the behavior, and the ideal (Davison, 2012, p. 123). He explains what these components are like so:

“The manifestation of a meme is its observable, external phenomena. It is
the set of objects created by the meme, the records of its existence. It indicates
any arrangement of physical particles in time and space that are the
direct result of the reality of the meme.

The behavior of a meme is the action taken by an individual in service of the meme. The behavior of the meme creates the manifestation. For instance,
if the behavior is photographing a cat and manipulating that photograph
with software, the manifestation this creates is the ordered progression of
pixels subsequently uploaded to the Internet.

The ideal of a meme is the concept or idea conveyed. The ideal dictates
the behavior, which in turn creates the manifestation. If the manifestation is
a funny image of a cat and the behavior is using software to make it, then the
ideal is something like ‘cats are funny'” (Davison, 2012, p. 123).

Going by these definitions, we can say that the manifestation of the Comic Sans meme is the words typed out using the font. The manifestation of the What People Think I Do meme is the composition of images and text in the format of the meme, and the manifestation of the Mannequin challenge are the videos uploaded to social media. These three manifestations are varied and cover a lot of most memes. The three are easy to share and reproduce, so they are appealing mediums for the avid Internet user.

The behavior of the Comic Sans meme can vary widely as it depends on how one wishes to structure the joke, but it usually involves using the font for something one shouldn’t either intentionally or unintentionally like on the Pope’s retirement photo album or on the slides of the Higgs boson particle discovery presentation. For the What People Think I Do meme, the behavior involves coming up with the subject, finding images that represent the six phrases, arranging the images on a black background, and adding white text under the images. For the Mannequin Challenge, the behavior is way more involved because one has to coordinate a group of people to stand still while someone films them. Then the video is edited, and the “Black Beatles” song is added over it.

Finally, using Davison’s framework, the ideal of the Comic Sans meme is irony if used intentionally, or obliviousness if done unintentionally. The ideal of the What People Think I Do meme is the make a self-deprecating joke about one’s profession or hobbies, and, lastly, the ideal of the Mannequin Challenge is that making a ground stand still together is a difficult but fun cinematographic challenge. The ideal is probably the most important part of a meme because it influences everything else about how it’s made and why people will understand it.

References

“Comic Sans”. (2018, April 11). Know Your Meme. Retrieved from http://knowyourmeme.com/memes/comic-sans

Davison, P. “The Language of Internet Memes.” The Social Media Reader. Ed. Michael Mandiberg. 2012. Retrieved from http://veryinteractive.net/library/the-language-of-internet-memes

“Mannequin Challenge”. (2018, January 04). Know Your Meme. Retrieved from http://knowyourmeme.com/memes/mannequin-challenge

“What People Think I Do / What I Really Do”. (2018, April 13). Know Your Meme. Retrieved from http://knowyourmeme.com/memes/what-people-think-i-do-what-i-really-do

7 Tips for Creating Your Portfolio Website [Podcast] (And PSA for EveryoneOn.org!)

 

It feels great to finally bring you new content again, and this time it’s in audio format! For How to Portfolio‘s first podcast, I share seven tips for creating your professional portfolio website! The first three tips are discussed in the first half, followed by a short break with a PSA, and finally the last four tips are shared. These tips have been collected from personal experience as well as advice from other professionals on the Web. These tips and tricks will not only help make your website exude professionalism but also save you time and money in ways that aren’t commonly talked about. Even the littlest details from your domain name to the colors on your site matter when developing an online portfolio for your career, and I hope to teach you that!

I would also like to announce that How to Portfolios is partnering up with Beat Hacks, Game Day Bites, and Winning on Social Media to spread awareness of how millions of Americans can not afford Internet or digital devices (now necessities for education and many other aspects of life) and how EveryoneOn is trying to help. EveryoneOn is a non-profit organization, and you can read more about them or donate at https://everyoneon.org. Make sure to also listen to our partner sites’ podcasts, which you will find on their blogs linked on our blogroll in the sidebar!

computer image

“Business Computer Connection Contemporary” by Mateusz Dach (CC0) on Pexels

Resources mentioned in podcast:

Cheap domain name registrar:
https://namecheap.com

Free hosting sites:
https://pages.github.com (Github Pages)
https://x10Hosting.com
https://tumblr.com

Creators mentioned:
http://simplebits.com/ (Dan Cederholm, co-founder of Dribbble)
http://www.bombsfall.com/ (Scott Benson, designer on Night In The Woods video game)
http://eychan.org/ (Emily Chan, creator of StupidFox comics)

Inspiration sources:
https://dribbble.com
https://awwwards.com
https://linkedin.com
Another good one is https://pinterest.com

Partners:
https://beathacks.wordpress.com (Beat Hacks by Abhay K.)
https://beatthealgorith.wordpress.com (Winning on Social Media by Lisa L.)
https://gamedaybites.wordpress.com (Game Day Bites by Ysabel T.)

Non-profit promoted:
https://everyoneon.org (EveryoneOn)

Background music used is “Airgap” by Water Features, licensed under CC BY-NC-ND 3.0. You can get this piece from the Free Music Archive at http://freemusicarchive.org/music/Suburban_Temples/Water_Features/03_Airgap.

Special effect sound used is “Menu Click-Sparkle” by Soughtaftersounds, licensed under CC BY 3.0. You can get this sound effect on the Freesound database at https://freesound.org/people/Soughtaftersounds/sounds/145459/.

Professional Portfolio with Tumblr [Video] (and the Great Thing about Videos)

Finally releasing the first video in my series of video tutorials! The Internet has made showcasing your work on your own website a smart move for your career no matter what field you’re in, so in this video I show you how to make a professional online portfolio using Tumblr.com and why I think it could be the perfect platform for beginners who don’t want to get their hands dirty with more advanced hosting and development tools! I go over how to upload content to Tumblr, the three ways you can install themes, and briefly show you the theme customizer. In the video I also briefly show you how to change the settings of your blog to make it more professional such as enabling messages, hiding the posts you like and the people you follow, and connecting a custom domain.

I also show you a lot of great resources in this video to create a nice portfolio site such as the Tumblr Theme Store and the free section of it, the awesome Theme-Hunter blog that showcases hundreds of free themes from the Tumblr community, and the two themes I used in the video: The Void by themecloset-themes and Theme 34 by yeoli-thm.

Also, to make this video, I used Screencast-O-Matic to record my screen and microphone as I did the demonstration, and I used Microsoft PowerPoint 2016 (which you can get for free if you’re a student here) to make the slides for the transitions between sections of the video. The Creative Commons images I used for the portfolio site in the video can be found here.

The video explains everything I want to say about that topic, so I would like to use the rest of this post to explain how great making videos for online viewers can be for your site or brand. If you want to establish that you know what you’re doing, then make videos that can teach others! This is not only great because it demonstrates your knowledge, but it also associates positives traits with your brand such as helpfulness, generosity, and cleverness. If the quality of your videos is high enough to the point where they feel professional, this will also emphasize your skills in video production and teaching. In the case of my video, it’ll be helpful to those who want to see something before they try it and learn how they could achieve the same results I did in the video.

Finally, I would also like to recommend uploading your videos to Youtube because uploading content online to highly-visited sites that host peoples’ content guarantees a few more eyeballs on your work from users who might get your video in their search results or recommended videos feed. According to a paper by Christine Wolf, a Ph.D. candidate in Informatics at University of California, users find videos on platforms like Youtube more often than not thanks to the algorithms in place which show you content they think you’d like based on what you’ve already seen as well as what similar users have liked. In Wolf’s interviews, many users expressed they use “first-person perspective and demonstration in the videos as an indicator of their credibility” and that the video is “‘speaking for itself,’ with the finished project depicted in the video signifying the content’s credibility or accuracy” (Wolf, 2016). In short, people just use common sense to see if your video is worth watching or not. Remember that if you would watch your video, others probably would, too!

References

Wolf, C. (2016). DIY videos on YouTube: Identity and possibility in the age of algorithms. First Monday, 21(6). doi:http://dx.doi.org/10.5210/fm.v21i6.6787

Image Editing (and Simple Headers)

Image editing skills are very important to have when developing your new portfolio website and any other type of website. It can add an extra personal touch to your site and even enhance what it’s about. If you are an artist or graphic designer, then having excellent image editing skills is a no-brainer.In this post, I would like to go over the steps of creating and using headers because they are one way to use image editing on your portfolio site!

Step 1) Asking the Questions Keeping the topic of your portfolio site in mind, first consider if your site even needs a header. There are many questions to answer if choosing to use a header image on your website: What is your website’s main topic? What is your target audience? Would it “fit”? How simple or complex should it be? Because my website is a blog about web design and portfolio creation with a relatively simple layout, I decided to create a simple header that would not distract from the content of the blog itself but reflected the site’s topic. Since my blog’s target audience is people willing to learn about making a digital portfolio website, my site’s header uses images related to computers and portfolios.

Step 2) Picking the Images First you will want to find some images to use in your header. There are numerous sites like Pixabay, Pexels, Flickr, and more that offer high-quality images that anyone can use depending on the licenses those images are posted under. For my header, I used Flickr, but you can use any website that allows you to search images by license. It’s important to understand what licenses and copyright are before selecting your images; if you don’t have explicit permission from a creator to use his or her image(s) make sure you use images licensed under Creative Commons only. The following images are licensed under creative commons, so I am allowed to use them for their educational and illustrative purpose on this website:

Folders.jpg

“Folders” by John Gronberg (CC BY-NC 2.0) on Flickr

BetterCode.jpg

“Binary Code” by Christiaan Colen (CC BY-SA 2.0) on Flickr

The image of folders represents a physical portfolio of work, and the image of binary code represents the digital or computers. The idea of bringing these two images together into one is that it would represent making one’s work digital for the world to see, and what better way is there to do this than by creating a portfolio website?

Step 3) Creating the Header If you don’t have professional image editing software on your computer, there are numerous free programs you can download from the web or use directly in your web browser. Some popular free downloadable alternatives to paid software like Adobe Photoshop are FireAlpaca (Mac and Windows), Krita (Mac, Windows, and Linux), Gimp (Mac, Windows, and Linux), and more. Some great free alternatives usable in-browser are Pixlr, LunaPic, Canva, and many more. For my header, I used FireAlpaca because it’s what I’m most accustomed to using, but every good image editor has the features I describe later.

The minimum feature to create an image with one or more images is “layers”. These will allow you to isolate and edit separate elements in the same project while keeping everything as a whole. I like how writer Lev Manovich (2011) emphasizes the importance of this feature of image editing software like Photoshop in the online journal Computational Culture with the following excerpt:

It redefines both how images are created and what an “image” actually means. What used to be an indivisible whole becomes a composite of separate parts.

And with that, I will say that layers were fundamental to the creation of even my simple header! First, I opened the largest image (“Binary Code”) in the program and then copy-pasted the smaller image (“Folders”) inside the same project so that it became a separate layer on top of the larger image. I reduced the opacity of the layer on top so that I could see both images at the same time and adjusted them on top of each other so that the focus on the images matched and then cropped the project image to the size of the smaller image. Then, I moved the layers so that “Binary Code” was on top and adjusted the hue so that the green characters were slightly bluer to match the shade of green used on my site’s color palette. After that, I sampled the cream background color of my website using the color picker tool on a screenshot of it and created a layer on top of the “Folders” layer which I filled in with the bucket tool. I changed that layer’s blending mode to “Multiply”, and now the image below that layer took on that color. I did this because sticking to the colors from the palette of your website is important for everything to look like it belongs together. Finally, I saved this composition as a PNG file to preserve the highest quality possible.*

Below is the finished result of my editing:

cropped-muchbetterwordpressheader1.png

Image Composite of “Folders” by John Gronberg (CC BY-NC 2.0) on Flickr and “Binary Code” by Christiaan Colen (CC BY-SA 2.0) on Flickr

Step 4) Enjoy your Header Now you should have an image that you can use on your website! I will admit mine doesn’t look too great, but at least it’s not MS Paint!

*Side-Note: PNG stands for Portable Network Graphic and is a modern image file type that preserves transparency and can display every color visible to the human eye. Contrast this file type to the large and outdated Bitmap file type which is largely used in painting programs like MS Paint – the BMP file types do not save any space and both depend on a limited amount of colors because of the limitations of the computers they were originally developed for. The “Bit” in Bitmap actually stands for the basic building blocks (the 1s and 0s, or “ons” and “offs”) of data that your computer reads. If you never knew why transparent backgrounds in images turn black when you paste them in MS Paint, now you do! It’s best to leave raster-based programs like MS Paint for memes and stick to geometry-based programs with layer capabilities for serious work (Davison, 2014).

References

Davison, P. (2014). Because of the pixels: On the history, form, and influence of MS Paint. Journal of visual culture, 13(3), 275-297. Retrieved from http://journals.sagepub.com/doi/full/10.1177/1470412914544539.

Manovich, L. (2011). Inside Photoshop. Computational Culture, 1(1), 1-12. Retrieved from http://computationalculture.net/inside-photoshop/.

How To Portfolios Says Hello!

Low Angle View of Laptop Keyboard

“Low Angle View of Laptop Keyboard” by vanmarciano (CC0) at Pixabay

Hello world! This blog brings you tips on creating your perfect portfolio site that will win the hearts of your employers and say more about you than words alone can. It serves as a collection of my written or recorded mini-tutorials covering website creation and brand development that I share with you in hopes that you’ll learn along with me or even pick up a new hobby if you have never looked into web design. Some specific topics that you will find me covering on my blog are my recommendations for the best software to use, how to find and register a good domain name for your website, how to make your site mobile friendly, and much more! Written posts, videos, and even podcasts are currently in the works for this project, and I may also share some of my own designs from time to time and recommend some great people you can follow. Over the long term, I hope to help create a community of people with an increased knowledge about design for the web and maybe even help inspire others to take up a new hobby.

pexels-photo-289742.jpeg

Photo by Wokandapix (CC0) at Pixabay

I’m Liz, a bird-petting, coffee-loving web developer and designer from Rutgers University where I study in the Information Technology and Informatics program and specialize in programming and design for websites and games. In my free time, I also code sites for fun, but I also make digital artwork and have recently decided to take my hobbies to the web and share my work with the world. I have worked on a non-profit organization’s website, and I have indulged in using digital mediums for creative expression ever since I could hold a mouse, so I hope that my content helps budding entrepreneurs and beginner web designers get a good start in their careers.

Note that I am allowed to use these images as per the terms of Fair Use. The Columbia University Libraries page on Fair Use states the following about one of the four factors of being able to use a work:

The fair use statute itself indicates that nonprofit educational purposes are generally favored over commercial uses. In addition, the statute explicitly lists several purposes especially appropriate for fair use, such as criticism, comment, news reporting, teaching, scholarship, or research. These activities are also common and important at the university.

The two images I am using in this blog post are available for free use publicly on the internet, and I am using them for nonprofit purposes for a project at my university. According to creativecommons.org, works licensed under CC0 are in the public domain and can be freely used without restriction under copyright law.

References

Columbia University Libraries Page on Fair Use

Creative Commons Page on CC0