I used to use my gut feeling and intuition to tell what’s good and what’s not, even for critiquing my own designs and work.

Not because I was careless. I genuinely believed I had been thorough. I had spent hours on it. I believed I had looked at it from every angle. It felt right and that ‘feeling’ was the problem.

Being close to your work is not the same as understanding it. And for a long time, I confused the two.

Skipping self-critique has real consequences. They just tend to show up at the worst possible moment. Work gets submitted with decisions that were never challenged. When a reviewer asks why something was done a certain way, the designer either can’t answer or scrambles to reconstruct a rationale they’ve already forgotten, or hasn’t ever considered.

Inconsistencies slip through. A spacing rule applied on one screen but ignored on the next. A hierarchy that made sense in isolation but breaks down across the flow. Trust erodes quietly. Not because the designer lacks skill, but because the work still carries the fingerprints of someone who was too close to it when they called it done.

Over time, the absence of self-critique doesn’t just affect the output. It limits how fast you grow. Without the habit of interrogating your own decisions, you stop building the vocabulary to explain your craft to yourself, your team, and the people you are designing for.

The real design self-critique failure mode isn’t laziness

Usually, designers do look at their work before submitting. That’s not where the gap is.

The gap is that they critique against nothing.

No ground. No principles. No framing. The review becomes: does this look right? Does this feel good? And because you made it, it almost always does. Your eye is already calibrated to what you built, not to what was actually needed.

This is especially common for middleweight designers. Not because we are less capable, but because nobody explicitly teaches this in our culture, especially if you’re self thaught. You learn to execute. You learn to iterate. But the practice of interrogating your own decisions before anyone else does is rarely discussed, rarely modelled, and in many design teams here in Malaysia, rarely even practised.

The word ‘critique’, already carries weight in Malaysian context. It sounds like conflict. It sounds like something that happens to your work, not something you do for it. That mindset has to change.

Design self-critique needs a ground

Here is what I have learned: self-critique is not a final step. It is only possible if you have set the foundation upfront.

Before you open Figma, before you write the first word, before you decide on a layout, ask yourself: what user outcome am I solving for? What principles am I carrying through this work? What does good actually look like here?

That is your ground. Everything you build gets measured against it, not against whether it looks polished.

When I started doing this, the critique became less subjective and more structured. I could ask real questions. Why did I use rows of three in this card list? Why this colour here? Why this hierarchy? If I had a reason and a grounded reason tied to the framing, the decision holds. If I could not answer, that was the critique finding me first.

Not intuitive. Intentional.

Write your rationale down as you go

The second shift was documentation, not for handoff, not for the client, but for myself.

Every design is a sequence of decisions. And most designers make those decisions well in the moment, then let them disappear. The rationale lives in their head, and by the time a reviewer asks why, they have either forgotten or can only reconstruct it verbally on the spot.

Writing decisions down as you go changes this completely. Not everything. Just the ones that matter. Why you chose this approach over the alternative. What you were optimising for. What you deliberately left out.

When you include your thinking alongside the work and not just the visual, but the reasoning behind it, two things happen. First, you are forced to articulate what you actually believe, which sharpens the thinking. Second, when you come back to critique, you have something real to interrogate. Not just a screenshot, but a position, grounded against your foundational framing.

A reviewer asking why you made a decision should never catch you off guard. If it does, that is a signal that the critique was incomplete.”

And now with AI where you can augment the design assembly process, it is more and more critical to be conscious about the goal, principles and how to execute at every step along the way. This is what design work look like at Stampede, less executing and assembly, more strategic thinking and tactical planning.

Create distance before you do self-critique

The third thing, and the one most junior designers skip entirely: walking away before you review.

After a session of deep work, you are still the author. Your eye will fill in the gaps, smooth over the rough edges, and read what you intended, not what is actually there. You are too close to see clearly.

The fix is temporal distance. Close the laptop. Do something else. Come back in half an hour, or better, the next morning.

I have finished work in the evening and told myself I would do the self-critique first thing the following day and come back to find things I simply could not have seen the evening before. Not because I was tired. Because I had forgotten what I was trying to do, and that forgetting is exactly the point. Fresh eyes read the work the way a user would, not the way its creator would.

Seasoned designers can do this in real-time. They have developed the ability to zoom out mid-flow, switch modes, and critique in live. That is the goal. But for most of us especially Malaysian middleweights, the shortcut is physical and temporal separation. And it works.

