Christine Scarcelli

I am a web designer and web creative in the Chicagoland area.

[graphicdesignblg]

Explorers Club: Aquarius by DKNG Follow us on Instagram @graphicdesignblg

[minimaldesks]

[christinescarcelli]

How to Create a Style Guide

If you've never created a style guide before, you may be wondering what exactly a style guide is. A style guide is a collection of elements that together make up a website. If you think of a website, break it down into different segments that make up its entirety, such as: typography, graphics, colors, etc. These segments can be compiled into a book format or even consolidated further into a simple one-sheet display for your project. A style guide is very helpful when it comes to designing a website, as it is an indispensable resource to come back to when collaborating with other designers or trying to organize the project.

I’ve drawn up some samples of how a style guide can look by using a fictional company that you may be familiar with if you have seen the movie Step Brothers: Prestige Worldwide. A style guide can be broken into these categories, for example: brand, typography, color palette, iconography, graphics, forms, buttons, social media, layout, framework, code structure, etc.

Brand

This category typically includes the logo of the company. The logo should be completely scalable to correspond with different mediums. Different versions of the logo should be illustrated. This area is also where you would outline the mission statement and purpose of the brand.

Typography

This area includes every font style you're using in your marketing scheme. The main logo font, title fonts, content text fonts, etc. You should also include font sizing and spacing in this section.

Color Palette

This area outlines every color used in the marketing scheme. You should have a primary color palette, used for your brand's logo, and a secondary color palette, that includes an expanded set of colors used outside of your logo. Always illustrate the color palette and include both RGB & hexadecimal values.

Iconography

This area includes pretty much every icon used in your website. Icons are mainly used as navigation purposes, but can also be used with titles and social media links within the site.

Graphics

This area will specify each image and its correlating size and image ratio to be used within the site.

Forms

This section should outline each form that will be implemented in the site.  Each element should be addressed; ex.: Contact Form: Name, Text Box, Email, Text Box, Message, Text Field, Send Button, etc.

Buttons

This area should include the look and feel of every button you choose to incorporate within your site. Whether it is just for a button on a form or if you're using buttons for navigation purposes, this is the place to illustrate how the buttons will look. Explain what each button performs when clicked.

Social Media

This area should include every social networking service your brand is associated with. It should include links to your brand's profiles in different social networking services.

Layout

This section should include a template for how the website will look. The positioning of your logo, navigation, content, etc. Proper sizing and spacing should be addressed. Outline how the navigation bar, header and footer should look.

Framework

This area should outline which framework grid you are using and how it is incorporated in the layout of the site.

Code Structure

Is JavaScript implemented in the site? How should a class be named? This section should answer these questions and form guidelines for which code should be written.

Summary

In the design process, I think it is useful to create the style guide before the main effort is executed. I believe a style guide keeps everyone on the same page and more focus is implemented for the project. A style guide is a flexible document and can be changed at any time, and it is nice to have a reference guide to fall back on should any questions or conflict arise.

[christinescarcelli]

Music & Productivity in Web Design

Does music make any difference at all when designing websites? I think this question can be applied to many different professions or tasks. Personally, I love music and I listen to it whenever I can, wherever I can. But that is not to say I have music playing constantly. I think there is a time and place for music; which, again, leads me to the question: Does music make a difference when designing websites? I believe the answer is yes, yes it does.

When faced with different tasks throughout the day, I am more inclined to put on some music to help pass the time and make the task go faster. Things like cooking, cleaning, driving, painting, and other everyday chores always seem more fun and less daunting when music is playing. But when it comes to working and designing websites, there are times where I like music playing and times where I don’t.

For instance, when I write, I don’t have any music playing at all. I find it easier to concentrate when I have complete silence to gather my thoughts and ideas. The same goes for brainstorming and organizing for a project. I need silence to get my game plan together. Once that is in place, I can put on the headphones and start listening to music. I find tasks like coding and designing graphics go by a lot quicker this way. Tasks that seem repetitive or things I’ve done a million times before go by in a breeze when listening to music.

When learning and trying to retain information (reading and writing), music can be a hindrance. Music with lyrics also tend to interfere with the learning process, as a person starts to focus on the lyrics in the song and lose focus in the task at hand. Unfamiliar music can also hinder learning, as you try to figure out who the artist might be.

