Pixlfest and Stand Ups

What are some interesting points from the first article that intrigue you?
“Hackathons”… “coding” for a better world is a great idea. When you help others by giving back through time and talent, you help make the world a better place. A good deed has it’s own rewards.

Failing forward—try, fail, learn something and move forward. This is great advice not just as professionals but also as a general rule for living. 

The second article details a technique used in many developer environments. What do you think are the benefits of such a technique? Stand-up meetings are an interesting concept. I agree that the act of standing up can promote shorter meetings just because no one wants to stand for two hours. I wish the article would have been written in the same spirit of brevity.

How do you think we might implement this technique in our online class? I think the online chats are somewhat like a standup meeting. It’s usually one or two topics and our time is 15 minutes.

How do you feel about having more team projects in the online class? Group projects are great but their success or failure really depends on the group. As with anything, some groups have a great dynamic, work well together and are able to get the job done. Others, not so much. I enjoyed the team collaboration. I learned a lot from the experience mostly about the areas I was lacking. If you were to add more group projects, the scope of the projects should probably be smaller than for example the ecommerce site my group worked on.

Do you think as a brand new beginning student that it might be helpful to work on a team to get a site completed? Why or why not? I think a new student might feel a bit overwhelmed, lost and ultimately frustrated. Perhaps after getting a basic understanding of HTML and CSS then maybe a group site might be feasible. Otherwise it might be the blind leading the blind.

 

If you got to go to Pixlfest, what did you learn that I didn’t touch on in my post? Unfortunately, I did not get the opportunity  to go.

 

Type Makes a Difference

What are the 10 best takeaways from the first article that you’d like to remember?

  • Type style, texture, tone, general appearance and layout can play a part in whether the user takes interest in a site or not
  • Size matters. If the text that is too small, not one is going to read it.
  • Contrast is important to break the monotony of page. Create contrast with different weights (bold/regular), color, scale, typefaces, texture
  • Use a grid to create structure and hierarchy
  • Use typefaces that complement each other.
  • Use typefaces that enhance or support the subject matter. An Art Deco typeface would work well to support a website on that time period such as: www.artdecosociety.org
  • Use scale and weight to create visual hierarchy (headings, subheadings, and copy)

 

In what ways does “contrast” matter when it comes to designing the type for a website? Contrast in scale, texture and weight help break up a page and helps create emphasis and hierarchy.

 

What’s your favorite site that was showcased?

Warhol500_mini

The Warhol Initiative

What does it do well?
Type as Contrast: Uses large type to call your attention to title of the site and (The Warhol Initiative) and through contrast in color and scale, what the site is about.

Minimal Color Palette: limited to black, teal and yellow

Grid Structure: Organizes page neatly

UI Design Guidelines for Responsive Design

What are some tips for tablet design that you want to remember for your future designs?

  • Design for retina display
  • Consider larger font size
  • Since tablets are touch screens, interactive areas should have a larger touch area

What are some tips for smartphones that you want to remember?

  • Minimal content
  • Avoid ads if they are not really needed
  • Get creative with tabs, accordions and navigation to save space
  • Summarize text

Which site in the Showcase section catches your eye? Foodsense Why do you admire it? It is seamless from desktop, tablet to mobile. In terms of what is up front and center, only the most important and relevant elements are present in screen area of the mobile and tablet versions. While the layouts differ slightly, the difference between each seems minimal because the branding is consistent.

What is another article that you can recommend on a related topic?

Feb. 25 — Polish Your Portfolio (So You Can Freelance in School)

Briefly summarize the advice given in the two articles.

The advice is pretty sound and makes marketing common sense:

  • Branding yourself is important. Need a clear logo and tagline.
  • It needs to be easy to navigate
  • Only show your best work! Don’t show everything.
  • Organize in categories that make sense
  • The X factor. Show your uniqueness. What makes you so special?

Choose 2 example portfolios that you like best and discuss the design choices that they made that make it appeal to you.

Kendra Shaeffer

Screen Shot 2014-02-25 at 7.12.41 PM

Her site is very unique, hip and has a rock-n-roll style too it. I like how she used a full image background. It’s easy to navigate. Contact info is on the front page. There’s a call to action, “Contact Me”. It also leads you to her company site. http://www.kendraschaefer.com/

Lizzie Seymour

Screen Shot 2014-02-25 at 7.15.18 PM

Her site is very unique, cute and expresses very well her expertise (illustration). I like the background scrolls and the front is static. It’s easy to navigate. Contact info is on the front page but is only a “envelope” icon indicating email. I think there should be more of a call to action. About me is very short. Categories are straight-forward. Animation, Installation & Game only have one example each. Seems a bit light which makes me wonder about how much experience she has in these areas. http://lizz.es/

 

  1. Why might you want to redesign your portfolio site while you are still in school? As you move through the program, you will learn new things so it is important to keep your portfolio site updated to reflect new skills, techniques and programs you’ve learned.

 

 

2-18 Chat-Inspirational WP Men and Women

Who are the three most inspirational people listed in the two articles and why do you find them so inspiring?

  • Daniel Espinoza -he was able to pay off a huge debt with the money he made from developing plugins
  • Lisa Sabin- left her career and started another career in web design & development
  • Jen Mylo -for her  role of encouraging more women and diversity in the WordPress community.

 

Explain the significance/meaning of the following terms:

  • Wordcamp– WordCamp is a conference that focuses on everything WordPress.WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other.
  • Automattic-links to open source projects such as WordPress.com, VaultPress and Gravatar
  • UX-User Experience
  • Multisite- the WordPress configuration that lets a user launch several sites off their main site. It’s not something that most users may know

What did you learn from reading the articles?

There are a lot of people doing great things to further WordPress and other spin off projects that work with WordPress. I also like to see that there are a lot of women involved in web development. It’s is not just for computer geeks!

Feb. 4 Social Media Sprites and Icon Fonts

What is a sprite or roll-over and how do they work?
A sprite is made up of multiple images in one file (such as social media icons). The trick is in the CSS, which reveals the portion of the overall file that needs to be revealed such as in a rollover. I’ve used sprites for social media icons quite a bit. Once you get it to work, you can reuse it to save time. If icons change, they can be swapped out so long as the size of the icons remain the same.

social-media-icons

Using social media icons as an example, the advantage of sprites to create a rollover effect, is that one file will contain all the icons in the visible and hover state. The rollover is created through CSS by plugging in the coordinates of the icon in the rollover state to reveal it. Hence only one file is called from the server as opposed to each individual icon in its own file, which would have to be called from the server individually. The rollover in this scenario is created through an imageSwap.

What will be the possible benefits of using fonts for your icons? Icon fonts are scalable vector icons that can be customized — size, color, or anything that can be done with CSS. They are great ways of creating more complex CSS transitions with icons – transitions that could not be replicated with images.
What is your favorite trick that he shows in the second article? Personally, I liked the hover effect. It’s pretty standard effect but I prefer something subtle because I wouldn’t want to call too much attention to the effect.

What would you like to use on your own site? Hover

Here’s a great site to help you create a sprite:

www.spritecow.com

Jan. 28 — Flexbox, A New(ish) CSS Feature

What is flexbox? Is a CSS module provides a more efficient way to lay out, align and distribute the space of items inside of a container when you don’t know the size or if the items are dynamic. The container will adjust the dimensions of the contents within it to best fill the available space. Items will either expand or shrink to fill the space.

What will be the possible benefits of using flexbox be? The items inside a flexbox container don’t necessarily have to be resized ahead of time and don’t have to uniform in size. This can be a time saver. Might work well for responsive sites. Instead of trying to make an image responsive, make the container that holds the image a flexbox.

What’s the coolest showcase item on the second website in your opinion and why do you think so? Sticky footer is my favorite. The solutions that exist today depend on knowing the height of the footer in order to work. Trying to get the footer to stay at the bottom with normal CSS is difficult because you have to know the height of the footer. With flexbox, the solution is easy. You wrap the vertical sections in a flex container and then pick the ones you want to expand. By doing this, they take up all the available space thus pushing the footer to stick to the bottom.

Jan. 12 & 14 Chat: Turn Your Blog into a Client Magnet

These days blogs are often utilized as fully functional websites. WordPress is an excellent example of a CMS platform that was initially created to be used as a blog but has since become one of the most widely used open source CMS platforms for creating dynamic websites worldwide.

What are your top 3 takeaway ideas from this article?

Your blog is a window to you so it should look professional. Not only is it important to have quality content on your blog in order to attract prospective clients, it is also essential that the blog be well designed and professional.

Minimize ads. Keep ads to a minimum or avoid them all together.

Keep navigation simple and organized. Limit the number of sidebars to just one. Keep the navigation simple as to avoid clutter.

Ghost Horses is a great example of a WordPress portfolio site.