The other thing worth naming: do not be married to what you built. Don’t be afraid to murder your darlings. This sounds obvious, but it is harder than it sounds. When you have spent hours on something, it’s only natural to defend it. You will subconsciously frame your review to protect the decisions you have already made. The only way past this is to approach the review with genuine openness. Treating your own work the way you would treat someone else’s.

Sharpen the eye by dissecting other people’s work

Self-critique gets easier the more you study good work.

Not to copy it. To understand it.

When you open an app, a website, a data visualisation, pause and ask why things are the way they are. What is the grid? Why this spacing? Why does this interaction feel smooth when a similar one elsewhere feels clunky? What is the overarching principles and the intent of the design? What is it trying to solve ultimately?

Most of us consume design passively. We notice when something looks nice. Few of us stop to deconstruct why it works and fewer still ask why it doesn’t, even when it looks fine on the surface.

The more you practise this on other people’s work, the more naturally you do it on your own. You start to notice the questions before a reviewer does. You start to ask, before anyone else: if someone looked at this with fresh eyes, what would they challenge?

That shift from creator to first critic, is what the practice is building toward. It’s building that muscle so it comes natural to you the more you mature as a designer.

Where this ends up

Eventually, none of this should feel like extra work. The framing, the documentation, the distance, the dissection. These should become so embedded in how you work that finishing and critiquing are the same act.

For designers who have been self-critiquing for over twenty years, that is already true. The critique is happening constantly, live, almost invisibly. It is in the DNA.

For the rest of us, we build toward it. We make the scaffold visible until it becomes instinct.

The measure, for now, is simple: before you ship, can you answer for every decision? Not defend it. Just answer for it.

If you can’t, you are not there yet.

The post Building the Eye: A Guide to Designer Self-Critique appeared first on Stampede: the strategic design & technology company.

(This is a continuation of my first post here.)

Building C-Lyrics

Previously I mentioned about my main assignment, which is building a lyrics database website from scratch I am going to call C-Lyrics.

You heard it right people. I shall be the project manager, the designer, the front end developer and the programmer. It was to be completed within 3 months, which is the duration of my internship.

C-Lyrics project is supposed to sharpen my skills of the subjects I had been taught at the university, where I learned the theory of programming and how to code. On top of that, it will also give me some experience on putting on the hats on many different roles at a web agency – project manager, designer, front end developer and programmer.

I had never created a native app for any platforms from scratch. Thinking about it now, I had no idea what I was up against. Tough work, but as always I am up for it.

Let the fun begins (actually terrified).

Project management & design

After discussing with Shaza on the precise requirements on building a lyrics database website, Zana helped me to set up a Basecamp project and walked me through project management workflow – so it is like a real client project. The pressure!

First challenge: design. I have to make use of my non-existent design skills to create a few templates based on the Bootstrap grid. Luckily, Dahlia was there to help. She held a Photoshop class for me every Monday where she would teach me how to use the tools and some design tips as well as giving me assignments. The classes definitely have helped a lot in helping me wireframe and design C-Lyrics.

During design and wireframe stage, apart from the Photoshop classes, Shaza and Dahlia had given me a lot of tips and examples from the client projects they have done before. This is to ensure that my work is at par with their work – if you remember from the first post, I mentioned that most of their work are all over the world! Another pressure.

It took me two weeks to complete both the designs and wireframes for all templates. Wireframes helped a lot for me to decide the elements on my website – buttons, navigations, photos, text and many more. Once the wireframes were approved, I moved on to design.

It was a bit harder than wireframing, because once I design, I have to think of how it will work when I code them later in Bootstrap grid. It took me a while to understand how to sync those, hence I was grateful to have my designs meticulously reviewed by both Shaza and Dahlia. On top of that, I did not only design for desktop, I also had to did the designs for mobile and tablet view since C-Lyrics is going to be responsive. Phew!

It was a definite relief after the designs were approved after a few rounds. Next!

Moving on to HTML/CSS

At the risk of sounding like a brag, HTML/CSS was quite easy for me because I had already been learning front-end development in university. I actually was ahead of the schedule!

On top of that, it was also because Sani, the front end developer, had been having HTML/CSS classes for me every Thursday. This gives a chance for me to review and revise my work with him while also learning some new tips on front-end. Zana also recommended me to do my own learning via Codecademy of which was really user-friendly and definitely had helped me a lot in finishing my assignment. Iwan and Sani had been incredibly helpful when I harassed them with questions about my project – thank you so much!

Since I finished my HTML/CSS part of the project ahead of time, Zana tweeted me this meme:

Programming