So is music right for you when designing websites or whatever task you are faced with? Ask yourself these questions: Does the task at hand require all of your attention? If the answer is yes, then music should be turned off. Have you completed the task before? Is the task something you could do in your sleep? If the answer is yes, then music should be okay to play to help you speed up the process of completing your task.

When music is playing in the workplace, and is music you want to hear, your mood can be lifted. As referenced in this article, music can help workers complete their tasks more quickly and improve their mood. When workers are in a better mood, tasks are completed both swiftly and correctly. Music can help keep the work environment and atmosphere fun and light.

When it comes to music genre, I find different genres help different tasks. Personally, here are my preferred music genres for specific tasks. I listen to classical, ambient, and music without lyrics for studying and absorbing information. Electronic, dance, indie, rock, etc. are usually playing when I design to help the creative process. Anything familiar is always good when designing, as you can almost tune out lyrics and focus on your work with its background noise playing. It is a good idea to have a playlist handy with all of your favorite songs included on it to play on repeat. I find complete silence is best when reading and writing.

Whether you love music or hate it, you can’t deny that it has its advantages when it is playing in the workplace. Find out if it works for you and when it is appropriate to play for certain tasks. I will leave you with a few samples of my favorite pieces to listen to while working.

Background Music / Noise

Rainymood + Classical or Piano

[learntocodewithme]

source

[christinescarcelli]

Problems with DIY Website Services

With the many do-it-yourself website services available today, a lot of businesses and entrepreneurs are easily lured into using them because they are usually a cheap and easy alternative to hiring a web designer. From a business owner's perspective, it's easy to see why a DIY web service would be a good solution for them. Sometimes they are free, sometimes they cost money; but the bottom line is that they are usually cheaper than hiring a web designer. DIY web services also boast that you can have your new site up and running today! TODAY! Speed and inexpensive solutions are the biggest attractions DIY web services advertise to get businesses to utilize them. But from a web designer's perspective, I can see the pitfalls and issues with DIY web services.

Here are just a few of the many problems with DIY web services:

Lack of Originality

Domain Name Regulations

Insufficient Control

Lack of Originality

One of the biggest drawbacks with DIY services is a lack of originality. Sites such as Squarespace and Wix advertise that you can "design" your own "original" website in minutes, but force you to design your website within specific parameters. You basically choose your favorite template or layout, and that's that. There are also countless constraints you must follow. There is nothing unique to set your site apart from others. You shouldn't be forced to mold your brand/business to fit your website template; it should be the other way around. Mold your website to fit your business and brand. DIY services don't allow you to do that. They produce websites that are a dime a dozen and are not as customizable as you might think.

Domain Name Regulations

Some DIY services include domain names for free, but usually come at a price. Instead of something like "YourWebsite.com", you get "YourWebsite.DIYservice.com". It's not a good idea to go with an option like this. Not only is your brand tied to your DIY service name, they are also forcing you to advertise their brand with yours. When you perform a Google search of your business, the results will promote the DIY service and possibly overshadow your own brand. It's a better idea to register your own domain name and have full ownership and your brand only featured in your URL.

Insufficient Control

Coding within DIY services can be a bit tricky. Some allow a bit of control while others don't allow much at all. This becomes a problem if you want a specific feature on your website. If the site doesn't allow it, you simply can't add it to your own site due to code restrictions or lack of administrative services for back-end development. Furthermore, SEO and analytics can also pose a problem with these sites.

As you can see, DIY web services have a lot of drawbacks. Sure, they're good in a pinch, but do you really want to put your brand/content on the line just to save a dime? If you want a quality website that you can be proud of, it's a good idea to hire a web designer to do the job. Bottom line: nothing of quality is free. You'll have to pay at least something, whether it be your domain or a fee for the service. But for the sake of your business, if you're going to spend money on a web solution, spend it on something that you can truly call yours.

[bjornamherd]

Designing for Large Screen Smartphones

[learntocodewithme]

this is perfect! all about the thumbs.

[christinescarcelli]

Responsive Frameworks

Responsive frameworks make it easy to transform your website into different sizes while maintaining its layout. These frameworks take the guesswork out of figuring out the sizing of different elements by using a grid that can expand or collapse to fit any type of screen size. Now that it is a necessity for your website to be responsive, the question that comes to mind is: where do I go from here? There are a plethora of grid framework options available to choose from, but the decision can be daunting. Having used a few of said frameworks myself, I decided to share my opinions on them along with some unique features each framework provides (in no particular order).

