Archive for June, 2011

60 Fresh and High Quality Free PSD Files

Advertisement in 60 Fresh and High Quality Free PSD Files
 in 60 Fresh and High Quality Free PSD Files  in 60 Fresh and High Quality Free PSD Files  in 60 Fresh and High Quality Free PSD Files

Adobe Photoshop ranks high among the ultimate tools used in graphic design and most designers wouldn’t even think of designing without Photoshop installed on their computer. Having high-quality PSD files can not only shave time from your workflow, but can also come handy for any rush jobs a client needs. PSD files allow designers to customize them according to their project needs and individual client tastes.

This is the reason almost all graphic designers keep a good collection of PSD files on hand that they can use in their future projects. This is also why they are constantly looking for new and exciting PSD files that are available for free to add to said collection. Here we have an awesome assortment of 60 high-quality PSD files that you can download and use for free. Enjoy!

Icons Related PSDs

3D Glossy Icon Set: 20 Free Icons

Psdfiles28 in 60 Fresh and High Quality Free PSD Files

USB Pen Drive PSD

Psdfiles23 in 60 Fresh and High Quality Free PSD Files

Modern office telephone icon

Psdfiles1 in 60 Fresh and High Quality Free PSD Files

SocialMate: 28 Free Social Media Icons

Psdfiles29 in 60 Fresh and High Quality Free PSD Files

iPad and Paper Stack Icon

Psdfiles25 in 60 Fresh and High Quality Free PSD Files

Plane free psd file

Psdfiles30 in 60 Fresh and High Quality Free PSD Files

Pie chart icon

Psdfiles3 in 60 Fresh and High Quality Free PSD Files

3D Box

Psdfiles22 in 60 Fresh and High Quality Free PSD Files

Portfolio slides template

Psdfiles4 in 60 Fresh and High Quality Free PSD Files

PSD Graphic of Retro Phone

Psdfiles19 in 60 Fresh and High Quality Free PSD Files

Quill pen and inkwell icon

Psdfiles5 in 60 Fresh and High Quality Free PSD Files

Drawing tools icon

Psdfiles6 in 60 Fresh and High Quality Free PSD Files

Fluorescent light bulb icon

Psdfiles7 in 60 Fresh and High Quality Free PSD Files

Settings, Weather, Phone iOS Icons

Psdfiles26 in 60 Fresh and High Quality Free PSD Files

Stylish business card template

Psdfiles2 in 60 Fresh and High Quality Free PSD Files

Color palette icon

Psdfiles8 in 60 Fresh and High Quality Free PSD Files

Traffic lights icon

Psdfiles9 in 60 Fresh and High Quality Free PSD Files

Notebook

Psdfiles60 in 60 Fresh and High Quality Free PSD Files

Silver laptop icon

Psdfiles10 in 60 Fresh and High Quality Free PSD Files

Battery icon

Psdfiles11 in 60 Fresh and High Quality Free PSD Files

Designer Brushes-Icon Set

Psdfiles21 in 60 Fresh and High Quality Free PSD Files

Round retro stickers, PSD template

Psdfiles12 in 60 Fresh and High Quality Free PSD Files

Stage spotlight icon (PSD)

Psdfiles13 in 60 Fresh and High Quality Free PSD Files

iPod nano Multi Touch

Psdfiles24 in 60 Fresh and High Quality Free PSD Files

Computer diagnostics icon

Psdfiles14 in 60 Fresh and High Quality Free PSD Files

Treasure Chest with Golden Coins

Psdfiles20 in 60 Fresh and High Quality Free PSD Files

Graphics processing unit, GPU icon

Psdfiles15 in 60 Fresh and High Quality Free PSD Files

Silver padlock, security icon

Psdfiles16 in 60 Fresh and High Quality Free PSD Files

Tablet PC, blank screen PSD template

Psdfiles17 in 60 Fresh and High Quality Free PSD Files

USB flash drive icon

Psdfiles18 in 60 Fresh and High Quality Free PSD Files

Music, Text, Videos iOS Icons

Psdfiles27 in 60 Fresh and High Quality Free PSD Files

Buttons Related PSDs

Big Buttons

Psdfiles32 in 60 Fresh and High Quality Free PSD Files

Web elements

Psdfiles37 in 60 Fresh and High Quality Free PSD Files

15 free web buttons

Psdfiles35 in 60 Fresh and High Quality Free PSD Files

Orange pack

Psdfiles36 in 60 Fresh and High Quality Free PSD Files

Pixel Perfect Buttons 1.0

Psdfiles34 in 60 Fresh and High Quality Free PSD Files

Glossy Bubble PSD Graphics

Psdfiles30b in 60 Fresh and High Quality Free PSD Files

Panel Buttons

Psdfiles31 in 60 Fresh and High Quality Free PSD Files

Greene Pack#3 – Switches

Psdfiles91 in 60 Fresh and High Quality Free PSD Files

Subscription buttons

Psdfiles38 in 60 Fresh and High Quality Free PSD Files

4 Web buttons

Psdfiles39 in 60 Fresh and High Quality Free PSD Files

5 Colorful web buttons

Psdfiles90 in 60 Fresh and High Quality Free PSD Files

Web Templates PSDs

Web electric v2 Template

Psdfiles53 in 60 Fresh and High Quality Free PSD Files

Software Layout PSD

Psdfiles41 in 60 Fresh and High Quality Free PSD Files

Blog Website

Psdfiles42 in 60 Fresh and High Quality Free PSD Files

Paper vCard: Free PSD Web Page Template

Psdfiles48 in 60 Fresh and High Quality Free PSD Files

Free WordPress 3.1 Theme: Splendio

