background preloader

Web Design and Development

Facebook Twitter

My (Simple) Workflow To Design And Develop A Portfolio Website. Please notice that this article is targeted at newcomers to the industry rather than seasoned designers and developers.

My (Simple) Workflow To Design And Develop A Portfolio Website

The point of the article is to provide a general guide to building meaningful, future-friendly websites today, including strategies, techniques and tools that most Web designers are used to today. — Ed. A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web.

Yes, I’m talking about creating your own portfolio website. I recently redesigned my own portfolio website1. 2A look behind the scenes of my design and development workflow I hope this helps and inspires other designers out there who are looking to create their own unique portfolio website. Plan The Project Link Define Your Brief Link. Introduction-to-inkscape?WT. Tutorials Archives. GoodUI. Webdesignrepo - a compact list of helpful webdesign links. Principles - web_design. Opera Web Standards Curriculum. 6 Phases of the Web Site Design and Development Process. When putting together the main business portion of this site, I wrote an article that outlines the Six Phases of the Web Site Design & Development Process.

6 Phases of the Web Site Design and Development Process

As an integral part of my own company web site, the article is slanted to how I personally help clients through the process of creating their own site. Here on the blog, however, I wanted to create a more generalized post. Same basic idea, however this version can be utilized by anyone, regardless of who they hire to design their web site. I hope this helps when considering building your own site! The Web Site Design and Development Process There are numerous steps in the web site design and development process.

The exact process will vary slightly from designer to designer, but the basics are the same. Information GatheringPlanningDesignDevelopmentTesting and DeliveryMaintenance Phase One: Information Gathering The first step in designing a successful web site is to gather information. Certain things to consider are: Phase Two: Planning. Step 1 - Responsive Web Design - Step by Step Example. Step 1 - Responsive Web Design - Step by Step Example << Index Headers - Step 1.1 This is what we are going to create in this step by step tutorial.

Step 1 - Responsive Web Design - Step by Step Example

Click on the image to visit the example website. Try restoring the browser window to see what happens, only the header of the webpage will automatically respond to the size of your browser window. In Step 1.1, CSS3 style is applied to the "nav" bar. style will be applied to the links in the later steps. The style is provided below with HTML comment explanation. Headers - Step 1.2 In Step 1.2, CSS3 style is applied to the links inside nav bar. Header Step is now complete. Step 2 >> Design for Programmers. May 25, 2016 Design is not as elusive as people think it is.

Design for Programmers

It is a learnable skill. Design has rules that anyone can apply to their work. If you are an engineer working on an application or a business guy putting together a slide deck, there are a few tricks you can learn. I will show how to apply three base principles of design: grids, typography and color theory. Design Primer There are three components to designing anything: Esthetics Empathy Means of production Disclaimer: I am a product designer, so I will use product design as a reference point, but you can use the same principles for anything else. Esthetics is fueled by traditional principles of visual design. Empathy is understanding of who you are designing for.

Users' goals, basics of goal-oriented web design. Web Design Process - A Step-by-Step Guide to Designing Websites. Here’s my breakdown of the ideal web design process.

Web Design Process - A Step-by-Step Guide to Designing Websites

I know a lot of people are going to read this and shout “That’s not the best way to go about designing web sites!” All I can say is: this is the essence of the process that works best for me. I offer it in the hope that maybe bits of it will work for you too. I’ve been creating web sites for 17 years now, and I’ve got much more successful at it over that time. And I’ve come into contact with lots of very clever and complex software development processes, many of which don’t produce very good results. This is the typical process I use today on most of the sites I do (of all sizes). Overview Know what you’re doingKnow what the site needs to doKnow what the site’s visitors wantGet a good picture of the personality and style of the web siteSketch out highly successful scenariosOrganise views into a site mapSketch the essential features & lookMap your visitors’ attentionArrange the visual elements to work together.