Skeleton

Skeleton is quite possibly the most simple of the selected frameworks. It has the bare minimum in the number of files and the least amount of code. This is the framework I've used the most and I think it's the most simple and minimalistic of frameworks. I like the elements it provides and the overall look of its built-in components.

Gumby

Gumby is a framework built with SASS, a CSS extension language. Gumby is slightly more complex and requires more files to run. Gumby offers built-in icons using the Entypo font and is very easy to customize to fit your needs. I have used Gumby a couple times and was happy with my experience.

Bootstrap

Bootstrap is by far the most popular and well-known framework. Bootstrap offers a wide variety of components and has ready-made navigation that is easy to plug in to your own site. What I like about Bootstrap is the way you can customize different elements on their website before downloading the Bootstrap files. That way, a lot of the basic elements needed for your website are already compiled within the files.

Base

Base is a simple and lightweight framework much like Skeleton, but is developed in SASS/LESS. This allows you to write more organized and structured CSS. I haven't used Base as of yet, but have downloaded the framework and plan on trying it out very soon.

Foundation

Foundation is a framework for those who need to create a more complex layout, but don't necessarily want to utilize a large amount of files or elements. While Foundation utilizes languages like SASS and is a more advanced framework, it is still easy to use. I have not tried this framework either, but plan to do so in the future.

Skel

Skel is another framework that is both lightweight and simple. Skel is also much like Skeleton, except for its integration with SASS. Skel offers a feature called layers that allow you to create navigation and toolbars off-canvas. Skel is a very flexible system with ready-made elements that can be implemented in your website. I've used this framework once and was happy with my results. I would definitely use it again.

There you have it. These frameworks are just some of many available for use in creating responsive websites. The good news is that these wonderful frameworks are all free. They are great starting points for any website, big or small. Find which one works for you and your next project.

[learntocodewithme]

[userexperiencehub-blog]

[learntocodewithme]

interesting …

[learntocodewithme]

[christinescarcelli]

Web Design Apps

In today's technology, the possibilities are endless when it comes to web design applications. There are so many to choose from. I will discuss the apps I prefer to use when designing websites and the many others that are available. I will break the applications into two categories:

    •    Text     •    Graphics Text Editors

For coding purposes, literally any text editor can be utilized. Microsoft Word? Totally usable. Notepad or TextEdit? Those work, too. But if you are an avid web designer, you know that basic text editors don't quite make the cut when it comes to writing code. That's why it is easier to use text editors specifically designed to edit code. There are many text editing programs available both in free (open source) and commercial formats. I've had experience using some of the applications listed below.

Graphic Editors

For creating graphics on a computer, you will need to use an application called a graphic editor. Like text editors, there are a wide array available in both open source and commercial formats. I have experience using all of the applications listed below.

Web Design Applications