Psdfiles49 in 60 Fresh and High Quality Free PSD Files

PSD Template of Under Construction Page

Psdfiles40 in 60 Fresh and High Quality Free PSD Files

SDT Webdesign

Psdfiles50 in 60 Fresh and High Quality Free PSD Files

Splendio WP Theme

Psdfiles51 in 60 Fresh and High Quality Free PSD Files

Designers Portfolio

Psdfiles52 in 60 Fresh and High Quality Free PSD Files

Twitter Background Template 1

Psdfiles54 in 60 Fresh and High Quality Free PSD Files

HTML5 Coming Soon Template

Psdfiles55 in 60 Fresh and High Quality Free PSD Files

Web UI Kit PSDs

Transparent Glass UI: Free PSD for User Interface Design

Psdfiles46 in 60 Fresh and High Quality Free PSD Files

UI Web Design Elements (UI)

Psdfiles43 in 60 Fresh and High Quality Free PSD Files

Pop-up Contact Form (UI)

Psdfiles45 in 60 Fresh and High Quality Free PSD Files

Search boxes

Psdfiles80 in 60 Fresh and High Quality Free PSD Files

Web User Interface Buttons

Psdfiles33 in 60 Fresh and High Quality Free PSD Files

Awesome Tooltips & Alerts

Psdfiles82 in 60 Fresh and High Quality Free PSD Files

Free video player interface

Psdfiles81 in 60 Fresh and High Quality Free PSD Files

Consider our previous posts:

(rb)


Following A Web Design Process

Advertisement in Following A Web Design Process
 in Following A Web Design Process  in Following A Web Design Process  in Following A Web Design Process

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)

1. Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

  • Requirements analysis
    This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
  • Project charter
    The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
  • Site map
    A site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
  • Contracts that define roles, copyright and financial points
    This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.
  • Gain access to servers and build folder structure
    Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
  • Determine required software and resources (stock photography, fonts, etc.)
    Beyond determining any third-party media needs, identify where you may need to hire sub-contractors and any additional software you may personally require. Add all of these to the project’s budget, charging the client where necessary.

Resource links for this phase:

Process99 in Following A Web Design Process

2. Design

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

  • Wireframe and design elements planning
    This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
  • Mock-ups based on requirements analysis
    Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
  • Review and approval cycle
    A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
  • Slice and code valid XHTML/CSS
    It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.

Resource links for this phase:

3. Development

Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

  • Build development framework.
    This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly.
  • Code templates for each page type.
    A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
  • Develop and test special features and interactivity.
    Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.
  • Fill with content.
    Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.
  • Test and verify links and functionality.
    This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.

Resource links for this phase:

Process77 in Following A Web Design Process

4. Launch

The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).

  • Polishing
    Particularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here, you can identify parts of the website that could be improved in small ways. After all, you want to be as proud of this website as the client is.
  • Transfer to live server
    This could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Your last-minute review of the live website happens now. Be sure the client knows about this stage, and be sensitive to timing if the website is already popular.
  • Testing
    Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
    Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.

Resource links for this phase:

5. Post-Launch

Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. Always leave the client as succinctly informed as possible, and try to predict any questions they may have. Don’t leave the project with a closed door; communicate that you’re available for future maintenance and are committed to ongoing support. If maintenance charges haven’t already been shared, establish them now.

  • Hand off to client
    Be sure the client is satisfied with the product and that all contractual obligations have been met (refer to the project charter). A closed project should leave both you and the client satisfied, with no burned bridges.
  • Provide documentation and source files
    Provide documentation for the website, such as a soft-copy site map and details on the framework and languages used. This will prevent any surprises for the client later on, and it will also be useful should they ever work with another Web developer.
  • Project close, final documentation
    Get the client to sign off on the last checks, provide your contact information for support, and officially close the project. Maintain a relationship with the client, though; checking in a month down the road to make sure everything is going smoothly is often appreciated.

As stated, this is merely a sample process. Your version will be modified according to your client base and style of designing. Processes can also differ based on the nature of the product; for example, e-commerce websites, Web applications and digital marketing all have unique requirements.

Process66 in Following A Web Design Process

Documenting The Process

Create and retain two versions of your Web design process:
One for you or your team to use as a guide as you work on the back end, and one to share with clients. The differences between the two should be intrinsically clear: yours would be much more detailed and contain technical resources to help with development; the client’s would be a concise, non-technical map of the process from start to finish.

Common tools for documenting the business process are a simple Microsoft Word document, Microsoft Visio and mind-mapping software such as Freemind. If you’re ambitious, you could even develop your own internal Web-based tool.

Using The Process

By now, you should understand what a process looks like, including the details of each phase, and have some idea of how to construct your particular Web design process. This is a great first step, but it’s still only a first step! Don’t miss this next bit: knowing how a process can enhance your overall business and how to use it when approaching and interacting with clients.

Refining the Process

The process will be different for each designer, and for each project. Develop a process for yourself, and identify whatever is useful to you or your team. Only then will the process be truly useful. After all, freelancers can serve drastically different target markets.

Bulleted lists are well and good, but the process can be much more useful and elaborate than that. Many of the resources, tools and links posted on Web design blogs and Twitter feeds fit into different parts of the process. An incredibly useful way to refine the process is to add resource links to each phase, and to develop your own resources, such as branded document templates.

Process551 in Following A Web Design Process

Some commonly used documents of freelancers:

  • Client questionnaire,
  • Invoice,
  • Project charter,
  • Documentation for hand-off to client,
  • User accounts,
  • Database table charts,
  • Site map.

Files and Archive

