Blog

Monthly Archive: June 2013

Web Design 101

June 28th, 2013 Alina Guzman Graphic Design, Web Development No comments

Have you ever found yourself stuck in the beginning of a website redesign? Maybe you’ve decided to finally launch that website you’ve been thinking of. Or maybe you are ready to take your existing site to the next level. Whatever it may be, it’s likely you’re a bit stumped if you haven’t done it before or don’t have a designer on hand. I’ve certainly found myself in that position before.

I’ll take you through the planning process and the basic design principles (as well as suggest resources you can use) since tomorrow morning the WDI students will have a design workshop for nondesigners! I originally wrote this guide for Esvee Group when I worked there.

There are a few elements you will want to map out before diving into building your website. You will want to plan out your layout, color palette, and typography.

Layout

The layout of your website will depend on the type of website you are building. The basic types of websites are e-commerce, blog based, portfolio based, or informational. To help you figure out layouts, ask yourself a few questions,

  • What is my website’s purpose?
  • What do I want my visitors to focus on?
  • What information do you want to share and how many pages will your site have?

Your website’s visual hierarchy depends on your layout. If you want to show a portfolio or products, you may want to work with a full-width layout. If you have a blog, a layout broken up with sidebars is preferable. If you want your visitors to focus on your photography or store-front image, a featured photo and vertical navigation is preferable.

Color palette

Picking a color palette for your website is one of the most important steps in the design process. Colors will influence your website and give off a message to your visitors. Some things to ask yourself before diving in are-

  • What feeling do I want to give off?
  • Do I want to keep the colors fun or professional?

Your colors will greatly depend on your brand. Color is linked with emotion making it easy to distinguish between a fun website or a professional one. Once you answer these basic questions, finding a palette doesn’t have to be very difficult. There are resources available that give you pleasant color combinations and shades. My personal favorite is Adobe’s Kuler. You can input a color and a wheel will match others to it.

Typography

A font can easily make or break your website. There are plenty of Typography Principles I can bore you with but it all comes down to common sense. When mixing fonts, don’t use very similar typefaces. Opt instead for a bold contrast like a sans serif with a serif. When sizing, make sure the font is visible. Sans serif typefaces generally read better on the web but if you size a serif correctly, it can work. And one last tip – never use Comic Sans!

Here is a great post on 40 Best Typeface Combinations used in web design by Smashing Magazine. Decide if you want to purchase a font or download a free one. Dafont is a great resource for finding free fonts, it even lets you test text when you search.

 

Once you tackle these important elements, you are on your way to implementing your website design! If you have questions about anything raised in this article, please leave a comment below.

Tags: , , , , ,

RubyMine – An Integrated Development Environment by JetBrains

June 26th, 2013 Alina Guzman Tech, Web Development 1 Comment

Right before I started the WDI course, I found an IDE for Ruby that people often rave about, and decided to install it.

An IDE (integrated development environment) is a software program that helps developers build software. IDE’s usually include a text source code editor with syntax highlighting, a compiler that takes the source code into a program that executes it and/or an interpreter that runs programs that don’t need to be compiled, as well as a debugger that helps the programmer run through their code and find problem areas. That was a mouth full. In short- IDE’s offer a lot of tools that make your life easier (if your life is all about building web applications!)

What’s the alternative? Well, in our class for example, we write everything using Sublime – a text editor, and run everything through the command line. Sublime IS awesome and is loaded with all sorts of shortcuts that make writing code a pleasure. And the command line works and you can probably do things much faster than you would with a GUI if you’re fast enough. What I do instead…is use RubyMine.

RubyMine is an IDE by JetBrains, which also makes a ton of other software products for almost any language. The more I work with RubyMine, and the further I go into the course, I really see the advantage it gives.

 

Features and benefits of RubyMine

  • The code editor saves a ton of time and auto-completes every code ending. In comparison to Sublime’s TAB key auto-complete, I found the IDE’s version to be much swifter and more accurate.
  • Helps with testing by providing RSpec help (we only briefly touched upon this topic in class so I was happy to see that it is also a feature of the IDE).
  • Works with the Rails framework latest versions
  • Automatically bundle installs anything you specified in Gemfiles
  • Debugs your code in a super easy-to-use interface
  • Works with lots of VCS! Most importantly – Git! Every time I add a local repository through the command line, it adds a root and automatically adds any file changes to tracking! << I’m crazy about this one.
  • And many more that I’m sure I still have no idea about.

 

Tags: , , , , ,

The lonely PC

June 24th, 2013 Alina Guzman Tech, Web Development 1 Comment

