My First Design to Code

That title almost reads like the websites we’re creating, like some sort of building, must met some specific code, as in a set of mandatory rules that must be met and adhered to in order to get to have people live in whatever we wind up with. Looking at the quality of most of the web, we know that those kinds of mandatory standards don’t apply to what you’re allowed to unleash on the web although they should.

But good web design, like good buildings, require a plan and this assignment had us code a web page based on a detailed mockup, that is, a plan.  Designed to simulate what I expect would be required of us working as web developers in the “real” work world,  we had to write the code to render the static graphic representation we were given into an interactive webpage. In effect, we went from design to code.

Although I wish otherwise, I’m not a graphic designer. Don’t have the skills, don’t have the knowledge of the programs they use. So it was an awkward and frustrating start to the assignment trying to figure out how to find the information I needed from the mockup in order to get my web page to render exactly what I was given.

At one point, I was struggling to try to get my fonts to render like they appeared in the mock-up in Adobe Illustrator until my instructor kindly pointed out that I hadn’t loaded the fonts we were given into the font book and so Ai was replacing them with a different font. Oh…I thought we had been given the font files to generate the stylesheets to include in the source code for our page. Oops! That bit of information also explained why the headings and text all had a pink background to them.  I thought it was an odd element to include in the design.

So, I regrouped and started again. In answering a set of questions we were given as part of the assignment, I found them to be a very helpful, systematic way to extract all the information I needed in order to write exact and effective code. And, when I finished, it was oddly satisfying to see the web page render in the browser just like it was designed to look. Okay, the responsive version may be a wee bit buggy, but the desktop site is a vision! And it’s someone else’s vision. It feels good to know that given a design, I can code it.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s