Documentation and storage are important to grasp. As mundane as these tasks can be, they certainly help when tax season rolls around or when a small freelance venture begins to expand. You can never be too disciplined when it comes to efficiency in work and time. You could establish a standard document format and folder structure for all of your clients, or maintain a list or archive of previous clients and project files. You could employ anything from simple lists to all-out small-business accounting practices.

A Process Puts the Client at Ease

Many clients view Web development as a black box, even after you’ve tried to educate them on its methods. To them, they provide their requirements, suggestions and content, and then some time later a website appears or begins to take shape. They’re often completely unaware of major aspects of the process, such as the separation of design and development. Having an organized and concise process on hand can help organize a client’s thoughts and put their mind at ease, not to mention help them understand where their money is going.

Outlining my basic process as a freelancer is by far the most common first step I take with potential or new clients. A quick, high-level “This is how it works” discussion provides a framework for the entire project. Once you have this discussion, the client will better understands what specifically is needed from them, what you will be delivering at certain points in the timeline and what type of work you’ll be engaging in as you go along. Most of all, the discussion can nip any miscommunication or confusion in the bud.

Designers are often too deep into Web design to realize that most people have no idea what they do or understand their terminology or know the steps involved in creating a finished product. Starting fresh with a understandably “clueless” client can be daunting.

Process331 in Following A Web Design Process

It’s a Business

It’s a business, and the steps outlined here are basically the path to small-business management. As you grow in clients or staff or contractors, you’ll find yourself with an ever-growing to-do list and a headache from all of the things to keep track of. Give yourself a break, and invest some time in finding tools to help you get the job done efficiently. An expanded process document is a great first step on this path.

Tips

  • Ask a non-technical friend to review your process. If it makes sense to them, it will make sense to your client.
  • Use the processes of other designers as a starting point to build or refine your own. See the related resources links.
  • Build document templates and Web apps into your process. This will save time and make you more professional.

Risks

One process cannot be applied to every project. Although your process will be useful when you first engage a client in the planning discussion, be sure to review it before the discussion takes place to ensure it fits the project.

Further Resources

Here are some links to resources that showcase sample Web design processes, as well as tools and templates to build integrate in your own process.

Have further resources to share? Post them in the comments.

(al) (il)


© Luke Reimer for Smashing Magazine, 2011.


How to Grow as a Designer or Developer

Advertisement in How to Grow as a Designer or Developer
 in How to Grow as a Designer or Developer  in How to Grow as a Designer or Developer  in How to Grow as a Designer or Developer

For many of us in the design and development communities, when we first begin down this path, we tend to go in hungry searches for knowledge and like a sponge we soak up all we can find. However, at times we can come to a plateau where we comfortably set up our virtual camp and we work from this place.

Our quest for knowledge somewhat settles as does our thirst as we become distracted by trying to make our mark and establish ourselves in the community. We do this so that we might find a steady source of income through our skills that we have nurtured and grown to this point. And it is through this time consuming process that the growth of our skillsets ends up on the proverbial back burner.

Growth in How to Grow as a Designer or Developer

This is not a blanket pandemic, but it does happen, and it is in these times that we need the subtle reminder that we should always be moving forward, reaching for that next plateau. Even when we feel as though time for such things is not available, we must make time. Otherwise that excuse will continue to crop up each time we feel the pangs of guilt over our growth stagnation, and our learning process will stay on the back burner indefinitely. So we have to be sure that we actively pursue these opportunities for growth whenever and wherever we can. First, to do so, however, we have to address the roadblock that is in the way preventing our progress.

Fighting Complacency

Life has a tendency of getting in our way from time to time, but generally the problem that we are dealing with when we find ourselves comfortably resting on our laurels is one of complacency. For whatever reason we have become satisfied with the level that we are at, and are no longer feeling that drive that used to fuel our quest for knowledge, and that passion to conquer every challenge that the design or development landscape had to throw at us. And it is this space that we need to get our heads back into so that we can get the wheels turning once more. Below are a few of the problem areas to keep an eye on when you find yourself in the learning lurch.

Time Management

As already mentioned, one of the main excuses we fall back on when we become complacent, is one of a lack of available time. Which does not mean that we should just resign ourselves to the fact that our progress is done, it just means that we have to better learn how to manage our time. If our schedule will not allow for any learning opportunities, then frankly, we need a new schedule. There are going to be places that we can find to fit in these knowledge seeking exploits, we just have to look harder at the division of our time and labor in order to make it happen.

Time-Maschine in How to Grow as a Designer or Developer

You want to manage your time effectively or before you realize, it will have all slipped away. Image by Sachin Sandhu

Before we start rearranging our schedules though, we can first look for areas that can be easily cut down to make room for this needed opening. Whether it is a matter of cutting things short, small things like brainstorming sessions or big things like sleep, there might be areas of our daily/weekly schedules that we can squeeze some time free from to shift over for growth and learning experiences. If we cannot find any time to shave away, then we have to look at what can be rearranged to work them in. However we approach it, if time is not on our side and keeping us from moving forward, then we have to work to change that.

Ego Check

Sometimes the complacent nature that keeps us grounded on this virtual plateau is brought on, not by a lack of time, but more by a surplus of ego. We get to the point where we think we have mastered our field, and there is nowhere left for us to go. We believe we have reached the top level, the peak, and that there is no higher place that we can get to from here. And at that point, we just give up even trying. Our search is over. But that is a horrible disservice that we are doing to ourselves and our skills, for there is always more to learn. Especially in these dynamic of fields.

