The first project is the California Intern Network.

This one I fully designed. Because it’s one of four sites we are doing for UEI, I had to pull my design cues from Dining, which launched back in August as well as UEI Main (see below). Originally their Student Employment Services, the CA Intern Network is a rebrand and naturally the site had to reflect that.

The second site is UEI’s main site.

While I didn’t fully design it like I did with CA Intern Network, I did assist with it in many different aspects. After our lead designer left, I took over the project; I made design changes when the client requested them and helped with content integration.

Our team has one more project with UEI that will hopefully launch in the coming months.

The post February Project Launches appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

Akismet

Spam was the number one reason I switched to WordPress, and this baby does a phenomenal job! If you’re a blogger or allowing comments on your site in any way, this plugin is a must-have.

Bad Behavior

Between this guy and Akismet, I rarely have to worry about spam. Bad Behavior acts as a gatekeeper along with other spam preventing plugins to keep spambots out.

Contact Form 7

A simple contact form that allows you to do so much. It has everything you need to keep it simple or do a lot with. It also has built-in spam protection as well. I’ve used this form over the years to create anything from a basic form to a reservation system. It’s our go-to form at work.

FD Feedburner Plugin

I use Feedburner to manage my feeds, and this handy plugin directs all my feeds to Feedburner. That way I can monitor my subscriptions all in one place. I also use Feedburner to have it post to Twitter whenever I blog.

Maintenance Mode

Activating this plugin allows me to work on my current theme logged in without anyone else having to view my work in progress. In other words, it throws up a very basic splash page letting the user know the site is being worked on. I find this plugin pretty handy when I am doing some clean-up on a theme that will take more than 10 minutes, or if working locally via MAMP is too much of a hassle.

Relevanssi

A coworker introduced me to Relevanssi this week, and I have to say I am very impressed. It’s pretty much what the built-in WordPress search should be. It lets you see what users are searching for on your site, what they find, and sorts their search results in order of relevance.

Wordbooker

This plugin makes it really easy to have my posts automatically show up on Facebook and in the format I want. When you post a link on Facebook, I like that it shows an excerpt of the link, title, and thumbnail. Wordbooker will do that for you, plus you can target it to post to a page and a profile.

WordPress SEO by Yoast

All-in-One SEO used to be my SEO plugin of choice, but WordPress SEO by Yoast has evolved so much over the years and works wonderfully alongside Themble’s Bones theme, which is my development theme of choice. It does everything I need it to right out of the box and then some.

The post My Top WordPress Plugins appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

As I mentioned, doing this is tricky. Facebook likes to change their feeds around all the time, and they don’t make it easy for you to find. Instead, I had to do some major digging. There are two things that come into play when finding your page’s RSS feed: the url and the ID.

Amit Agarwal posted a great article on his blog that contained A Directory of RSS Feeds of Popular Social Sites. He mentioned two ways to get your page’s ID, the second way being the easiest.

To get the ID of any Facebook Page, go to graph.facebook.com and replace Digital Inspiration in the URL with the username of any Facebook Page. Also, Facebook does not offer RSS feeds for individual profiles.

By doing this it will give you a bunch of information about your Facebook page, which will include the ID.

Then you can plug it into this url:

http://www.facebook.com/feeds/page.php?format=rss20&id=YourFacebookIDNumber

The last thing you have to do is grab this code:

< ?php include_once(ABSPATH . WPINC . '/rss.php');
wp_rss('http://www.facebook.com/feeds/page.php?format=rss20&id=YourFacebookIDNumber', 3); ?>

Plug in your Facebook RSS feed url, place the code wherever your want your feed to show up, and then style to your liking. Super easy!

You can see examples of where I’ve used this method on two client sites:

• Sac State Campus Dining
• California Capital Airshow

Additional Resources

• Facebook RSS Feed Tutorial
• A Directory of RSS Feeds of Popular Social Sites
• How to: Display any rss feed on your WordPress blog – WP Recipes

[EDIT]

The above method for fetching a feed has recently been declared deprecated by WordPress. Instead, use the function fetch_feed. It’s a little more in depth, but it allows you to have a bit more control over how the feed is pulled.

The post How to Display a Facebook Page Feed in WordPress appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

For the Web Design & Interactive Media department there were 4 awards: Best Coding/Development Project, Most Innovative Project, Best Client Project Project, and Best Design. I submitted a couple of my projects for the different awards, hoping I’d win.

I’m proud to announce that I won the Best Design award for LovelyGeek.net!

What was even more exciting was that my friend and coworker, John Cremer, won the award for Most Innovative Project. He put together an awesome web site that utilizes HTML5 and a video-based background.