Text Editors

    1.    Adobe Dreamweaver | Commercial This is the app I have used the longest and have come to rely on when designing websites. It is more of an IDE (integrated development environment) but it still edits HTML. Some of the features I like are the split screen code | design format, the color-coded text, and organization. This app makes it easy to code and see the results side-by-side. I like that you can easily switch from HTML to CSS to JS files in seconds. For these reasons, Dreamweaver has become the text editor app / IDE I prefer.     2.    Sublime Text | Commercial This app also features split screen editing. Files are neatly organized on the left-hand side of the screen and the text is color-coded. One thing I really like is the distraction-free mode that allows for full-screen editing. Sublime Text is commercial but offers a free trial.     3.    Brackets | Open Source This app is completely free, which is a huge draw-in to download. Brackets offers a live preview so you can see changes immediately in your browser. It also features inline editing which allows you to edit an element once and see that same element change anywhere else it is featured in the file.     4.    Coda | Commercial This app is also more of an IDE, but it is a less expensive version of Dreamweaver. It features live previewing as well as a debugger. It also offers plugins. One thing about Coda is that it is fast. Changes can be seen in an instant and its text editing couldn't be quicker. Coda is also commercial but offers a free trial.     5.    TextMate | Open Source This app is similar to Sublime Text but as it is open source, offers a beta trial. It is available only for Mac, so keep that in mind.     6.    Macrabbit Espresso | Commercial This app is a nice little bundle that incorporates tab organization and code folding. It also features find-and-replace and color-coded files and text to help with organization. This app is also only available for Mac and offers a free trial. Graphic Editors

    1.    Adobe Fireworks | Commercial Like Dreamweaver, I've used this graphic editor the longest. I started out using Paint.NET for Windows and this app, I found, was the easiest to transition into. It is very simple to use; very straightforward. It's able to create graphics, vector, and typography while also editing photos. There are many effects built-in, gradients, etc. For these reasons, Fireworks has become the graphic editor app I prefer.     2.    Adobe Illustrator | Commercial This app is a graphic editor that focuses more on illustrations and vector-based projects. It is used for more complex graphics, as it has more features than Fireworks.     3.    Adobe Photoshop | Commercial This app is graphic editor that focuses more on graphic images and photos. It is used for editing photos and graphics by using layers and masks and offers a wide selection of tools to retouch, draw, and paint images.     4.    GIMP | Open Source GIMP, or GNU Image Manipulation Program, is an open source graphic editor. It is mainly used for image retouching, editing, cropping, and resizing. It is available for every operating system.     5.    Paint.NET | Open Source This app is something I used to use quite a bit before I got a Mac or any professional software. It was great for designing graphics, typography, and editing photos. If I were to compare it to anything, I would say it is the Windows-only equivalent to Adobe Fireworks and a huge improvement from Paint. This app utilizes layering and masks as well. Summary There are a plethora of options for apps to use for web design, from open source to commercial. Everyone has their preferences and reasons as to why they like using them. Take the time to try different apps, find which ones you prefer, which ones make your life and the art of web design easier.

[learntocodewithme]

[learntocodewithme]

When to use CSS / JavaScript animation. 

[ibmblr]

Watch LIVE as your reblogs and likes fuel our PLAY Machine → (best viewed on computer + tablet) 

[christinescarcelli]

Working from Home

Sounds like a dream, right? You wake up, brew your favorite tea or coffee, and head over to your desk. No commute, traffic, or dressing up. But what most people don't realize when they decide to work from home: it is extremely easy to get distracted. With no one breathing over your shoulder, procrastination can take over.

As someone who works from home, here are some tips that I use to help focus on the task at hand:

Organization

Work Environment

Breaks / Rewards

Organization

It's easy to get overwhelmed when you have a lot of things on your plate. Handling multiple projects at the same time and worrying about finishing them on time can be difficult. I find that organization helps with this problem. Take each project and deconstruct it. Break apart the project as a whole and divide it into individual tasks. Do you need to complete a website from start to finish? Here's a list of tasks you would need to complete the project:

Design the logo.

Choose the color scheme.

Design the layout.

Page organization.

Site navigation.

Organize content.

Edit graphics.

Edit code.

Test site in various platforms.

Publish site.

Looking at separate, individual tasks make the project seem a lot less daunting.

Work Environment

The environment in which work plays a huge role in how productive you can be. Figure out what makes you work efficiently. Do you work better with music playing in the background? Do you need complete silence? Find what environment suits you and what makes you focus on the task at hand. Do you like a clean workspace or do you operate better within organized chaos? Work environment is different for everyone, so find what type of workspace makes you happy.

Breaks / Rewards

It's easy to get caught up in your work, especially if you're on a roll. Working for 5 hours straight, staring at a screen and barely moving can be draining. I find that getting up and walking around, stepping away from your workspace every 2 hours or so can be helpful. If you're stuck on something or feel uninspired, a change of scenery always seems to help. Step outside and take a break. Try to relax your mind. You might see something that sparks an idea you might not have thought of if you hadn't taken a break.

If you've been working productively for a long period of time, reward yourself. Reserve things you enjoy to reward yourself with after you complete a task. Finish a difficult string of code? Reward yourself with a YouTube video or watch a new episode of your favorite series. At the end of the day, knowing you were productive during the day makes you feel less guilty when you enjoy your favorite hobby or activity. It makes your free time feel a lot more well-deserved.

Summary

While working from home has its perks, it is very easy to get distracted and push your responsibilities to the back burner. I hope that these tips help you become a more efficient worker at home.

[learntocodewithme]

i <3 arvo and droid serif.

what’s your favorite google font?