And even if we are at the top of our game, then the only way that we can ensure that we stay there is to keep fine tuning our skills through practice and repetition. Just like a muscle, if we do not give our skills a regular workout, then they will not maintain their strength. We will begin to forget the little things that once took our work to the next level if we let our egos get in the way and keep us from putting them into practice every now and again. At first, we become rusty. Then we just become forgetful, and we begin slipping. So we need to keep our ego in check otherwise it could become a liability to any future forward progress in our fields.

Perspective Adjustment

Another way that we can try to combat this complacency that keeps us from continuing to grow in the design or development field is to give our perspective somewhat of a refresh. Could be the rut we have dug ourselves into stems from the way we view the work we are doing on a daily basis. It has lost some of its appeal and excitement for us as we have settled into a comfortable work routine. Designing or developing has become a regular job and that label may have tarnished the way we look at it. So we have to try and bring some of that original excitement back into the picture.

Perspective in How to Grow as a Designer or Developerd. FUKA

Sometimes we just need to come at things from a different perspective and see how they unfold from there. Image by

This can be a self correcting problem of sorts. Usually the reason that we no longer see the excitement in our jobs is because that they have gotten stagnant themselves. We find ourselves doing the same sort of task time and again, until it becomes monotonous. So once we set out to learn once more, and new doors open in the design or dev world, then things are going to get back to that exciting place again.

Getting that fire going can take a perspective flip. So try and see the work differently. Do not look at this continued knowledge quest as some sort of schooling, but more as leveling your character or anything fun like that. Whatever flips the script on your view of the path ahead for you is what you need to do to move forward.

It’s Time for Growth

So what can we do once we have taken care of the complacency issues? What are the most effective ways forward? Well that depends. More than likely there is no one recipe for success. So we have to look at a variety of approaches to get our learn on. Below are several ways that one can get started on immediately to continue on the path for professional growth and expansion of their design/development skillsets.

Experiment

One of the first things that we can do to ensure that we are still learning and growing in our field, is to experiment. Naturally, the more repetitive our daily work becomes, the less it is challenging us or daring us to step outside of our comfort zones to try something new. If we are experimenting with new styles or techniques, programs or tools, whatever the case may be, then we are guaranteed to be learning something and pushing our skills to new heights. Connect with your inner scientist and begin branching out from your established routine to try something that you have not within your field.

Experiment in How to Grow as a Designer or Developer

There is a subtle science to design and developing, so why not experiment and try something something new. Image Credit

When you experiment, do not be afraid to reach outside your area of expertise and try new areas of the field that would normally avoid playing in. This is not to suggest that you in any way begin altering the course you are on or change your specialty. Just that you reach into places that you often don’t. Especially those that intimidate or fluster you. Those should be some of the first places that you turn.

Also remember that keeping personal projects often helps because in these projects we tend to feel freer to take chances and try new things. This challenge will keep you from being able to grow complacent as you will never be settled, but rather always in motion.

To Sum Up:

  • Challenge yourself in and outside your field of focus within the design or development arenas.
  • Keep forcing yourself to try something new (styles, techniques, apps, etc…)
  • Reach outside your comfort zone to expand on your base of knowledge to find new opportunities to learn.
  • Keep up personal projects to keep the work in your field fun and allow for taking risks your professional work doesn’t afford.

Study Work You Admire

Another way to grow as a designer or developer, and ensure that you do not stagnate upon the plateau where you landed is to study the work of those you admire who came before you in the field. This is a proven way to keep yourself inspired to progress and learn more. Besides the concepts work so well together anyway. Studying and learning go hand in hand, so why not apply it here as well. The internet makes this studying endeavor an easily achievable chore. One that can also help to further our appreciation for our fields. Which never hurts at keeping complacency at bay.

Now when we say study other works, this is means more than simply checking them out and admiring the quality they hold. This is an in-depth examination of the techniques and styles that were implemented in some of our favorite designs. Or a deeper look into the code that powers and feeds some of our favorite applications, sites, etc…

You can also turn to the online galleries and showcases for a plethora of work to browse through if you need to track down some subjects for your studies. And so that you can get an idea of how to dissect the work you can look at forums and feedback sites for others breaking down pieces and highlighting what you can focus on.

To Sum Up:

  • Focus on studying the implementation of techniques and styles, or studying the code behind the scenes.
  • Look into online galleries and showcases for work to dissect.
  • Check into forums and feedback sites to find work and what to key in on as you break down the work for learning purposes.

Keep Up With Your Field

Especially in the design and development worlds, the landscape changes with a fair amount of rapidity, so keeping up with all of the changes can be a daunting task, but it is one of the most sure fire ways to grow in your field. When you are following along with the way the field is developing, then by default you will develop in suit. That is providing that you are actively working to learn the ins and outs of the new developments and are not just watching from the sidelines. You need to be in the game, so to speak.

Sidelines in How to Grow as a Designer or Developer

We cannot just be passively waiting on the sidelines, we need to be engaged in our community to stay ahead of the game. Image by Westside Shooter

Most industries have trade magazines that closely monitor and report on the trends and shifts that shape and steer said industries. The fields of development and design are no exception this rule. This is a great place to begin your search for any of these game changing happenings, and most of them are conveniently available online.

Beyond the trades, there are social media and the blogosphere among others that can also help you find out what is happening in the field that is to be the shape of things to come. No matter the method you choose, if you want to grow into your field and continue to learn, then strive to keep up with your industry.

To Sum Up:

  • Follow along with the trade magazines and dedicated sites/blogs of your field.
  • Use social media to track the trends and game changers popping up in your chosen field.

Seek Feedback from Others in Your Field

