Research

  • Web History

    Today, the Web is as intertwined into our lives, as the very air we breathe. We use it to connect to others regardless if they are across the room or on the other side of the globe. We use it to keep us updated with the activities of our friends and family, as well as what is going on in the world around us. The Web is responsible for creating opportunities and movements unimaginable before it existed.

    However, to fully appreciate where we are and in order to know where we are headed, we need to understand where we’ve been, and for the Web industry this means taking a peek into its humble beginnings way back in the early 1980’s.

    Before we get started it is important to understand that the Web, also known as the World Wide Web (WWW), is not the same as the Internet. Today, it isn’t uncommon to find many people referring to them as being one in the same, but they are in fact very different.

    The Internet, as defined by Wikipedia, is the global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link devices worldwide. It is a network of networks that consists of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. Common examples of these protocols would be IMAP, POP3 and SMTP, which we use for transferring emails and is but one of the many layers found on the internet. The Web being another layer, which uses its own protocols such as:

    1. HTML (Hypertext Markup Language) – The language used to create web pages.
    2. HTTP (Hypertext Transfer Protocol) – Although other protocols can be used such as FTP, this is the most common protocol. It was developed specifically for the Web and is favored for its simplicity and speed. Essentially, what HTTP does is request the ‘HTML’ document from the server where it’s being hosted and serves it to our browser.
    3. URL (Uniform Resource Locator) – The final piece we need for the Web to work is called a URL. If a mailman/mailwoman is to deliver your mail, then he/she would need to know the address to deliver it to. Essentially, the URL is that address, which indicates where your document is located on the Web. This can be defined as: <protocol>://<node>/<location>.

    Now that we fully understand the differences between the Web and the Internet, we can start our journey in taking a peek into its history.

    In the beginning, the Web industry had one professional title or web discipline per se, which was ‘Webmaster’ because at the time web pages were simply text documents. An individual holding this position would have been responsible for every aspect and detail of a web page or website. Once the availability and popularity of the Web started to increase, so did the demand and competition for having a web presence. It was at this time where the Web industry grew from one professional discipline (Webmaster) into two professional disciplines, which were ‘Web Designer’ and ‘Web Developer’.

    Once this happened the use of the term ‘Webmaster’ eventually disappeared. Companies would hire or appoint one or more individuals as web designers, who were typically already established graphic designers. These hired individuals would be responsible for designing the aesthetics and arrangement of the content of the web page or website. The companies would then hire or appoint one or more additional individuals as web developers, who were typically already established computer programmers. These hired individuals would be responsible for the coding of the content, the overall administration, and the interaction of the web page or website with the browser and server.

    Companies did this because they originally saw the Web as an opportunity to put something they would normally print on paper and place it up behind a screen. So, having a graphic designer be responsible for converting their print design to the computer screen and have a computer programmer take care of the coding made the most sense at the time.

    However, as technology evolved, so did the software that was being used for the Web industry. No longer was the Web seen as just a place for big corporations and government. Consumers and professionals alike now had access and were able to share the same knowledge and tools needed to design and develop a web page or website effectively and efficiently. Ultimately, this gave the ‘Web Designer’ more creative control and freedom. Little by little, a converted graphic designer or a web designer was able to learn how to create a design for the Web and implement it without needing a web developer.

    For a short period of time, the Web industry once again had one professional title or discipline per se, and that was a ‘Web Designer’. The ‘Web Developer’ discipline for the most part was absorbed back into the IT and computer software industries. It wasn’t until technology advanced again and the Web was finally seen for something more than simply print behind the screen, that the ‘Web Developer’ discipline made it’s way back into the Web industry.

    A web developer was now given the responsibility of taking a web designer’s design and/or another piece of media and make it an interactive experience for the visitors of that web page or website. Out went the old static way of designing things and in came the new dynamic way of designing things for the Web. So, once again the Web industry had two professional titles/disciplines in demand.

    However, the evolution of technology and the change in our employment environment, due to the economy crashing in 2008, would once again change things. In the web industry today, which is in the year 2017, there are many more professional titles/disciplines in demand. You have ‘Mobile Designer’, ‘Front-End Web Developer’, ‘Back-End Web Developer’, ‘Web Developer’, ‘Web Designer’, ‘Web & Graphic Designer’, ‘User Experience (UX) Designer’, ‘Visual Designer’, ‘User Interaction (UI) Designer’, ‘HTML5 Developer’, ‘PHP Web Developer’, ‘JavaScript Developer’, ‘WordPress Developer’, etc. I mean it literally seems as if a new title/discipline is coming out for the Web industry every week. Doesn’t it?

    What makes it really frustrating, especially for anyone looking for work or who is looking to start their professional education in the Web industry, is the lack of continuity and clear distinction between all the respective Web disciplines. There just doesn’t seem to be any set standards in the industry right now, which clearly determines one qualified to hold one of the specific Web titles/disciplines available today.

    For example, you can look at a ‘Web Designer’ opportunity from a hand full of different companies and each company would require you to have and do something completely different. This can be said for every Web title/discipline being requested by employers today, which makes it difficult for someone to determine what it is they should know and become proficient at.

    However, there is one thing that every Web discipline has in common and that is the overall basics/foundation needed to be successful as a Web professional. You see, every industry known to us has specific fundamentals, which makes up the foundation for all the professions within it, and then specific areas to specialize in.

    For example, you have mechanics and then you have mechanics who specialize in a specific area such as transmissions or suspensions. They all learned the specific fundamentals needed to be a professional mechanic and they all know how to work on transmissions and suspensions.

    However, the mechanics who specialize in the specific area of transmissions or suspensions is going to be able to do the job with a lot more precision. Someone couldn’t become a professional transmission mechanic or a suspension mechanic without first learning and knowing the overall fundamentals needed to be a professional mechanic.

    This same principle is true for the Web industry and its specific professional titles/disciplines, and can be seen when looking for available employment opportunities. In today’s competitive employment environment it is truly an employer’s market and they know it. More often than not you will see Web employment opportunities, where an employer is looking for someone who can perform the responsibilities of one or more specific disciplines despite the professional title they advertised for.

    For example, some employers may list an available opportunity for a ‘Web Designer’, but also want them to do a lot of coding or print design work. Also, despite the Web industry having three professional levels, which are ‘Junior’, ‘Mid’, and ‘Senior’, you will find many employers are requiring at least three years of experience for what they are referring to as an entry level opportunity.

    Originally, the Web professional levels, which supposedly helps determine one’s pay and overall skill, was zero (0) to three (3) years for ‘Junior’, three (3) to six (6) years for ‘Mid’, and six (6) plus years for ‘Senior’. However, in today’s competitive employment market you will rarely see an employment opportunity offered for a ‘Junior’ Web professional, who has under three (3) years of experience.

    The reason for this is because employers know there is an abundance of ‘Mid’ level Web professionals available, who they can hire for ‘Junior’ level pay. We are also seeing more employers looking to fill their so called ‘Junior’ level positions with interns, which requires them to do the same amount of work, but with little to no pay. Under the right circumstances, having more employers offer internships can be a great opportunity for someone still going to college, but not so great if you find yourself under the wrong circumstances.

    For anyone looking to become a professional in the Web industry, the best thing you can do to increase your chances of gaining an opportunity of employment is to make yourself invaluable to a prospective employer by not being a one trick pony, so to speak. The more you can offer to an employer, as far as passion, skill and knowledge, the better.

    Initially starting out, whether it be looking for a Web internship or for your first paid position as a Web professional, you don’t want to limit yourself or your potential opportunities. Unless you already have connections and/or money, it is already going to be extremely difficult for you to find your first opportunity as a Web professional, who doesn’t already have three (3) plus years of experience, without limiting what it is you are capable of doing. Once you get your feet wet and have put a few years of professional Web experience under your belt, then you can start thinking about what specific discipline within the Web industry you would like to concentrate on and specialize in.

    It is a lot easier to concentrate on specializing in a specific discipline once you have already started your career as a Web professional and gained some professional experience. Plus, starting your career and actually gaining some professional experience is going to help you make a better determination of what Web industry discipline or disciplines you truly enjoy and are the most interested in.

    Now, don’t get things twisted. I am not saying this is the approach you need to take with regards to your education, quite the contrary. With regards to your education, the goal should be to have a grasp on something (i.e. JavaScript) before moving onto something else (i.e. AngularJS) because otherwise you will find yourself mediocre in several different areas and not really understanding anything instead of being rock solid in a few areas and ultimately having the ability to learn and understand new things a lot easier.

    Chances are high, that at your first job as a Web professional you will be required to use a language or a specific piece of software/tool, which you simply weren’t able to learn in great detail as a student. So, if you learn how to think, understand and work as a web professional, then you will be able to handle anything thrown at you.

    The saying, “Give someone a fish and they’ll eat for a day, but teach someone how to fish and they will eat for a lifetime”, is extremely relevant in becoming a Web professional. Being a Web professional is a lifelong learning commitment. Things come and go all too frequently and change is inevitable. So, it’s imperative to learn the skills, attributes and fundamentals needed to adapt and overcome this unpredictable environment known as the Web industry.

    This is why it’s critical that you have an internal flame of desire to do what it is you do, so that you will have the necessary drive and initiative to continue to learn and grow on your own throughout the evolution of the Web industry. Being able to adapt and overcome any obstacle or challenge that comes your way is an important skill and professional quality to master, which will undoubtedly get you far in your career as a professional in the Web industry.

    To wrap things up, if you are just starting your education to become a professional in the Web industry or are just starting your career as a Web professional, then don’t worry about specializing in a specific Web discipline right now. Instead, constantly scour the current opportunities available within the Web industry and see exactly what Web skills and knowledge employers are looking for, and then make sure you become proficient in them through gaining some practical experience. It isn’t just important to be able to say you are proficient in them, but be able to provide a portfolio actually showing you are as well. Regardless of your current skill set or interest, if you want to be a professional in the Web industry today, then you are going to need to learn the fundamentals.

    The following fundamentals will be the foundation for your career as a professional in the Web industry: Design (Grid, Color, 2D, 3D, etc.), Typography, Creative Software (Adobe, Sketch, etc.), Media Optimization, Programming Logic (Syntax, Variables, Functions, etc.), W3C Standards, HTML, CSS, JavaScript, Cross-Browser/Cross-Platform Dev. (Safari, Explorer, Mac, PC, etc.), Browser Web Dev. Tools (Firebug, Web Inspector, etc.), CMS (WordPress, Drupal, etc.), Basic SEO (Alt tags, Keywords, Compression, etc.), and Workflow (Project Briefs, Prototyping, Version Control, etc.).

  • Reading Assignment 1

    Whether you are just starting your journey in becoming a web professional or have decided to venture into freelancing, there is undoubtedly plenty to learn. So, for our first reading assignment we are going to read 20 Unacceptable Behaviors for Freelance Web Designers. Although dated, the tips given are still of great value.

  • Reading Assignment 2

    Building off our first reading assignment and in order to “drive home” the importance of these valuable tips, we are going to read How Not To Get Screwed By Clients for our second reading assignment.

  • Practical Exercise 1

    For our first practical exercise we are going to research a potential client and identify their audience: Digital Harbor Foundation (DHF).

  • Graphic Design vs. Web Design

    If you are naturally creative, enjoy thinking outside the box, have an eye for detail and like playing with colors, then working in the design industry might be a way for you to unleash your passion and turn it into a successful career. After all, if you are going to work why not get paid doing something you enjoy.

    There are many specialties, that fall within the Design industry, but none have had as much growth as Graphic Design and Web Design. This is largely due to the connection each of them have with technology. So, if you find yourself intrigued with technology, then at first glance you will most likely find yourself having a difficult time determining which field to pursue. However, once you have an understanding of the differences between these two fields, you will find yourself better equipped to determine which is best suited for you and your personality.

    The main difference between the Graphic Design and Web Design field is their respective mediums. Graphic designers often have more artistic freedom because they aren’t restricted by coding, resolutions or file size, as their designs predominantly exist for print applications (i.e. brochures). Where as web designers have to balance design with speed and efficiency because their designs exist solely for digital applications (i.e. websites).

    Graphic designers will typically find themselves being tasked with creating visuals to meet precise commercial and/or promotional needs, such as packaging, displays, infographics or logos. They do not do any coding and must be proficient within areas such as Raster and Vector images, CMYK and RGB color modes, DPI and PPI resolutions, Typography, Grids, and Logo Design versus Branding.

    On the other hand, Web designers will typically find themselves being tasked with creating and modifying all aspects of a website, including the graphics, content, performance and capacity. They do not handle any print related tasks and must be proficient within areas such as Visual Design, User Experience (UX), Design Software, HTML, and CSS.

    To summarize, if you find yourself putting your art first, having a one sided relationship with your audience, emphasizing visual theory in your artwork and being drawn to the fine arts (i.e. pencil, pen, paint), then pursuing a career in the Graphic Design field is probably the choice for you. Now, if you find yourself combining your art with technology, having a mutual relationship with your audience, being more technical and taking a more scientific approach to your artwork, then pursuing a career in the Web Design field is probably the path you want to take.

  • Core Elements of a Web Page

    One of the greatest things about working in the Web industry is that not one project is the same. Although you might see similarities in the problems you are solving within each project, there are a countless amount of ways to solving them. The only limitation is that of your own imagination and proficiency in coding with regards to the visual appeal and current web standards.

    With that being said, you will rarely find any one website that is astoundingly unique to anything else you can find on the Web. This is because successful web pages all have the same core elements. These core elements are: Header, Hero Shot/Billboard, Call To Action (CTA), Content, and a Footer.

    Header

    You will typically find the ‘Header’ element at the very top of the web page, hence it being called “Header”. Contained within this element it isn’t unusual to find the company’s/organization’s logo and/or brand, a headline, sub-headline and main navigation.

    The main goal for the ‘Header’ element is to quickly identify to the visitor where they’re at and why. The logo and/or brand is the identity of the company/organization and lets the visitor know where they’re at. The headline and possible sub-headline defines the unique selling proposition and lets the visitor know why they’re there. The main navigation allows the visitor to explore more of the content the company/organization has made available to them.

    Having a headline is extremely important. It is typically the first thing visitors will see and read. It needs to clearly describe what a visitor will get from the page (why is the visitor there), and this needs to be achieved in a short and sweet manner. Often times a company/organization will add a sub-headline in order to achieve this. The sub-headline can be implemented as a direct extension of the headline, which it follows directly after the primary headline in a manner where it’s almost finishing a sentence, or it can be implemented to extend the headline by adding a separate persuasive message, which supports the one given via the headline.

    Hero Shot/Billboard

    They say, “A picture is worth a thousand words”, and given the short attention span we have developed with technology, this couldn’t be closer to the truth. This is where the importance of having a ‘Hero Shot/Billboard’ element comes into play. Its main goal is to be the visual representation of the company’s/organization’s offer and assist visitors gain a better understanding of what that is. In order for this to be effective, it should show context. For example, if a company is selling candy, then they probably don’t want to use a picture or video showcasing the newest pair of Air Jordans.

    Call To Action (CTA)

    Each web page should have a purpose and a company/organization will define this through the use of a conversion goal, which describes this purpose and is used to keep them focused when designing the page.

    This is mirrored to the visitor in the context of what is known as a Call To Action (CTA), and can either be implemented as a standalone button or as part of a lead generation form. Often you will find the ‘CTA’ element paired with the ‘Hero Shot/Billboard’ element.

    The Call To Action’s main goal is to achieve the conversion goal for that page via successfully having the visitor interact with it. Depending on its design, placement, and what it communicates are all factors in determining its success.

    If a company/organization has implemented a CTA in order to generate leads, but their form requires a grocery list of information from the visitor, then the CTA will fail. You need to keep things short and sweet. However, that doesn’t mean you can simply just have your CTA button state “Click Here” or “Submit”. A CTA button should be more descriptive and to the point. For example, “Get your $60 Nike coupon” is a far more successful CTA button because it tells the visitor exactly what to expect when clicking the CTA button.

    Content

    The ‘Content’ element is typically located right after the ‘Hero Shot/Billboard’ element and before the ‘Footer’ element. Its main purpose is to follow up on the message delivered via the headline and sub-headline by offering a more detailed description and visual representation regarding what it is the visitor can benefit from.

    Now, this doesn’t necessarily mean the page should end up feeling like it’s full of nothing but text. Usually, a quick summary being no more than a paragraph should suffice with using some visuals to hit on bullet points, that effectively communicates to the visitor what is it they can benefit from. Think of it as being a reinforcement statement to the headline.

    Footer

    The ‘Footer’ is the last core element of a web page, hence why it is called a “Footer”. Since it’s the last part of the web page a visitor will see, a company/organization has one last chance to communicate to the visitor. This is a great opportunity for a closing argument, which backs up the unique selling proposition established in the ‘Header’ element, to be potentially paired with a repeat or new Call To Action (CTA) element.

  • Practical Exercise 2

    Wireframing is the process in creating a visual guide representing the skeletal framework of a website, which takes into account its lay out, content and functionality. You can think of wireframing as a visual reference similar to that of a blueprint an Architect creates for building a house. For our second practical exercise lets start wireframing a website making sure we account for each of the core elements.