It was pretty neat to be able to come back after graduating and get some recognition for all of my hard work. Plus it was cool to have a friend win with me!

So how’s life after graduation?

It’s been almost two months since I’ve graduated, and one of the questions I’ve been getting from people is asking how life is. Well, in a nutshell, life is great.

To start with, I can’t tell you how much I love not having homework. Being able to come home from work everyday and know that in the back of my mind I don’t have some assignment or project to work on is a wonderful feeling.

I still get the Sunday night anxiety attacks, you know, the ones where you realize it’s Sunday and you haven’t gotten a darn thing accomplished over the weekend. Except then I realize, wait a minute, I have no school.

Shortly after I graduated I started having dreams that I forgot to take a class or I had to go back to take one and was super unprepared. Luckily those dreams have subsided.

It still hasn’t fully sunken in yet that I don’t have to go back to school ever again (unless I want to), but I’m sure as time goes on the feeling will pass.

The post A Lovely Achievement appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

When you’re a graduate in the portfolio class, part of the requirement is to participate in the show. You get to stand at a table with your web site up on the TV for 4 hours and present/talk about your web site, your work, what you do, etc. to anyone that comes by. It’s kind of like being a vendor at a trade show and a reverse job fair.

The first two hours are for industry professionals only. It’s good if you don’t have a job lined up after graduation because you can talk to different professionals that are looking to hire someone in the industry fresh out of college. Despite having a job lined up already, I was able to make some great connections should my situation change down the road.

The last two hours are for friends, family, and students to come out and show their support. Both my family and Joshua’s family showed up along with a few friends.

There were four other students that showcased their sites at the show with me. Sean and I were the only two getting our Bachelor of Science, whereas everyone else was getting their Associate of Science.

• Sean Ireton
• Daniel Soltesz
• Alex Ivaschenko
• Lana Phillips

So now what?

Now that the Portfolio Show (and graduation) is over, what does this mean for me and a job?

I’ve been interning for a web design company called Digital Gear (don’t worry, the site is currently being redesigned ) for almost a year now, and yesterday I accepted an offer to work full time with salary.

I’m really happy that I am going to continue working for a company that’s been so good to me with a team I love.

The post Spring Portfolio Show appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

Type Blog

The type blog assignment began by us doing some research and pitching a blog idea on two typeface designers of our choice. I chose John Baskerville and Emil Bertell. After hearing everyone’s pitches, our teacher put us into groups based on similarity of the designers we chose. I was put in a group with two other people in which we were to create a Bodoni & Baskerville blog.

From then on, every week we each had to blog at least two posts. We also had to work on a design for the blog. The design had to be type only. Any shapes, imagery etc. had to be made out of type, so we definitely were forced to get creative. We found typefaces for social media and other decor, so we were able to stick to the parameters of the assignment. Everything in our design was made out of type with the exception of the content in the blog post itself.

A few weeks in our teacher decided to switch our blogs around, so we got another group’s concept and they took ours. For two weeks we had their concept and had to work on creating a blog design and making posts. Then our teacher switched things up again, and we got our original concept back.

The live blog is called Bodoni & Baskerville: The Letters. By the end of the quarter our teacher wanted to make sure we had a solid design before coding it if we chose to do so.

I was apprehensive about working in a group on this, mainly because I’ve had nothing but bad experiences working in groups; however my group members and I took care of business and ended up working really well together. It always helps if one of the group members is your friend too.

Alternate Industry

Week 3 our teacher passed around a Tiffany bag that contained pieces of papers with “boring industries to design for” on them. I picked out accountant, so I had to design a homepage and interior page for the project. First we had to write up a creative brief, and then we had to come to class with five completely different designs.

Each week our work was critiqued and we were required to go back in and improve the design. I got to a point in my project where the design was good, but I had to work on picking the right stock photography. Luckily content wasn’t a problem because I got my industry-based content from Not Lorem Ipsum.

The post Digital Typography appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

We started out the quarter by giving speeches and presentations that had nothing to do with our industry as practice. This built up to us putting together an industry-related tutorial using screen-captures and being filmed in the studio.

I chose to do a WordPress training video for Digital Gear. Ideally it would be given to clients after they have gone through training for WordPress, and the video would serve as a refresher.

I ran into a lot of challenges with creating this video. First I found out too late that the footage shot in the studio didn’t have working audio, so I didn’t have any footage of myself in the final video. Them my Camtasia files got corrupted somehow, and by the time I was able to rerecord them, my free trial of Camtasia expired; I had to install WordPress on a subdomain, transfer the example theme, and set Camtasia on my husband’s desktop to rerecord. Add this to the stress I was having from my other 4 classes… yeah!