A further way that you can ensure that you are always on the path of learning is by reaching out to those in your field whom you trust and admire for feedback on your projects and pieces. When we become complacent or simply just ignore our growth, a mindset can take over wherein we believe that we do not need to get any sort of critiques for improving our work. Honest and insightful feedback can be a desi/dev godsend and can do a lot to not only improve our work, but our own processes or techniques. So always being open to and looking for critiques can really help to keep us growing and improving.

Once again, the internet does really facilitate this feedback outreach. There are numerous sites dedicated to this area of the design and development communities, where you can submit your work to be critiqued by the other users of the site. Not only that, but through social media networking, professional relationships are fostered which can help in this area as well. You connect with others in your field who are willing and able to provide you with the insightful feedback you are looking for. Generally, all you have to do is ask. Never be afraid to do so, and always take the feedback in the spirit and tone in which you requested it, not always the way in which it was intended. This will hopefully help remove any of the harsh edge that could accompany some of the less than constructive feedback that may come your way.

To Sum Up:

  • Use forums and dedicated sites or services to get feedback from throughout the community.
  • Foster relationships with others in your field via social media and ask them for critiques.
  • Take the feedback in the spirit with which it was requested, not necessarily the way it was intended.

Collaborate with Others

Another way that we can continuously push ourselves along in this quest for knowledge and professional growth is to collaborate on projects with others of a compatible nature. Now when saying compatible, this is more about finding those who will push you to challenge yourself, and through this collaborative effort they will effectively bring out the best in you. Finding a person to fit this bill is not always the easiest to do, but they are certainly out there. And to be fair, and keep things balanced, you want to be sure that you are going to return the favor and be the same type of partner.

This is another area where you not only want to challenge yourself, but you also want to reach outside your comfort zone or area of expertise in order to get the most out of these collaborations. This way you get to push yourself to venture further than you might get to in your normal professional projects.

Seek out an unusual partner for someone in your field, an unexpected pairing, in order to find new and interesting directions to take your work. This can also help to challenge you to find exciting new ways to work. Presenting your work in ways you had never considered or thought of before the collaborations began. This can then bleed over into your other work, continuously keeping your thinking fresh and outside of the box.

To Sum Up:

  • Collaborate with those you know will push you further in your quest for knowledge.
  • Don’t feel like you have to stay within your field for your pool of potential collaborators.
  • Be the kind of partner you wish to be paired up with, to keep the partnership fair and in balance.

Be Active in the Community

The final area that we will discuss for ensuring that you are always moving forward as a designer or developer, we have already touched on a bit in more indirect ways, and that is to be an active member of the community. This alone can not only help to ensure that we continue to grow professionally, but it can also provide us with an outlet for growing our business too. The design and development communities are such diverse and dynamic collectives that there is so much growth you can gain just by being a part of it.

Community in How to Grow as a Designer or Developer

The online communities are an extremely creative outlet that we can usually plug right into. Mark Sebastion

By maintaining a blog of your own, or writing for others who do, you have a unique opportunity to give back to the community that helped you, while also keeping you informed and well researched as you put together your posts. Beyond that, you can also contribute to the discussions being carried out in the comment sections of said sites. Another way that you can be an active member of the community is through the various social media channels. Either through sharing helpful information or posts you can enrich the community experience for others. As the community grows and is shaped through such interactions and connectivity, so are its participants.

To Sum Up:

  • Run a blog or contribute to one so that you can enrich the community via this outlet.
  • Contribute to the discussion being had across the blogosphere when and where you can.
  • Use social media to share and contribute useful information to the community at large.

In the End…

There are several ways that we can ensure that we remain excited and intrigued by the vast fields that we operate in so that we maintain our desire for professional growth. No matter which approach you take, the important thing is that you keep this passion driving you each step of the way so that we never allow ourselves to level off. What do you find helps in keeping you on the path for growth? What do you think leads to this complacent place where we discontinue our pursuit for knowledge?

(rb)


The Top 10 Secrets to Designing a Magazine

Each avenue in the design world has its own unique challenges and tricks, and magazine design is no different. From style guides and gutters to editors and entry points, designing for a magazine comprises its own set of rules and considerations. Before jumping head first into the text-heavy, deadline-driven world of magazines, take a moment to get your bearings and familiarize yourself with the terrain. Using the road map below, your creativity, and a bit of luck you’ll have everything you need to produce a top-notch, reader-friendly magazine.

1. Style Guides and Templates
In magazine design, consistency is imperative not only to branding but also to creating familiarity between the magazine and its audience. This familiarity breeds trust and loyalty, and ultimately keeps readers coming back for more. One of the biggest misconceptions in design is that templates and style guides are restrictive. On the contrary, they open the door for more creative solutions. Just like in web design, style guides, style sheets, and templates create consistency and allow for global changes without hassle. Instead of regarding style guides and templates as rules, think of them as the framework holding up the design for each page.

2. Audience First
It’s really that simple. The reader profile should inform your approach to the material. Designing something you like is important, but are you the target audience? Ask yourself, “Does this service the reader?�

3. Diligently Seek Out Inspiration
Working within the same style issue after issue can quickly zap the creative energy right out of you, and unfortunately this will most likely show in your work. Something should surprise the reader every time they turn the page, and achieving that is your responsibility. When you’re feeling uninspired — and you will, eventually — go to a newsstand and flip through other publications, stroll through an art gallery, or simply take a walk. Design is all around you so keep your eyes peeled and refresh your creativity. Many designers keep folders or boxes full of inspiration they’ve collected (such as tear sheets from other publications, art work, postcards, photographs, greeting cards, patterns, fabrics, websites, etc.) near their workspace.