For programming, Shaiful had been holding PHP classes for me every Wednesday and had been offering such tremendous help in templating my website. The database and content for the lyrics website were stored in WordPress hence I got to learn WordPress too. In my opinion WordPress is pretty cool – it’s blog based, easy to learn and familiarise and I did not have to spend much time in organising my database using WordPress.

PHP, however, is a different story.

It was quite a struggle for me, since this was my first time using it. I had no idea how many times I had been harassing Shaiful to help me with PHP but fortunately, Shaiful being Shaiful, was always cool. Definitely was impressed at how amazing programmers are now, and hoping someday I will be as good as they are.

On being a Stampede alumni

Despite not being able to finish my lyrics website, I learned a lot while being an intern in Stampede. This is not only in terms of technical skills, but also in soft skills such as communication, teamwork, self-discipline, time management and many more.

I guess the most valuable thing I had ever learned in Stampede was how much they believed in me. Here I am, an intern, surrounded by an all-star team members – yet everyday they would spend countless hours helping me with my project. More so than gaining something from me, I gained a lot from my first working experience at Stampede.

I found the best team members, and most importantly, another family. Thank you for the wild, yet exciting ride Stampede. I’ m so lucky to be able to work alongside you guys.

On my last day at Stampede, one comment from Shaza stuck most, “Now that you are one of the girls in tech, go out into the world and time to kick arse! Also never hesitate to help others especially fellow girls in tech.”

And so shall I!

Do good Stampede, like you always do. Keep in touch!

The post My Internship Experience: Part 2 appeared first on Stampede: the strategic design & technology company.

I’m currently a student at Universiti Tenaga Nasional (UNITEN) pursuing my Diploma in Computer Science and I’d like to share my experience in my first month of being an intern at Stampede.

Serendipity is the coolest thing

I suppose it’s always this – when you are on the Internet, you tend to surf for hours, watch the most ridiculous Youtube videos and were sucked even further into the procrastination hole while working on your assignments. I came across one of those websites which caught my attention. Seeing that the website bears the mark “Website by Stampede”, I immediately did a bit of web stalking and came upon the company’s website, which is, just equally cool. I noted the company’s name somewhere in my Moleskine.

When the time came for internship, I decided to try my luck and applied at Stampede. I did not expect much though, because on first glimpse I saw that they are very professional and considering a student like me would probably be the least of their concern. Imagine my excitement when Shaza replied to my email and decided to arrange for an interview with the team. She mentioned that since I am very interested in programming, it is something that is very aligned what Stampede does and it would be nice to have someone like me onboard. When Shaza mentioned that Stampede has clients all over the world, I was even more excited to intern here. What would be even more rewarding than to be also exposed to such huge client base of various industries?

The night before the interview, I probably did not sleep at all. I prepared a script and rehearsed a hundred times.

During the interview, I was introduced by Shaza to Zana, the Project Manager (who is currently my supervisor), Shaiful, the Web Analyst and Developer and Syazwan, the Front End Developer. The interview surprisingly went very well, although I was nervous. Despite how often they teased each other mercilessly during my interview, of which I realised how close-knit Stampede is, I can also sense that they are very professional in what they do when they spoke so proudly of their projects and achievements.

Sani teaching me HTML/CSS on my second day at Stampede

What I know

Being a computer science student, I learned basic HTML/CSS, database, designing and programming which is included in my course syllabus. Internship enables me to apply these skills in real life, for example, building a website or creating a native app for any platforms.

When I think about it, there was a lot of, “What was I thinking?” So here I am to figure it out. Being at Stampede so far, going through daily classes with the team – Dahlia teaching me Photoshop, Shaiful teaching me programming and database and Sani teaching me HTML/CSS – I am ready to accept the challenge.

On working remotely

One advantage that I have from my other coursemates who are also doing internship at the moment is that having the opportunity to experience what it’s like to work remotely. Stampede does not have a physical office like other agencies. This comes across as surprise to many people because their professionalism and their closeness with each other seem to show that they work in an office physically for a long time together!

While working remotely, I learned to manage my own time better. While with everyone’s perception that with working remotely, everyone can be casual with their time, it is not so at Stampede. Everyone is proactive, very disciplined and work gets done – fast and thorough. There is never a dull moment in Stampede Skype channel.

What I will be building

I have, more or less, three months to build my own website. Hence another, “What was I thinking?”

I decided to build a lyrics database website called C-Lyrics. Everyone is able to search for lyrics, filter them according to certain criteria, as well as having registered users who could sign in and submit lyric entries.