I’m into Week 2 of Web Development Immersive! Most of what we covered was a review of the pre-course so it wasn’t as challenging as I know it will be in the weeks to come.

We covered the fundamental building blocks of Ruby- data types, arrays, hashes, methods, loops, iterations, and classes. Using just these essentials, we built a functioning stock and portfolio manager. I imagine it is important to master these basics as much as possible in order to be able to call on them without trouble once the course progresses and our applications become more complex. Throughout our work with Ruby, we also use the version control system, Git, and a hosting platform, Github, to be able to collaborate with others and open source our code. Git basically runs entirely from the command line. It’s quite fun to work from the CLI- makes things like creating files and directories must faster.

During orientation, I found out I was the only non-Mac user in the class! It was hard for me to imagine that Windows is so irrelevant in the Ruby community. I have long been aware of the stigma against Windows in the design world…but the development world too? As a graphic designer, I worked mainly on huge iMacs both at work and in my college’s design lab. I’m completely comfortable using Macs and have long passed the stage of googling ‘how to copy and paste on a mac’. Regardless, I still prefer using Windows as my main working computer OS. Running graphic design programs on Windows is no different than running them on Macs, so I must disagree when people try to make claims that graphic designers shouldn’t use it.

I say use what you want. If you want a PC- make sure it has killer specs and you’re fine.

Now that I’ve dipped into Ruby and had my fair share of work on the command line, I definitely see the value of the Linux inspired terminal on Mac OSX. Installing programs is as easy as typing out a line and hitting enter (once you download homebrew, that is). Need to create a ruby file and launch a text editor? Type it in the bash terminal. It’s not that I can’t find workarounds with Windows (because I can and have), it’s just a hassle following along a class that is instructed with Mac commands, tips and shortcuts. Because of that, the instructional team recommended on Day 1 that I partition or virtual machine a version of Linux onto my PC.

My father and I spent the next few days battling my machine trying to accomplish just that. The amount of errors we came across would discourage most. Eventually, we got a working copy of Ubuntu onto VirtualBox, but it was so far from optimal! It took anywhere from 30-60 seconds just to open up the terminal. I found a tutorial that changes the driver used in the new version to something faster (and not 3D). That did improve the copy a bit, but it was still far from the speed the computer should have.

We then installed a version of Mint, which is a lightweight version of Linux. While Mint was quite fast, it displayed a video driver error on the home screen at all times that I couldn’t figure out how to remove. Installing from the terminal was also more of a hassle than with Ubuntu because of how light it was.

Ultimately, I decided to keep Ubuntu and just deal with the slowness for when I need to use Linux (deploying my app to the servers, for example). Until that time, I’m sticking with Windows. That unfortunately means I have to listen to my instructional team lecturing in Mac terms. I try to write down what definitely doesn’t work with Windows and what I will need to use once I work on Linux. Some things I have to quickly figure out how to do on the Windows CLI – just like make a new file with ‘new-item’ as opposed to the Mac/Linux ‘touch’ command.

Next, I’ll write about my experience using RubyMine – an integrated development environment that, in my humble opinion, boosts coding productivity far more than anything else I’ve tried! Having my IDE completely obliterates any disadvantages I might have with Windows.

 

Tags: , , , , , , , ,

Journey of a Web Development Student

June 19th, 2013 Alina Guzman Tech, Web Development 1 Comment

The last few months were among the most important and eventful of my life. I graduated college, went on my first vacation abroad (sans family), and made the life altering decision to pursue my dream of becoming a web developer.

I hadn’t heard of the recently popular Web Development Boot Camp courses before my father mentioned a friend of his colleagues’ had enrolled into one.  I had, however, always been interested in the web. My father taught me HTML as a junior high schooler and I was hooked. I got this domain a couple of years ago as an outlet to express my various interests, display my portfolio, and play around with web design to my hearts content.

When the possibility of enrolling in a #webdev course started becoming a reality, I jumped at it. I applied and was accepted into General Assembly’s NYC Web Development Immersive course. I completed roughly 50 hours (if not more) of pre-course work that dove into the fundamentals of Ruby, the object-oriented programming language we would cover. The pre-work consisted of various tutorials and resources available from amazing websites like Codecademy and Codeschool. It was incredibly difficult to follow, and I was so grateful that I had my father, a seasoned developer and Technical Architect to explain every last concept to me repeatedly. While these free tutorials online are an amazing resource, they are far from ideal.

And so begins my 3 month, 9-5:30am every weekday dive into the amazing world of Ruby. Follow along as I learn to build web apps from scratch.

 

Til the days of templates are long gone, I strive!

 

 

Tags: , , , , , , ,

Find me on…

What I’m Tweetin’