It was sometime in late 2006 that I pulled up in my bright orange Volkswagen beetle, probably wearing blue hair extensions and stripy socks, and first stepped into the converted barn that was the then-office of Glasses Direct.
The following five years were an amazing experience for me, both professionally and personally, as I designed and developed things from emails, page layouts and flash banners to product catalogues, branding and leaflets in the shape of glasses (ok that was just once). I even got to attend a model photoshoot, wow it was tiring not sitting at a desk all day.. ;) From web design to print design to interface design and front end development, there were always problems to be solved and great people to work with and I had so much fun doing that.
I remember so many of our GD social gatherings, from our beginnings in Wiltshire (chips in the village pub, rainy barbecues in the garden), to relocating to London and discovering Thai food for the first time! Some of the people I worked with at Glasses Direct truly became like family to me. They took me on my first ever aeroplane trip, I saw Prague and Spain for the first time with them, I went to maybe my first music gig and nearly fainted XD.
In the past year they welcomed me into the Technology team with open arms, I discovered Git, Python, Django, and the command line, and I worked with wonderful people who always respected me and helped me out immensely. People have blogged about sexism in the tech industry but I have to say that being the only girl in our technology team was never an issue that even *existed* for me at Glasses Direct, and I couldn't have asked for better peers and friends.
It's been awesome seeing and being a part of the growth of Glasses Direct, and I'm really proud of where they are now. Five years later, and no longer with blue hair extensions (or sadly, a VW beetle), but with more experience, confidence, and good memories, it's time for me to say a fond farewell. Though I will miss them immensely I'm confident they will do even more awesome things in the future. It's been great being a part of that vision (insert eye pun here, chortle chortle).
Whilst the London life was a fun experience for a pandalion (and I did rather like the choice of food there), I am looking forward to finding more bamboo (or perhaps some more patches of green) in Summertown, Oxford, as I join the super awesome Incuna as a Front End Developer!
Phew, I really haven't been updating this blog as much as I'd like lately. Life gets busy I guess ;) One of the reasons I feel so busy is that recently I've been taking stock of just how much I have to learn as a Front End Developer.
"Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev" - Rebecca
This is so true, and was pretty much my workflow back when I started web design around 10 years ago. A lot has changed since then and I think there's an incredible amount of things to learn and master in terms of front end development. HTML and CSS certainly barely scratch the surface now. Especially as I've come back to front end development from a more design-focused role recently, I'm still catching up on everything that's important to know these days.
Learn all the other things
Being a fairly easily-overwhelmed person I do sometimes feel overwhelmed by all the things I want to master, and sometimes I feel like in the giant pool of web development, my knowledge is just the size of a tiny pond. But then I remember how much I've learned and improved in my years writing HTML and CSS, and I also remember we're all on the scale somewhere of what we know and what we can do. The important thing is understanding where the gaps in your knowledge lie, so you can get on the path to filling them, I think :)
What are you learning lately? Do you ever feel left behind when it comes to keeping up with everything going on in the web world? It would be good to hear from you!
Something I've been wanting to write about for a while now, is the separation of design and development in web design, common views and workflows to do with that separation, and my own personal experiences of choosing between design and development in my career.
What is "design"?
Design is a difficult word to talk about, because it has so many very slightly different definitions. Dictionary.com's definitions include things like:
to intend for a definite purpose
to form or conceive in the mind; contrive; plan
an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a machine to be executed or constructed.
to plan and fashion artistically or skillfully.
When it comes to the web, the word design can certainly mean many things. We have graphic designers, ux designers, interface designers. We design ideas, wireframes, visuals, but we also design architecture, frameworks, systems. In my opinion, no matter what part of the web process we are doing - we're generally designing or creating solutions to problems.
To me, the term Web Design encapsulates this problem solving, and any to all of the above processes. When I started learning html and making my first webpages back in Notepad, some 10 years ago, I didn't question whether I should only design how the site might look, or only write html - both Photoshop and a text editor/design and mark-up, were the tools I needed to solve the problem of creating “a website”.
Designing with CSS
For my first “proper” job, I worked for a small web design studio, and there were just a few of us, so I guess we didn't really have the option or need to split the process into many different roles. On the visual side of things, I wasn't bad at making things that looked pretty good, not through any graphic design training as such but more from a kind of intuition or eye for knowing what didn't look good and therefore, what looked better. I was just starting to learn CSS at the time to style my webpages, and things like using pure CSS navigation were beginning to really get used in the web world. So whilst I might design how the menu would look in Photoshop, I would equally consider how that would be created with CSS.
CSS is one of the main reasons I think design and development have a naturally close relationship, even when they aren't done by the same person. And certainly, the aim of my blog post is not to say I think design and development should always be done by the same person. From my experience of moving to bigger organisations I can understand that it often makes more sense to have specialists, people focusing on design and others focusing on building those designs.
My main point is... Web design is NOT static design.
It's a common workflow at many organisations, that the designer will create the mockup in Photoshop, the client will sign it off, and then the developer will build it. And we may have the steps of a UX designer/wireframer in here too depending on the particular team of that organisation.
I've been a part of this process - at separate times - as a designer, and as a front end developer. It's been incredibly interesting to be part of that from both angles, but there are still a few issues I sometimes see with the process.
Ultimately, the canvas is the browser
When it comes to web design, we are designing for the browser, and I think that seeing the browser as the last step in that process is flawed.
Let's say we need a webpage with a form on it. This has various fields and various states of validation. Maybe some parts of the form change depending on what you select. We could design this whole thing in Photoshop. Maybe we have slightly different pages with slightly different forms. Do we want to design mockups for all these states? I've been there and I would say that laying out a form in Photoshop is NOT fun especially when you want to do something like, change the width of the fields to see how that looks. I think this is where it might be handy to use Photoshop to design say, the overall style of the form fields, but use CSS in the browser to lay out the page and then.. see how it looks in the browser.
Even when it comes to something as simple as text - Photoshop isn't really a great example of how text will look in the browser. It's great for designing where abouts text may go etc, but sometimes you may use things such as the faux italicisng or Photoshop settings of text spacing - but these are never going to look exactly the same as the browser. Trying to make things very “exact” in Photoshop, I feel is not a worthwhile endeavour.
Web design is changing - maybe our workflow should
Responsive web design is something I haven't done much of myself yet, but am learning more about everyday and the main reasoning behind it is - with the number of different ways people are viewing our sites these days - mobile, ipad, etc, we really can't keep thinking of our canvas as a 1024 x 768 (or whatever it is these days ;) Photoshop document.
Our canvas should be flexible - we should plan and tweak both design and code for breakpoints depending on resolution. Now more than ever, web design shouldn't be static. Mocking up, with Photoshop how a site might look in six different resolutions, has surely got to be a waste of time.
As I said earlier, I'm not suggesting design and development should be one and the same job or necessarily done by the same person. But I think there should be a real change in a lot of the old workflows we are used to.
Understand the medium you're designing for, and know it well
I'm sure a lot of designers do, but in my opinion, if you're designing for the web, you need to understand the capabilities and limitations of HTML and CSS even if you don't write them. Above all you need to understand the flexibility and dynamism of the web.
Designer and developers need to work closely and talk!
I think a lot more back and forth, especially during the design process (and not just "after a sign off") is important, so we can discuss things like CSS effects, what might happen if this button is hovered over, or this menu item is selected, etc. Visual design and code is closer than ever these days, so let's discuss them together.
Don't get caught up on pixels and exact measurements
Going back to the responsive design thing, people are viewing sites in so many different ways now, we should not design for the number of pixels we expect them to see, but for the experience we are giving them. I'd like to point out here that as much as I feel designers should have a good understanding of code, I think front-end developers should know/learn some design principles, to help them understand how and why a designer intended something to be that way. Then, they shouldn't need to ask for exact pixel measurements.
Prototype with HTML and CSS
I see this as something that can be done between the design and development stage, and by either person. Perhaps to see how the design will look in the browser or what happens when you fill in a form or click some buttons. I think HTML prototypes can speed up the design and development process, and are also a great (and more accurate) thing to show clients to give them an idea of how their site will look in the medium it's going to end up in.
And one day, my ultimate plan is to be amazing at both! Somebody told me once they thought it wasn't possible to be a great designer and a great coder, but I think it is - you just have to work extra hard. ;)
Last week at Glasses Direct, we launched a new homepage! It's the biggest design change we've done to the site in years and so it's pretty exciting!
The main new thing about our homepage, apart from the stripped back simplicity and new colours, is the rotating promotions banner. These are pretty common on websites now, but it's the first time we've had a non Flash-based version, and one that looks so good!
Our development team worked on the code for the rotating banner, and I had the fun task of implementing the code into a design worked on by our in-house designer. More importantly, he and I worked closely on deciding how the banner would work in order to make it flexible, consistent, easily updatable and of course - always look good :) I think it's great (and important) for designers and developers to work together in this way, not just after a design is done, but before so and during to ensure that form meets functionality.
There have been a few problems with the way we've done promotional banners in the past. We change banners often, and sometimes need to be able to change just a small bit of the banner such as a date or word. In the past this would involve saving an entire new image in Photoshop, uploading it to our CMS and changing the image link over. Booring! The other problem with our image banners in the past is we tended to use a lot of different font styles and colours and there was always quite a lot going on in them. They looked good but not as streamlined.
So the designer and I worked on creating a banner that used Webfonts to have real text that looked good but was updatable, and created a consistent style for all banners. There's also the option to use snippets of inline CSS in the CMS to change the text colour if we need to for a certain banner - and best of all, can be done fairly easily by a non technical member of staff. I'm sure someone wants to tell me "inline css is baad!" but this seems like one of the occasions when it does make sense.
As well as the webfonts, there's a nice strip across the bottom using css3 opacity, and circle navigation created with css3 border-radius. Even though I've been using these kind of things for a while now, it's still nice to appreciate how much we can do without images on the web these days :)