This website is solely my responsibility – I am the project manager, the designer, the front end developer and the programmer. There were a lot of checklists and workflows to go through. It does sound really ambitious, but in doing so I will understand the magnitude of work any web agencies have to go through in order to create good products every day, hence appreciating them even more.

At the end of the project, this website will be deployed to a working domain, which means that it will be a fully-functional website! So excited.

The other internal projects which I am partially responsible to as well are to post to Curated and Constructs, which are Stampede’s mini blogs of design and code, respectively. While scouring for the content, I came upon many more interesting sites and resources, which proves that Internet is this one big universe of knowledge and that one has to be good at making use of it.

Shaza also lent me some of her favourite books on design, user experience, productivity and many others, of which I am also required to do a presentation on at the end of my internship.

Do, or do not. There is no try.

Right now, while typing this, I am also in the midst of wrecking my brain on how best to code my C-Lyrics website, of which designs I have completed and been signed off (yay!). Time is running out, there is less than 2 months to go, and failure is not an option! I should go back to work now.

So glad to talk to you, and see you in Part 2!

The post My Internship Experience: Part 1 appeared first on Stampede: the strategic design & technology company.

The new website is typeset in Arno Pro and Proxima Nova. It is made responsive with Bootstrap so go ahead and give it a try on your mobile devices. Everything else is crafted, designed and built lovingly by the team.

Taking the time to take things out

For those who know me as a designer, I am the worst possible client to myself. Ever. The new Stampede is four years in the making — something I’m rather embarrassed to admit. We worked on so many iterations only to feel that it’s never good enough. We put a lot in, then we took out a lot more. For every bit and pieces you see on the website, imagine 4 or 5 variations each that got taken out. It’s a moving target but I think we’re pretty close.

This gets personal because it has to embody how we see ourselves as a team. It gotta show the tiniest details and care put into every work. It gotta have soul.

Old and Gold

Working on this website, I realized something profound. We have so many clients who have been with us since we first started in 2006. In Internet speak, that’s ancient.

Back then, Dov and I never thought it would open up so much possibilities for us and the team to meet and engage with wonderful people and businesses from all over the world. We now have clients in four continents — not that we’re ruling out the other three of course, though logistics with Antartica can get tricky — and we’re increasingly involved in projects that are greater in scale, pose bigger design challenges and have the added benefit of changing the world. Companies like Globalish and Joota are not alone in wanting to make the world a little less reactive and a little more reflective.

Stampede clients, you guys are the best, truly. You keep us busy and then you went off telling your friends and colleagues about this bunch of people who can make websites. We hope we have presented your projects in the best light but do let us know if we missed anything or if we have stumbled over a few details. We did fine-comb the site and tried to make everything almost perfect, which is why it took us four long years to finally roll this out.

Curate and Construct

We used to bounce ideas off each other via email but then we thought “Come on, it’s 2014. Share the good things already!”

We started Curated a year ago, and recently extended similar concept with Constructs. You can now see the repository of design and development ideas flowing daily at Stampede.

We want Curated and Constructs to ultimately be the place where people who are interested in design and web can take small steps to learn new things, to be inspired. It’s our small way of giving back to the community.

StampedeZine

We have also began to send highly relevant ideas and web trends through our StampedeZine newsletter.

We even went to the extent of identifying different recipient groups and finding real content relevant to each group. If you have an e-commerce website, you will receive ideas and tips on how to engage users and get that conversion rate. If you’re running a social networking platform, we make sure you get a good dose of user experience and social engagement articles. The Zine was an idea I had during one of our creative burst sessions — read about it here.

We love that everybody has found the Zine useful and engaging that no one ever unsubscribed from it (or at least that’s what Mailchimp said). I hope the readership quality will remain ever useful to our subscribers. You can subscribe to the Zine here.

Do Good Things

We started the Stampede DoGood initiative in 2008 to help non-profit and foundations lift off their online awareness campaigns and fundraisings. It began with our local animal shelter here in Langkawi and has since extended to various non-profit organizations.

Recently, we helped launch campaigns and a new website for Foundations for Human Rights in Cuba. The team stayed up all night manning the campaign website during their Miami launch event, taking shifts in between to catch some sleep but never staying away too long. Talk about good vibes.

And So…

This is not the end of v3. We’re planning to add case studies, share our thought process, give this blog a responsive facelift and pen some helpful thoughts on how we do it all, remotely. For now I’m going to sign off and try to catch some sleep before anyone spots an embarrassing typo.