Screen Shot 2014-01-17 at 12.52.53 AMScreen Shot 2014-01-17 at 12.53.18 AM

 

Is there anything you learned that makes you want to change something on your own site when you get time? I didn’t learn anything that I didn’t already know. As far as my personal site, it is not a blog but rather coded myself. I might consider adding a “Hire Me” page or verbiage in the footer.

Like this:

Screen Shot 2014-01-20 at 6.42.31 PM

Freelancing

Based on what you read and what you already know, when do you think you will begin freelancing on the side? I’ve been freelancing for 10 years

What is a good time for you to transition to freelancing full time? If you are not planning to freelance full time, then feel free to discuss this question from a different angle, such as discussing how freelancing would or wouldn’t fit into your web career plans. Ten years ago when I started RearViewImage Design with my sister, we hoped to one day have enough clients to be both quit our jobs and dedicate ourselves to our business full-time. We offered graphic design, marketing and web design services. We did the majority of the things outlined

If you had to come up with an elevator pitch today, what could it be? Award-winning creative professional with 14 years in-house and agency experience. Have worked with well-known national retailers and brands to develop packaging, marketing collateral and POP for product launches. Proven expertise in brand development and sustainable marketing.

What’s the most promising time management/project management tool that the article lists that you might try using? Currently, I use quickbooks. I’d like to try tickspot.com, simplybill.com and slimtimer.com

How will you price your work? Pricing work is a beast. For me it depends. For web projects, I used to charge $400 a page. Charging by the page can be a bit like charging by the hour. My preference is to evaluate the job as whole. Find out what the client wants and depending how large the site is and whether it is static or dynamic, charge by the project.

Never Heard of It

The article “Never Heard of It” by Lyza Danger Gardner,  mentions some terms which I’ve heard of but couldn’t actually explain and others that I’m more familiar with.

  • SASS- is a preprocessor, which allows you to use features that don’t exist in CSS yet. It offers more functionality to CSS such as variables, nesting, partials, import, mixins, extend/inheritance, operators (http://sass-lang.com/). Before you can use SASS, you have to set it up on your project.
  • Webkit- is an open source web browser engine, which allows web browsers to render web pages.” It powers Safari & Google Chrome to name a few. (http://www.webkit.org/)
  • RSS feeds- are parts of a website, blog, content that are made available through automatic syndication which then appears as an item in an RSS reader (news aggregator). It stands for “Really Simple Syndication”. It enables publishers to syndicate data automatically. Users subscribe to a feed. The reader checks the users feed on a regularly and updates itself.  (http://searchenginewatch.com/article/2065614/Making-An-RSS-Feed)
  • Feedly- is a news aggregator app for web browsers and mobile devices. It works similar to an RSS feed. It compiles news from online new sources all across the web. Users can customize and share with each other.

Of all these I will mostly likely try SASS because it does make CSS much more functional. I have used WebKit or at least the syntax in CSS but I don’t think that I would use it to build my own search engine. I signed up for Feedly. I think that it will be helpful with at least keeping me up-to-date with the latest trends. (At least that is my hope).

Web/Design Development is somewhat of a moving target. Just when you think you know something or have mastered something, five new “must know try” things are launched. The best way to stay on top of the latest and greatest is either to be involved with it or to stay connected with the industry. My approach will be to remain active with industry forums and groups, signup for a Feedly account and specify areas of the industry that interest me, keep up with Mashable and maintain both an account on Lynda.com and Treehouse. It’s a lot to do and keep up with but this industry is evolving exponentially and if you don’t make an effort to keep up with the “pace group” or at least have them in your line of sight, you will be left behind very quickly.

To get the ball rolling and add one more thing to my information overload, I set up RSS Feed Reader on Google Chrome since that is my browser of choice. The good thing about it, is that it collects the links, articles topics based on things I’m interested in. I don’t have to search or save anything because it does it for me.

Keeping up with the John & Jane Q. Techie

Making the case for keeping up with the industry in not difficult. You can find a plethora of articles on the subject. Here are some links to a few:

Here is a good video presentation I found called “How To Stay Up To Date With Web Technology

 

Here’s a recent article called “Why Web Designers Must Keep up With Technology

“The web has evolved long past where the languages on offer were Perl or PHP. Granted, it’s not easy to start learning, but the reward makes it worth it. We’re in a booming industry where more tools are coming out than most people can keep up with, but those who do keep up get the best jobs and clients.” (Inglis)