Category: Programming Page 18 of 27

Do you have a process for developing a website? Buildings, cars and websites all require steps to build a website. Without a systematic process, you wouldn’t be able to consistently build houses, cars or websites. At WordCamp Seattle 2014, Morten Rand-Hendriksen, gave a talk on Web Design is a Process. He focused on first 3 of a 5 part process: Prepare, Plan and Build.

Here are my notes from the presentation:

Prepare

• Set up version control; use Git, Mercurial or Subversion
• Establish code and style guides: see @mdo’s Code Guide and Google’s Web Fundamentals

Content Strategy

• Ask questions about the content: Why does it matter? Why should it be on the website? Who is the target audience?
• Complete a website content audit. Create a list to know where all of the content is.
• Create a sitemap of your website
• Create a template map to match the WordPress hierarchy. Identify the templates that you are going to need to use.
• Develop a wireframe for mobile only without any design elements. Use paper to create your wireframes.
• Ask real people if your design works

Build the Site

• Build the site with a blank starter theme and add the content
• Add accessibility in before adding design elements
• Add design elements in the browser. Use modular or atom design.

Summary

Website development is constantly changing. Morten provides different ideas on how to design a website. He suggested matching the WordPress templates with templates that you are going to use. This will save you time when you build your theme. Morten’s suggestions can help you to speed up the design and development time, so you can finish project faster and get paid sooner.

What changes are you going to make to your design process?

Are you a developer who wants better looking designs? Have a great idea but don’t think you can design? Design is more than making things look pretty. Your idea should work well first. Design is about problem solving and asking the right questions.

“In science, the hardest part isn’t finding the right answer, but finding the right question.” #samewithdesign

— Luke Wroblewski (@lukew) May 20, 2014

Use these tips for bootstrapping your designs. You can make your designs more than just pretty.

Limit your options

When you can choose any color, font, graphic or photo that you like, it can be overwhelming. You ended up with designs that looking so distracting and gaudy that no one will use it. To create better looking designs, you need to limit your options. By limiting the number of colors, fonts and graphics, you can focus on how the website works instead of looks. To help you limit your options, Robert Williams describes a 3 Step Hack for Startups Bootstrapping Their Design.

Design is about function

What is a good design? Most people define good design as something that looks pretty. Design isn’t about being pretty. It is about how something works. When choosing between working well and looking pretty, you should choose working well. If you want to create better designs, you need to remember that design is communication, you need to prioritize and organize your website and maximize (leave the right stuff out).

Keep your user’s best interests in mind

When you design for a client or your boss, it can be hard to remember who you are actually creating a website for. You need to remember that people will be using the website, not only the client. How do you design with your user’s best interest in mind? By following a set of design principles that help guide your creativity and problem-solving, but don’t limit it. The Android User Experience Team developed these design principles to help them focus on their user’s best interests. They divided these principles into three goals: Enchant Me, Simplify My Life and Make Me Amazing.

As a developer, you want to build things that help people get things done and make their lives better. When you create a new design, remember to limit your options, design is about function and keep your users in mind. If you apply these tips, you can make something that not only works well but looks good doing it.

What kind of tips do you use make your designs be more than pretty?

Web developers use a variety of tools to build web sites and web applications. A typical project may require you to use a code editor, photo editor, online code or font generator and more. I have complied a list of 7 web development tools to help you solve specific problems.

Free Photo Archive

The current advice is to be choosy about when you use stock photos. If you choose to use stock photos and have a limited budget, use a free photo archive like Morgue File. With a photo editor like Photoshop, you can customize the photo to fit with your website.

Convert Pixels to Em

Not sure how to calculate the number of ems in pixels or vice versa. Use pxtoem to convert pixels to ems, points to pixels and even percentages. You can use the chart to find the answer you need or use the custom calculator.

Convert pixels to ems and more

Icon Fonts Generator

Fontello is an icon font generator. You can choose from available icon fonts like Font Awesome or create your own customize set of icons. Pick and choose the icons that your need to ensure a consistent look and feel on your website.

Generate icon fonts

Color

Picking a color palette for your website can be challenging. You may have any idea of some colors that you want to use. If you need inspiration, you can use a color palette tool like Adobe Kuler. Adobe Kuler allows you to create your own color palette or explore pre-made themes (color palettes).

When you work on a project, you may need to create a border or a gradient and you want to keep within the same color variation. 0to255 lets you pick a color and choose from the variations of that color. You can use it to simplify the process of choosing colors.

Font Generator

Need to choose fonts for your website? Awesome-fontstacks lets you mix and match your fonts. You use the wizard to walk you through selecting the fonts for your website. Once you have the fonts that you like, you can generate the CSS @fontface code. To use, download the fonts, save the fonts and CSS to your website.

Choose fonts for your website

Responsive Grid Generator

Grid layouts make designing your website easier. You may choose to build your own framework, use an existing grid framework or create one with a grid generator. Gridpak is a responsive grid generator. You tell it how many columns, the amount of column padding and gutter width. It generates the grid. You can view it right away to see how your choices would look. Once you like it, you can download the framework and apply it to your design.

With tools like these, you may speed up the process of building a website. Tools are to help make your work easier not harder. Not every project is the same. You need to select the tools that fit the job. This short lists gives you a few more tools to choose from.

What tools do you use when designing and developing your websites?

Related Article

Your own or a pre-built CSS Grid