To the people who made this all possible — and I’m still refreshing my browser to see if it’s real — my biggest thanks to Dov, Zana, Shaiful, Iwan, Sani and Dahlia. It is my privilege to come to work everyday knowing I’m in the company of such amazing people.

It has been one unreal, terrific ride at Stampede. Here’s to more mighty things!

The post Mighty Things appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  I have been sketching since I was still in school. Back then, I usually sketched cartoon characters I watched on TV. I have been sketching and drawing since then.

In this burst, I took a picture of a wolf – mostly the face area. With the picture as my reference, I started tracing the wolf’s fur, line by line.

Line is the most basic element in art after dot. Using only lines, we can create almost anything. In the wolf’s case, the lines actually made it easier for me as I could imitate the direction of the fur. As you can see, the lines help give sense of movement to the fur. It took a lot of time to work exclusively with lines. The space between lines and the length of every stroke play a big role in it.

Besides lines, I am also comfortable using other mediums, for example watercolor, acrylic, stencil, pencil, pens, collage and more. I’m looking forward to use different mediums next time.”

Shaza Hakim

• 

  I’m not looking to don my heavy design-thinking cap this week. Instead, I want to share what transpired from a casual chat with a good friend.

Sometimes we forget that people around us doesn’t know the difference between Arial and Helvetica or the deep hatred towards Comic Sans. We tend to think that just because we design things and spend hours perfecting every curve, people will use them. This exclusivity can make designers appear as an elitist, out-of-reach crowd.

I am guilty of this perspective sometimes and I want to correct it. In the process, I found that it’s actually fun and enlightening to listen to how everyday people react to design.

The Case in Point

I have a Swiss Helvetica moleskine pocket notebook that I carry in my handbag. I like to pen down thoughts and prepare my to-dos for the day over breakfast. The Moleskine looks like this:

Lately I’ve been enjoying the busyness of being among people at my third place, Starbucks cafe at Cenang Mall. My friend Rady Razak, who is also the store manager, saw my notebook and asked…

Is that an ambulance notebook?

He is actually correct. As a designer, I immediately associate the white cross on red with Swiss flag and the Swiss style design movement made popular in the 50s.

Newsflash for me: the public doesn’t necessarily know that.

If this was web design, I have made the cardinal error of designing for my benefit and not the user. I never thought of the cross’s other meanings: medicine, first aid kit, health. As a designer, it is my job to know which emotions or meanings people associate with symbols. To be an efficient designer, I need to be able to disregard my role as one and immerse in the role of my users. I need to be better at doing this.

One platform that I believe both designers and non-designers share is pop culture. Pop culture is conceived by graphic designers but fueled by mass public’s love. Using the cross as a starting point, I wanted to see if there are other universally recognized symbols that, due to is close association with pop culture, will mean the same thing to everyone.

I then used these symbols on the very object that started this observation – my Moleskine notebook. I rebuild the notebook in Photoshop – it amazingly took less time that I thought it would – and then treated the cover with elements from each pop culture subject.

Transformers

Geeks and non-geeks alike know about the Autobots and the Decepticons. I believe Transformers reached its point of saturation through its animated series, and then propelled forward by the success of is franchise. We may not know which robot is which (there were so many of them) or which battle ultimately belong to which faction, but the ubiquitous symbols of good and evil have amazing staying power.

Star Trek

Often believed to be inspired by the NASA logo, the Starfleet’s insignia has seen some evolution over the course of the series. The logo, while changing according to the era a ship is in operation, remains faithful to the asymmetrical, arrowhead-shaped pennants. What interests me is how Starfleet assigns uniform colors depending on divisions. The colors appear to have been subject to more revisions than the logo. I also found an Etsy illustration of Captain’s Log that I couldn’t resist from using as the back cover.

Superman

Of course, Man of Steel is coming out to cinema soon. We all know who Superman is. He is probably the one superhero whose backstory needs no retelling. You know where he comes from, you know the motivation behind his heroic acts. But it truly is the symbol S that made Superman, well, Superman. He may no longer flaunt his wardrobe malfunction, but there is no Superman without the S and the ever-billowing red cape.

I hope you have found the thought process useful. I have learnt that inspiration is always lurking. So go out today and strike a conversation with people who knows little about what you do. I promise, you’ll be surprised.”

Zana Fauzi

• 

  I am a big fan of museums and art events. Art events promotions are usually traditional in our sense – posters with dates and time, announced through websites etc.

I figured this is because mostly art enthusiasts are traditional, Luddite people who generally mingle around their circle. I notice that not many young people are not interested in going to museums and art events. It frustrated me sometimes that my friends see museums and art events as ‘boring’. It would take a whole loads of behaviour change to drag them along with me to museums.

So, I was thinking, how to get these smartphones and tablet-toting millennials to be interested in going to the museums?

Brainstorming & Associations

Over the years we hear about subliminal messages a lot e.g Chekhov’s gun, the famous vase and face illusion and the backmasking technique in music. It has been proven that these subliminal messages can somehow deliver the messages to your subconscious mind effectively.

The other day I also came through this brilliant street ad execution by advertising agency Grey. I also thought of this app called Word Lens where you could hold it over signboards in foreign language and it could translate it for you. If you look at it, QR code might be an old idea but the the concept is worth a revisit.

Solutions

Imagine a new poster advertisement of an upcoming art event. Utilising the concept of QR codes and subliminal message, every poster of the event now only show the art piece with a copy

Do you speak Art Nouveau?

In order for audience to see the real message e.g date and time of the event, they will have to encode it using a smartphone app which works along the same line as Word Lens. They will have to hold it over the poster to see the hidden message. The app icon can be placed at the far right corner of the poster, serving as a minor indicator that there is more than just a poster of a ‘boring’ art piece.

This solution hopes to serve as the first point of discovery to non-art enthusiasts so they could see that art events could also be ‘hip’ and ‘cool’, and not only frequented by old folks.

We could also have two versions of the poster – one targeted for the ready art enthusiasts which go through their traditional mediums – poster, forums etc. but this one is targeted towards
young people.

Again, this is the first step of discovery for the targeted group – the young people. What do you think?”

The post Creative Burst #20 appeared first on Stampede: the strategic design & technology company.

What are the processes involved?

When I was handed the assignment from project stakeholders, one of the first tasks I had to do was to establish goals and direction of this project.

I decided to tackle this by interviewing Iwan for his Royal Langkawi International Regatta (RLIR) updates experience. From the interview, I managed to gather all the information about the race that I needed. Coupled with the experience of doing the RLIR updates myself afterwards, I found that all the information given was very helpful for me.

Before all the process started, I need to understand the concept:

• The more we know what the audience wants, the more we can help them in searching for the information they are looking for.
• Less time for audience to spend looking for this information would result in happy users.

After understanding the concept, I was to locate the target demographics, the devices in use, etc. This was to specify the visible content based on most clicked area, which helps us in turning the website responsive.

From the targeted demographics, we got to establish specific focus areas according to their importance during the race week.

Finally, based on all existing asset (RLIR website artwork), I proceeded to redesign the layout for 3 different sizes of browser- full resolution desktop, tablet size, and mobile size.

My notes and sketch for the RLIR wireframe.

I also did a research on the best practices for handling dropdown navigation for the responsive. I was to understand the difference between desktop tablet and mobile usability. This way, I managed to identify what it takes to help the users interact better with responsive design.

Once all was done, I was to present the solution to team members. I admit they were very merciless during the reviews process, but this is to ensure that our work is always up to the best quality.

Responsive mobile testing on devices

Once the design part was done, I was to hand over the design assets to front end developer (it’s Iwan, in this case) for him to code it. In the meantime, I was also responsible to oversee the deployment process to make sure my design works in sync with Iwan’s code.

The product

The finished product, in all its glory.

You may also browse it here http://www.langkawiregatta.com.

So, what have I learned from this experience?

Seeing as this was my first experience on designing a responsive website, after going through the processes altogether I am now very much prepared for my upcoming responsive projects.

I also learned that even after the design process and the design is handed to the front-end developer, my responsibility does not stop there. It is important for designers to be involved in every phase of the project and I learned this by having the chance to oversee how my responsive design materialised itself into a finished product right before my eyes – and having so many people praising it too!

In conclusion, I enjoyed this project very much and I look forward for more responsive projects to come.

What do you think? We would love to hear your feedback about our work, so do share in the comments section.

The post Towards responsiveness: Part 2 appeared first on Stampede: the strategic design & technology company.

What is responsive design?

Responsive design has allowed designers and developers to create brand consistent websites that not only look incredible through a computer but will respond to the resolution settings on mobile phones and tablets. It is the ideal solution to creating separate sites.

You have one site, with all products and services and this site will respond to the device where it is being viewed through. It also incredibly clever, time saving and well, in a nutshell – a designer’s dream. It also adds a lot of convenience for users on the go, for they don’t have to go to their laptops or desktops to check the websites, instead they can directly check on their smartphones.

Royal Langkawi International Regatta