In the end I got through it and produced a fairly decent video first time around. We’re talking about breaking up my video into shorter videos that we can give to clients along with a training document. We’ll see what happens!

The post Computer-based Training appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

Portfolio I/Portfolio II are required classes students take their last quarter right before they graduate. If you’re in the associates program, Portfolio I is the only one you take. If you’re in the bachelor’s program, you take both with Portfolio II during your last quarter. Both prepare you to get everything you need in order to participate in the end-of-the-quarter Portfolio Show where graduating students display their best work in hopes of getting hired.

This quarter I pushed my branding further and redesigned everything. Afterall, I mentioned in Portfolio I, “Will this be the same when I graduate in June of 2012? Probably not. I intend to push the design further.” My logo, business package, and site all got a fresh new face.

The Logo

Before – My logo from Portfolio I

The typeface is CAC Pinafore using Trebuchet MS for the “Design” part and glasses designed by me. The concept behind this logo was to find a typeface that was similar to my handwriting while looking for a mark that symbolized being a girlie geek.

I went through many different concepts (brackets, argyle, hearts, a mouse arrow in the shape of a girl, etc.) before I ended up using glasses enclosed with brackets; I felt both represented me perfectly. Glasses symbolize geeks/nerds (plus I have a thing for glasses, hehe) and the brackets tribute to the coding I do as a web designer.

After – My new logo

When Anna Wintour, editor-in-chief of Vogue magazine, accepted the 2011 Webby Peoples Voice Award for Fashion, her speech was simple: “Sometimes… geeks can be chic.” That was the driving force behind my new logo.

The typeface is Mishka by Emil Bertell with glasses designed by me. This time I wanted to go with something that was more elegant, really emphasizing the “lovely” out of Lovely Geek. Out of all the other typefaces I looked at, Mishka was exactly what I was looking for.

I changed the glasses slightly, so they matched the typeface I chose. I simplified them because another classmate remarked that my old glasses looked like a bra. Then I began exploring the concept of adding different kinds of brackets around the glasses, depending upon the item; for example, I’d use curly braces { } around the glass for print material, <> greater than/less than brackets for the web, and so forth, but I moved away from the brackets seeing as several people began copying that concept from me. Instead I integrated the glasses with the typeface.

The Business Package

Since Portfolio I, the business package requirements slightly changed. When I took the class we were required to have a folder with our résumé, letterhead, envelope, and business card. The problem with the letterhead was no one really knew what to put on it, so last quarter they changed it to where you write an artist statement on your letterhead instead.

This time around, I also had to meet with career services to build my résumé, fill out forms, and write my artist statement. Luckily my résumé was in really great shape (just a few small edits), and I nailed my artist statement. All I had to really focus on was incorporating my branding with it.

By the time I got logo nailed down, I decided for the color scheme I wanted to go in a Breakfast at Tiffany’s type look, using blue/turquoise, black, and white in my branding.

• Folders – GBC Cover Letter Portfolio from Staples
• Labels – Martha Stewart Home Office Metallic Labels
• Business Cards – Moo Cards
• Envelopes – Zazzle
• Resume & Artist Statement – Printed at FedEx Office

The Leave Behind

My leave behind from Portfolio I was originally going to be keychains using keyboard keys that would spell out things like HTML, CSS, PHP, and whatnot, but after running out of time that quarter I ended up just putting my résumé and some screenshots of my work on a CD.

This time around, I was on the path of looking at wedding favors and seeing how I could make it less bridal and more geeky. After all, I figured going the wedding favor route was a cheap way to go bulk and nice. I also was very adamant about making sure that whatever my leave behind was it wouldn’t be your average SWAG that people forget about.

After asking different people, the reality was most people were inclined to have a positive reaction to a leave behind if it had something to do with food. And considering this would be the first year culinary wouldn’t be required to have food at the Portfolio Show, the odds were definitely in my favor if I provided something edible.

My first idea was cookies because I bring homemade cookies into the office, especially when we’re having important in-office client meetings, and everybody LOVES them. But, someone in my class noticed the success there and was planning on brining cookies in because if I can make people happy with cookies, they can too. Can you tell I’m getting tired of copycats?

In the end, I decided to go with homemade fudge, as in the homemade fudge I make for everyone around the holidays. My sister suggested fudge because, “That’s your thing! You make fudge for everyone, and it makes them happy!”

Since I was going with the whole Breakfast at Tiffany’s type theme, I wanted to do something similar to Tiffany boxes. Not only would it match my theme, but the color would go well with the black table I’d be displaying my stuff on. While both Party City and Michael’s had “Tiffany boxes” neither one of them came with ribbon, which I didn’t feel like having to buy and cut separately. Instead, Party City had these turquoise popcorn type boxes that came with a small cellophane bag and ribbon. Plus I could put a sticker with my logo on them.

The post Portfolio 2 appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

Sundance Embroidery

Sundance Embroidery is an embroidery shop located in my hometown. The business is primarily known as the go-to place for high school students to get their lettermen jackets; however their web site neglected to showcase that nor was there any indication that their site was the site for that business.

The challenge was to redesign the site in a way that marketed it both locally and online. It also had to highlight the other services the store offers besides embroidery.

The project started by the client filling out my Client Questionnaire, and that way I was able to assess their needs for the site. I also looked over the current site and made notes of anything I felt needed to be addressed in the redesign.

Then I met with the client in which we compared notes; turns out we were both on the same page about what needed to be done on the site. We also discussed the client questionnaire in greater detail, and I went over the design process. From there I wrote up a project proposal and we signed a contract.

Next I began assessing the current site further and put together a site architecture. This allows the client to see how the navigation of their site is set up. It also gives the client an idea of the content they will have to provide for all of the pages. Once the site arch was approved, I moved onto wireframing.

During the wireframing process, I sketched out four possible comps. After selecting the one that fit best, I put it into digital form to show the client. We made edits, and when the client was satisfied, I went into the design phase. The design phase involved adding colors, texture, imagery and setting type. Again, edits were made after client feedback, and then upon approval it was time to build the site.

I built the site on a special testing domain so the client could view the site, play around with it, etc. and see how it would operate on a live environment. After two weeks of testing and edits, the site was ready to be pushed live. You can view the live site at www.ClickSundance.com.

River City Pool Care

River City Pool Care is a new Sacramento-based pool cleaning company. Being a new business they had no online presence, so it was up to me to establish that for them. Like with Sundance, the client filled out the questionnaire and we met to talk about the goals of the site and fill out a contract.

My vision for the site was to be more imagery based and draw the user in, focusing on imagery that was geared towards the client’s target audience. The goal of the site was also to quickly let the user know the who, the what, and the where while making it easy to contact the client for additional information. The client also want to be able to provide current promotions as well as educating their users.

I went through the same process with the client as I did with Sundance. I put together a site architecture, wireframe, design, and then went into build. The site was built so that the client can update things on their own in the future. You can view the live site at www.RiverCityPoolCare.com.

The post Senior Project Studio appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ

Recently I’ve begun messing around with LESS. I was kind of forced into it because we’re starting to use it at work, and in order for me to edit those sites I need to know what I am doing. My coworker pointed me to a few articles to help me get started, plus Developer Drive is doing a “Learning LESS” series.

• LESS: The dynamic stylesheet language
• LESS Is More: Make Your CSS Coding Easier with LESS
• An Introduction To LESS, And Comparison To Sass
• Learning LESS: An Introduction
• Learning LESS: Variables

After reading those articles I was sold. The mixins and the variables are what really got me excited because they eliminate a lot of repetitive coding. Plus, you can do so much!

The tricky part about learning all of this for me was not so much how to code in LESS but rather working remotely with LESS files. LESS is all about editing locally, but we have to edit live sites at work. Everyone at work uses Dreamweaver to code/FTP and SimpleLESS to compile LESS files on their Windows machines, so it works well for them.

I, however, use Transmit and Coda to manage sites on my Macbook Pro. While I found a compiler plugin for Coda, I discovered it evolved into the LESS.app, and I couldn’t find any real clear directions that told me exactly what I needed to know.

Instead I had to experiment with a couple articles that were mainly geared towards CodeKit. I found an article, Working Remotely with CodeKit & LESS, and used that to figure out how to get it working for me with Coda and Transmit.

So, here is how to edit LESS files on a live site via Transmit, LESS.app and Coda.

1. Open Transmit and LESS.app
2. In Transmit, mount site as disk
3. Navigate to the folder where your less files are. For me, it was my “library” folder within my theme
4. Drag that folder into the LESS.app
5. Begin editing your files in Coda

Once I figured that out, everything else was easy. Using LESS has completely changed the way I code, and I’m loving what I am able to do so far. LESS is definitely more!

Additional Resources

• LESS.app For Mac OS X
• SimpLESS – Your LESS CSS Compiler
• LESS Syntax Highlighting in Coda
• Bones – The HTML5 WordPress Starter Theme
• CSS2LESS

The post Coding With LESS appeared first on Lovely Geek Design. Technorati: MUBWG6HHWEFZ