4. Cover Planning
Covers can be the most sensitive and time-consuming part of a magazine issue. Each cover is obliged to achieve several goals. It must attract attention while sitting on a newsstand, adhere to print and postal code regulations, be intriguing while still falling into alignment with brand standards, and — most of all— stand up to the scrutiny of the design and editorial team. Brainstorm, plan ahead, and have a backup plan … or three.

Example Magazine Covers

5. Editors Are Your Friends
Magazine staffs often operate with a strict delineation between editorial staff and design staff. However, stronger ideas and solutions emerge when these departments work together early and often. As the designer, familiarize yourself with articles coming down the pipe. You may be able to offer an outside perspective or new approach. Equally, be open to editorial suggestions and help build on them. After all, this is a team project.

6. Typography and Points of Entry
When talking about mass amounts of text, as is the case with most magazine articles, the way in which text is treated and formatted is paramount. As a designer, you have the power to form the way in which the reader is presented with information. With that in mind, text-heavy pages take extra care as you must provide easy points of entry for the reader that lead them through the page. As you see in the example below, a page with no imagery can still be appealing and attention grabbing with the use of grids, headlines, subheads, drop caps and pull quotes. As with many things in design, hierarchy is key.

Example of Magazine Typography

7. No Budget? No Problem.
Budgets are being slashed around the world and publishing is taking its fair share. Fortunately, there are several inexpensive stock-art websites and photo-sharing sites such as flikr.com that can help out in a pinch. If illustration is a better match for the feature at hand, foster good working relationships with a small pool of illustrators. Illustrators are much more willing to negotiate if you’re a regular customer and can provide steady work. And when all else fails, create what you need. Choose a visual theme appropriate to the article and bask in the freedom. This is when design truly proves its value.

8. Design is in the Details
Take the time to check over the details of each page. Finishing touches are the difference between a professional end product and an amateur one. Clean up and double-check the file for rule alignment, overlapping text and image boxes, unresolved text spacing and breaks, and color matching (e.g., make sure that the same black is used throughout the whole issue).

9. Get to Know Your Printer
The physical production of each issue is a topic in and of itself, but there are a couple pitfalls that can be avoided by simply communicating with your printer. One of the biggest oversights when designing the interior of a magazine is failing to account for the spine. Depending on the size of your magazine and how it is bound, any element that crosses the gutter may lose necessary information such as text on a sign or facial features. Your printer can help you determine the amount of overlap necessary. Also, ask the printer for output specifications to assure that the high-resolution files you provide are compatible with its system. This saves everyone time and saves you extra processing costs.

10. The Big Picture
Designing a magazine is just as much about balance and organization as it is about the text and images on each page. From ad placement to the aesthetic of each feature, designing a magazine requires both a close eye to detail and, conversely, a healthy distance for perspective. The best magazine designers consider each article individually, how those articles fit into a particular magazine issue as a whole, and then how that issue fits into the larger publication set. The end result should showcase your cohesiveness, consistency, and creativity.

The post The Top 10 Secrets to Designing a Magazine appeared first on Design Reviver.


Set Up An Ubuntu Local Development Machine For Ruby On Rails

Advertisement in Set Up An Ubuntu Local Development Machine For Ruby On Rails
 in Set Up An Ubuntu Local Development Machine For Ruby On Rails  in Set Up An Ubuntu Local Development Machine For Ruby On Rails  in Set Up An Ubuntu Local Development Machine For Ruby On Rails

So, you want to develop Ruby on Rails applications? While loads of (introductory) tutorials are available for developing Ruby on Rails applications, there seems to be some uncertainty about setting up a lean and up-to-date local development environment.

This tutorial will guide you through the steps of setting up an Ubuntu local development machine for Ruby on Rails. Part 2 of this tutorial, which will be published here later, will help you through the steps to set up an Ubuntu VPS. For now, knowing that VPS stands for virtual private server is sufficient. It will be able to host your newly developed Ruby on Rails applications. But let’s focus on the local development machine first.

Bf Frontpage in Set Up An Ubuntu Local Development Machine For Ruby On Rails

Ruby On Rails? Ubuntu?

What are Ruby on Rails and Ubuntu? In short, Ruby on Rails is a Web development framework that lets you create Web applications using the Ruby programming language. As the official website states, “Ruby on Rails is an open-source Web framework that’s optimized for programmer happiness and sustainable productivity. It lets you write beautiful code by favoring convention over configuration.�

Ubuntu, meanwhile, is a “Debian-derived Linux distribution that focuses on usability.� It has been the most popular Linux distribution for the last couple of years. And even better, both Ruby on Rails and Ubuntu are open source and, therefore, completely free to use.

Bf Ubuntu-300x79 in Set Up An Ubuntu Local Development Machine For Ruby On Rails

A Quick Overview

In this tutorial, we’ll install Ruby and RubyGems using the Ruby Version Manager (RVM) script. And we’ll install Rails and Capistrano in turn using RubyGems. The machine will also feature version control, provided by Git and a PostgreSQL database. A fresh installation of Ubuntu and a working Internet connection are assumed, but these steps should work on most (Debian- and Ubuntu-based) Linux distributions.

At the time of writing, the latest versions are Ubuntu 10.10, Ruby 1.9.2 and Rails 3.0.7. This tutorial was also tested on Ubuntu 10.04 and the upcoming Ubuntu 11.04 release.

During this tutorial, we will make extensive use of the Linux command line. Therefore, I have added a small glossary at the end of this article describing the relevant Linux commands.

Getting Up To Date

First, let’s get up to date. Log into your machine as a user with administrative (or sudo) rights, and open a terminal window. The commands rendered below need to be entered in this terminal window. The dollar sign ($) is your command prompt, and the rest is as simple as typing the command and hitting “Enter.�

The first three commands will then update the package lists, upgrade currently installed packages, and install new packages and delete obsolete packages. This will give you a machine that is fully up to date. The final command will reboot the machine, which is good practice after updating a large number of packages.

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get dist-upgrade
$ sudo reboot

Prepare Your Machine For RVM

After the machine has rebooted, log back in and open a terminal window. The RVM script needs some packages in order to be installed, namely Curl and Git. Curl is a tool to transfer data using a range of protocols (such as HTTP and FTP). And “Git is a free and open-source distributed version control system, designed to handle everything from small to very large projects with speed and efficiency.� Git is the choice for version control among most Ruby on Rails developers.

$ sudo apt-get install curl
$ sudo apt-get install git-core

Bf Git in Set Up An Ubuntu Local Development Machine For Ruby On Rails

Configure Git

Git will be used by the RVM script, and we’ll be using it in part 2 of this tutorial. So, after installing the packages, let’s take a little time to configure it. Configuring Git is easy: just provide a user name and email address.

$ git config --global user.name "Your Name"
$ git config --global user.email your-email@address.com

For example:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@mail.com

Install RVM

Now we can install RVM. RVM stands for Ruby version manager and “is a command-line tool that allows you to easily install, manage and work with multiple Ruby environments, from interpreters to sets of Gems.� The following command takes care of the installation of the script. RVM will get installed in the home directory of the currently logged-in user.

$ bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

Bf Rvm in Set Up An Ubuntu Local Development Machine For Ruby On Rails

Navigate to the home directory, and edit the user bash profile. This ensures that the RVM script gets loaded every time the corresponding user logs in. To edit the bash profile, we’ll use Nano. Nano is a simple command-line text editor, and we will use it again in this tutorial.

$ cd
$ nano .bashrc

Add the following line to the end of the user bash profile. After you have made the changes, save the file by pressing CTRL + O, and exit Nano by pressing CTRL + X. If you ever want to exit Nano without saving changes, hit CTRL + X and then N.

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"

Manually load the script into the current shell session with the following command or open a new terminal window. This way, the rvm command will be made available.

$ source .bashrc

You can verify whether the RVM script is working by entering the following command:

$ type rvm | head -1

If everything is set up correctly, the shell should return that rvm is a function. If it doesn’t, go over to the RVM website and look under “Troubleshooting your install� to see what you can do to make it work.

Prepare Your Machine For Ruby And RubyGems

RVM comes with a handy command to view the dependencies that are needed to compile and install Ruby and RubyGems from source.

$ rvm notes

See the dependencies listed under the regular version of Ruby, and install these. Some packages might already be installed.

$ sudo apt-get install build-essential bison openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev

Install Ruby And RubyGems Using RVM

First, we have Ruby, “a dynamic, open-source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.�

Then we have RubyGems. This is “the premier Ruby packaging system. It provides a standard format for distributing Ruby programs and libraries, an easy-to-use tool for managing the installation of Gem packages, a Gem server utility for serving Gems from any machine where RubyGems is installed, and a standard way of publishing Gem packages.�

Bf Ruby in Set Up An Ubuntu Local Development Machine For Ruby On Rails

Like the RVM command described above, there is also a command to see what versions of Ruby are available for installation using RVM. Have a look at the available Ruby versions using this command:

$ rvm list known

Install a regular version of Ruby. Because Ruby gets compiled from source, this step might take a while.

$ rvm install 1.9.2

Start using the installed Ruby, and set this version as a default.

$ rvm --default use 1.9.2

Check the Ruby and RubyGems versions to see whether they have been properly installed.

$ ruby -v
$ gem -v

If necessary, manually updating RubyGems and the Gems is possible.

$ gem update --system
$ gem update

Install Rails Using RubyGems

Rails Gem itself is all that’s left for Ruby to be put on Rails. Installing this is one of the easiest parts of this tutorial. It is installed using RubyGems, invoked by the gem command. When the installation finishes, check the Rails version to see whether Rails has been properly installed.

$ gem install rails
$ rails -v

Bf Rails-252x300 in Set Up An Ubuntu Local Development Machine For Ruby On Rails

Install Capistrano Using RubyGems

Capistrano is “an open-source tool for running scripts on multiple servers. Its main use is deploying Web applications. It automates the process of making a new version of an application available on one or more Web servers, including supporting tasks such as changing databases.� You can install Capistrano using RubyGems. Check the Capistrano version to see whether it has been properly installed.

$ gem install capistrano
$ cap -V

Install PostgreSQL

PostgreSQL is “a sophisticated object-relational DBMS, supporting almost all SQL constructs, including subselects, transactions, and user-defined types and functions.� Install PostgreSQL together with a dependency. This dependency is needed to install the pg Gem later on, which is responsible for the connection between PostgreSQL and Ruby on Rails.

$ sudo apt-get install postgresql libpq-dev

Bf Postgresql in Set Up An Ubuntu Local Development Machine For Ruby On Rails

Configure PostgreSQL

When the packages have been installed, move on to configuring PostgreSQL by securing pSQL. pSQL is the PostgreSQL interactive terminal, and it is used for administrative database tasks.

By default pSQL does not require a password for you to log in. We’ll change this by editing the authentication method and then reloading the PostgreSQL configuration. But first, assign a password to super-user postgres. Log into pSQL, assign a safe password to postgres, and then log out of pSQL.

$ sudo -u postgres psql
# \password postgres
# \q

Now modify the authentication configuration by changing ident to md5. This ensures that a password is needed to log into pSQL and that the password is encrypted. The two lines that need to be edited can be found near the end of the configuration file. After that, reload the changed configuration into PostgreSQL.