My first full-fledged responsive design website is for the upcoming Royal Langkawi International Regatta 2013. It is an annual yacht race event held in the scenic island of Langkawi, with 2013 being their 11th year of running.

This year, more than 35 yachts and over 250 sailors from about 12 countries are expected to participate. Currently the Regatta has a different website dedicated for mobile users, and although it is good enough, it is not exactly streamlined to the current main website.

This is where we step in.

Project Stakeholders

The ‘we’ I am talking about here comprised of:

1. Shaza as the design and user experience consultant
2. Zana as the project manager
3. Syazwan as the project owner

Syazwan has been instrumental in every single Regatta project. He is equipped with 4 years experience managing the website as well as being the on-site developer. Over the years, he has developed a familiar understanding of the event and the participants’ browsing behaviour.

Working closely with them, I am entrusted to update the design for the Regatta’s responsive website.

The project

To enable seamless viewing in all devices, our job is to take the existing design and extend it into a responsive website. Apart from that, we must take into account that it should enable pulling updates from a source throughout the race.

To add up more to the challenge, we are to launch the website two weeks before the race day starts on 7 January 2013, which means – very soon!

Why responsive?

With mobile traffic now accounting for around 12.5% (and rising) of all website visitors it’s high time we must start putting effective mobile design at the top of our to-do list. If we fail to do so, be prepared to be missing out on a huge sector of the market. (Source)

In the case of the Regatta, the participants rely heavily on their mobile devices to check results, race highlights and to log race disputes as they are always on the go on the days of the events. It saves time because they will not have to go do all these on their laptops or desktops.

Turning responsive will also improve the process of updating results and news on our end.

(Coming up – Towards responsiveness: Part 2)

The post Towards responsiveness: Part 1 appeared first on Stampede: the strategic design & technology company.

These are the few things I’ve learned so far:

1. White Space

White Space in Web Design

White space is the spaces around elements in the design to help them stand out or separate from the other elements. Without it, designers will stumble when establishing content hierarchy. A simple example is using white space to distinguish the relation between header and body content, and body content with the next header. White space is therefore very useful in grouping information into clusters and make for easier website reading.

Legibility (micro level)

White space at the micro level (leading, kerning, and tracking) can help improve or destroy the legibility of a Web page. This controls readibility of the text. If a web text is easier to read, the probability of user digesting the information is higher.

Tone (macro level)

White space at the macro level (spacing around the biggest objects on the page) can convey a sense of elegance or down-market quality to a design. We also use white space to naturally control user’s eye-movement and lead them from one information cluster to the other.

2. Drop shadows & Gradient

Drop-shadows and gradients are two of the most common design elements on the web. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

When using drop shadow, always remember – “The subtler, the better”.

What Do Drop-Shadows and Gradients Do?

The illusion of space connects the imaginary to a world we are comfortable living in. Visual metaphors create perceived affordance. Drop-shadows and gradients are basic tools for creating the illusion of space. By mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.

3. Masking layer

A mask is an entity which controls the behavior of a collection of pixels. Generally speaking, this control centers around the relative transparency, or opacity of a given layer or collection of layers. When combined with Photoshop’s ability to stack different layers, masks become an incredibly powerful tool, which helps give designer or digital artist with extremely precise control over the interaction between the different layers.

The Clipping Mask

Clipping mask functions more as a one-to-many type entity, in that it can actually effect multiple layers at the same time. A clipping mask is also, by its very nature, multi-purposed. While a Layer Mask exists as a modification to a layer, a clipping mask actually is a layer, which interacts with one or more of the layers directly above it.

4. Usability

Usability is making your website easy for your visitors to find the information they need, when they need it. It’s a huge ground for discussion but among the things that I’ve learned is to always include a tag for the most obvious element on a web page. Implement a 27 characters wide site search and place it on top of your website. Don’t use extensive graphics and design elements. Include a site map page and register a sitemap XML document in search engines.

Don’t break a user’s workflow. Allow every action to be canceled if necessary. Create easily scannable web content and place the most important information on top of your web page. Don’t design graphic elements that looks like a button, but is not. Present meaningful feedback and don’t forget that feedback works both ways. Use unobtrusive Javascript and graceful degradation. Avoid CAPTCHAs, use more usable methods instead.

5. Typography

I tested a variety of different fonts and sizes, and also the text leading to identify the fonts, sizes and text leading that provide best legibility and viewer readibility when designing websites.. In the process, I have come to understand the difference between font rendering in Photoshop and browsers. I also found it important that every font I use match the right tone to the design themes.

Here is the screenshot of the end result – thanks Shen for the awesome session!

6. Responsive Web Design vs. Mobile Website

Responsive Web Design

Responsive websites “respond” to their environment. It adapts to the browser screen sizes from full-view desktop, tablet and even mobile viewing seamlessly that none of the contents are missing of misbehave.

Why responsive?

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.
– Jeffrey Veen

Mobile Site

Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your business connect with customers and increase sales, but a bad mobile experience can drive your customers to your competition.

Why Mobile?

As time passes, mobile has become one of the largest medium for users to go online. Users expect their mobile experience to be as good as their desktop experience. A bad mobile experience can cost you customers. Mobile users also tend to connect with the businesses in their local area so businesses like yours can drive purchases with a mobile-friendly site.

Responsive Web Design vs. Mobile Site

Things to consider before choosing between Responsive Website or Mobile Website.

All thoughts welcomed!

As you can see, these are all new and exciting stuffs to me. I appreciate everyone’s comments, ideas, corrections and notes. I will also be sharing more web design tips and things I learn along the way at Stampede – so stay tuned. Woohoo!!

Main photo credit: Hellvetica by Rachel Katstaller

The post Things I’ve Learned So Far appeared first on Stampede: the strategic design & technology company.

Behind every successful project there is a set of really awesome people.

A McDonald’s cook follow a set of detailed instructions whilst Jamie just pinches in a bit of salt and throws in a little bit of rosemary – within his workspace is a flurry of willy-nilly ingredients tossed aside. In the end we all would come to an agreement that Jamie’s cooking tastes a lot better and much healthier than the stuffs cooked over at McDonald’s.

The same goes to running a project – if you have bad cooks no matter how good and detailed your recipes are the dishes are probably going down the drain (no pun intended).

This is why good people matter in a company – and how we showcase them to the world do too. These people need their credits and some good representation of who they are and how they look like. This is where team pages play a role. It would also give our clients an idea of how we look like (so that they can get to know us as well as not to scare them off!).

Without further ado, here I present my list of my favorite Meet the Team pages.

#1 – Caxiamgroup.com

Caxiamgroup is a web design and development company located in Orlando, Florida. They have a carefully assembled team of strategists, designers, developers, programmers & marketers. Check out their Meet the Team page.

There is an attractive use of slider at the top of the page showing their team members categorized based on the transition from Creative to Technical team.

Everyone in the team is shown in three different poses as a way to show them that they are more than what they do at Caxiamgroup – for example Brian here, aside from a User Experience Designer, he is also a sweet family guy.

Everyone gets to describe themselves in a set of keywords under their profile picture(s).

… along with some extra bits of random information accompanying their profile.

#2- Nordkapp.fi

Nordkapp is a group of experienced designers, strategists and technologists from Helsinki, Finland. Even the homepage looks stunningly smart already.

Click on any of the link on top and you will be directed to the page using our favorite parallax scrolling effect.

The secret also lies in such strong copy to describe their team.

The profile info is laid out so simple yet packs a punch. Not to mention (again), nice photographs too.

#3- In2media.com

In2media is a digital agency hailing all the way from Copenhagen, Denmark. Established in 1994, the agency produces campaigns, corporate sites, brand channels, rich media sites, applications, and transaction sites as part of their solutions to strengthen the relations between clients and users.

In general, click over any of those links and you will see that they have employed some cool CSS3 animations. The same goes when you hover the images, details and sliders in their Meet The Team section.

These are just probably some of the Meet the Team pages that caught my eye, so if you have some other suggestions, feel free to drop them in the comments section.

(P/s: Check out our Meet the Team page!)

The post Showcase: Meet the Team pages appeared first on Stampede: the strategic design & technology company.

I’m not a classically-trained designer, so from the day I naively decided to be one, I rely primarily on observation and the readiness to stumble really badly and then gain a hopefully steadier footing. As a result, I rarely need to visit web design galleries prior to a design work. It’s good because all the snapshots I’ve kept steers me away from directly copying another designer’s work. It also brings about passive inspiration – the type that burns in your brain for quite a while before you find some good use for it. I’m happy to report that I have six years’ worth of this happy design baggage.

Here is a collection of a few design and UI work I did at Stampede for May 2011. Instead of a full shot, I’ve chosen bits and pieces that matters to me when observing another web designer at work.

In a way, this is a monthly design journal, but I do hope anyone who shares the same peculiarities as mine would find these useful for their very own visual musings.

The post Design Journal appeared first on Stampede: the strategic design & technology company.