I have been making my way through The Design of Everyday Things by Donald A. Norman, a book that tries to bridge the gap between the functionality of objects and the way users interact with them. It was originally published in 1988 (which makes for some slightly dated but charming references, such as an in-depth discussion of the hold feature of a new phone system), but the principles are still relevant today in user-centered design theory.
Before I started this portfolio and blog project, I used Balsamiq to create a wireframe. I hadn't used this software before, but I found it highly beneficial to my outlining process, and I ended up really liking the program and the tools it offers.
Installing and working on WordPress locally is a good way to build a theme or customize an existing one before hosting it on a server. If you’ve designed a website with static HTML and CSS, you can transfer your code into PHP within the downloaded WordPress files, experiment with plugins, and perfect the design of a site before needing to worry about FTP files, purchasing a domain name, and launching the site. Here is a step-by-step installation process for downloading MAMP and WordPress to start working locally.
Recently I was introduced to some Jim Butcher articles on the craft of writing a novel, and – wouldn’t you know it! – it does help to pre-write and plan where you want you book to take you. It’s like walking my dog: I can let her lead, and go wherever she wants, but it’s easier to end up in the right place if I am the one making the decisions. Maybe that analogy is stretching it, but I think it can be benefical to call the shots on your novel, instead of it calling the shots for you.
National Novel Writing Month (NaNoWriMo) is an annual, self-motivated challenge to write 50 thousand words between November 1st and 30th. It’s organized by an awesome non-profit group that promotes writing in K-12 classrooms, provides materials for libraries, and hosts tons of write-a-thons and events for the community behind NaNoWriMo. It’s a great challenge if you like to write creatively, and the next round will start in just a few weeks.
As I learn (constantly) how to be a better web designer and developer, I find that my latest project iterations aren’t always the ones I end up using. For me, there’s substantial trial and error over layouts, formatting, fonts and design, and it’s helpful to have access to each version as I make changes. I could just save multiple versions of a project as I go, but I find it quickly gets messy with different stages of a website in folders, even if they have names detailed enough to know what changes they contain, which for me is never the case.
There are so many different applications for Photoshop masks. Masks are a simple, non-destructive way to change the transparency of part of an image, allowing you to combine different photos into a collage or change the background without losing the data of the original image. You can easily change the settings for only the masked layer instead of adjusting the settings for the entire image. With Layer Masks, you use selection tools and brushes to achieve natural looking edges, as opposed to Vector Masks, which use the pen or shape tool for more defined edges.
Using Flexbox to structure the layout of a website includes two parts: a parent element that acts as a flex container, and one or more child elements which receive the flex properties of the parent. First, the parent element receives the flex property display: flex, and then it’s fast and easy to style the child elements. With a few quick media queries to adjust for different screen sizes, your layout is ready to go!
According to Steve Krug, the author of Don’t Make Me Think: A Common Sense Approach to Web Usability, the No. 1 rule of web design is to make the user think as little as possible. Not because the user will leave the site or think it’s poorly designed, but because the user will think it’s their fault if they don’t understand what to do on a website. I think it’s fair to say this is not how we’d like our users to feel upon visiting (or leaving) our sites.
Once you have a website up and ready-to-go, the next step is getting it noticed by search engines and the people using them. Search Engine Optimization (SEO) may seem like a daunting thing to undertake on your own, but there are some simple ways you can start increasing your visibility through your content and code. This is a large area of discussion with many different opinions, especially since the algorithm search engines use isn’t constant or publicly available, but based on current understanding of the algorithm, here is a basic guide to increasing the chances of your website appearing higher in result pages.
I just love using Google Fonts to change the type when I'm designing a website.. Usually, I try to leave this until later in the process, because I get obsessed with switching between fonts, or I pick a font too early and it doesn’t represent the finished site and then have to go back and find a new one (sigh...)
I’ve been following the Web Design Track at Treehouse, which incorporates the fundamentals of CSS and HTML, and also introduces web design foundations, an intro to Photoshop and Illustrator, and SEO and Sass basics. The track is thorough, walking you through the process of designing a website from start to finish, including purchasing a domain name and hosting your website on a server.
My mornings usually start with a cup of coffee and Designer News (or Reddit, depending on how alert my brain is), and I love reading morning emails from the team at Skillcrush. Skillcrush is a community for learning online, specifically in the technical field, and they send great emails like “Joining the Git Community” and “Tech Terms” of the day. Their blog is filled with fun articles and helpful posts for ladies in tech.
Here's a fun and quick effect in Photoshop - it uses only three layers and takes no time at all. I like it because you can adjust the size of the pixels and get different results, depending on how much of the original image you want to remain when you're done.
One of my new favorite ways to use Illustrator is as a tracing tool. As a kid, I would trace coloring book pages for my friends so we could all color the same pictures together (Lisa Frank, anyone?). Maybe I'm channeling my inner child, but it's a quick way to turn a photo or hand-drawn design into a graphic image. Cool, amirite?
I've been doing some research into the Adobe programs - Treehouse has a wonderful collection of videos for learning the foundations of Illustrator and Photoshop from the bottom-up. Mat Helme, who teaches Illustrator Foundations, does a thorough job of explaining every one of the tools available and how to use them. As a total newbie, this was exactly what I needed.