$ sudo nano /etc/postgresql/8.4/main/pg_hba.conf
$ sudo /etc/init.d/postgresql reload

Most other PostgreSQL settings are stored in another configuration file. These settings can also be optimized, but that is beyond the scope of this tutorial. Keep in mind that a reload of the PostgreSQL configuration is required in order for changes to become active.

$ sudo nano /etc/postgresql/8.4/main/postgresql.conf

The installation of the local development machine is now done.

Testing The Set-Up

To make sure everything works, let’s develop a really small application and see a bit of Ruby on Rails in action. This process covers the following steps:

  • Create a database user for the test application,
  • Create a database for the test application,
  • Create a test application using PostgreSQL as the database,
  • Install the necessary Gems for the test application,
  • Configure the database connections for the test application,
  • Generate a simple scaffold for the test application,
  • Migrate the results of the scaffold to the test application database,
  • Start the built-in server,
  • Check the test application in a Web browser,
  • Stop the built-in server.

Once we have verified that everything works, we go through the following steps:

  • Delete the database for the test application,
  • Delete the database user for the test application,
  • Remove the test application.

All of these steps should be performed on the local development machine. The conventions used to test the VPS are as follows (the database user name and database name derive from the name of the application):

Box 1.1

Name of application: test_app

Name of database user: test_app

Password of database user: apple

Name of database: test_app_development

First, create a database user for the test application using the createuser command. We are using postgres as the admin (or super-user) for PostgreSQL. The P flag allows us to provide a password. The > sign stands for the questions that will be prompted.

$ sudo -u postgres createuser -P
> Enter name of role to add: test_app
> Enter password for new role: apple
> Enter it again: apple
> Shall the new role be a superuser? (y/n) n
> Shall the new role be allowed to create databases? (y/n) n
> Shall the new role be allowed to create more new roles? (y/n) n
> Password: your-postgres-user-password

Then, create a database for the test application that is owned by the test application user. While we could use Rake to create a database, we will use PostgreSQL, so that we learn some basic PostgreSQL administration. Create a new database by invoking the createdb command in conjunction with the O flag, the database user name and the new database name itself. The addition of development at the end makes it the default database name. Here, you will be prompted for the PostgreSQL super-user password again.

$ sudo -u postgres createdb -O test_app test_app_development
> Password: your-postgres-user-password

Now that the database has been set up, it is time to create the actual Ruby on Rails application. Navigate to your home directory, and create a new Rails application, named test_app, using PostgreSQL as the database back end. The d flag allows us to specify the preferred database software.

$ cd
$ rails new test_app -d postgresql

Go into the Rails application directory, and install the necessary Gems using Bundler. Bundler takes care of “an application’s dependencies through its entire life across many machines systematically and repeatably,� and it “works out of the box with Rails 3.�

$ cd test_app
$ bundle install

Use Nano to edit the database configuration file by adding apple as a password under the development database configuration. Because we have followed convention, described in Box 1.1 above, the database user name and database name have already been taken care of.

$ nano config/database.yml

Now generate a basic scaffold. This will create a User model and a users controller. The inputs will consist of a name and an email address, which are both strings in the PostgreSQL database.

$ rails generate scaffold User name:string email:string

Use Rake to migrate the scaffold to the development database. Rake is an acronym for Ruby Make. It is a “simple Ruby build program with capabilities similar to Make,� which allows you to create and migrate databases.

$ rake db:migrate

By now, it is time to check the (working) application in a Web browser. Start the built-in server, and use a Web browser to navigate to http://localhost:3000/. In particular, look at the application’s environment, and then look at http://localhost:3000/users. Create, edit, view and delete some users.

$ rails server

When everything appears to be working correctly, you can stop the built-in server.

$ press CTRL+C

If everything has worked, then the test application database and test application database user can be removed. The dropdb command removes a PostgreSQL database.

$ sudo -u postgres dropdb test_app_development
> Password: your-postgres-user-password

The dropuser command removes a PostgreSQL user.

$ sudo -u postgres dropuser
> Enter name of role to drop: test_app
> Password: your-postgres-user-password

Finally, navigate to your home directory, and recursively remove the test application. This leaves you with a fresh local development machine, ready for developing Ruby on Rails applications.

$ cd
$ rm -r test_app

In part 2 of this tutorial, which will be published here later, we will help you through the steps necessary to set up an Ubuntu VPS that is capable of hosting (multiple) Ruby on Rails applications.

Linux Command Line Glossary

The relevant Linux commands for this tutorial are listed below in alphabetical order. A Linux command usually takes the form of command -option(s) argument(s). For example, rm -r test_app. For a more detailed description, use the manual pages, which can be accessed using man [command].

  • sudo [command]Used to execute a command as an administrative user.
  • apt-get dist-upgradeIn addition to performing the function of upgrade, this is used to intelligently handle dependencies.
  • apt-get install [package]Used to install (or upgrade) packages.
  • apt-get updateUsed to resynchronize the package index files from their sources.
  • apt-get upgradeUsed to install the newest versions of all packages currently installed.
  • bash < <( curl [location] )A combination of commands for obtaining and executing a script (from the Internet).
  • cd [location]Used to change the current working directory. Without an argument, it goes to the user’s home directory.
  • nano [file]Used to edit configuration files.
  • rebootUsed to reboot the system.
  • rm -r [directory]Used to remove a directory (recursively).
  • source [script]Used to force bash to read a specified script.
  • type [command]Used to display the kind of command that the shell will execute.

References

Further Learning

(al)


© David Boot for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: ,


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress