четверг, 26 ноября 2015 г.

Invent the Future

Credit: FOWD
Co-authored by Crystal Theresa Ejanda
"It doesn't matter how amazing the steak is, if it's served on a cold plate, it's crap. If it's served with a dull knife, it's crap. If the gravy isn't piping hot, it's crap. If you're eating it on an uncomfortable chair, it's crap. If it's served by an ugly waiter who just came in from a cigarette break, it's crap. Because I care about the steak, I have to care about everything around it." 
-- Chef Gordon Ramsay
Keep your customers at the forefront and advocate for them. Pay attention to how they are using your product and their wants and needs. Strive to make your product usable and accessible for as many people as possible, including those with disabilities and who use assistive devices.
Know your goals and define the criteria for success before asking questions. Encourage and actively solicit feedback. Use both quantitative and qualitative data, and know that the most measurable data isn't always the most valuable. Find the most useful information and come up with actionable insights that will serve your customer. This, in turn, will help you make the best improvements and make the most impact.
Think about the culture and practice of your work and be intentional in carrying this through. Document and maintain your principles, practices, and guidelines. Have a single source of truth. Use an iterative approach when executing your work plan to allow for discovery and flexibility. Find the tools and that will best keep you in your creative flow, rather than using those that will impede it.
Consider making this a part of your normal workflow. Don't overthink it and talk yourself out of trying new things. Figure out what will make the biggest impact with the smallest amount of work.
Focus on engagement and on how customers interact with your product. This is how you build relationships with your brand and product and foster retention. When conceptualizing ideas and determining features, map out the customer's goals and problems and how your product provides both the solution and added value. Think about how your presentation/layout serves your content. Keep both beauty and functionality in mind. You should not only help people do what they need to do, you should also strive to bring them joy in the experience.

Over three days in October, we had the pleasure to attend Future Insight's The Future of Web Design conference in San Francisco and immerse ourselves in the world of web designers and developers to learn the best principles of design thinking.
We learned how companies like Tesla and Slack nail the small details and how changing a button increased a company's bottom line by $300 million. We heard quotes by legendary American designer Charles Eames, who once espoused, that, "the details are not the details. They make the design." "Functionality doesn't need to sacrifice beauty," we heard. Shift the need to do something to a want to do something, said Jon Setzen, a designer from Los Angeles.
Credit: Yareb Rojas
The lessons we learned can be applied not only to web design, but any occupation and field. As long as you serve customers, users, or clients and have a product or service. We have distilled the five key insights from the conference.
By valuing your customers and practicing empathy, you will learn what they need and want. Use these insights to make informed decisions, and execute them through an intentional and established process that allows opportunity for innovation. Keep this high-level goal in mind: to encourage and create meaningful behaviors and experiences for your customers that meet their needs and their desires.
This piece was co-authored by Crystal Theresa Ejanda and Patrick Daniel. Ejanda is a writer and web professional and works at the University of San Francisco, where she received her degree in English.

(Writen by

In our blog we publish not only our articles, but also an articles of those writers who, we believe, have to be interesting and for our readers

понедельник, 26 октября 2015 г.

Web wonders- Career in Website designing


The internet is here to stay and so are websites! Think of a career in website design if you have an artistic bent of mind

Sector overview

An online presence has become extremely essential for any business today; in fact it has become important for anyone! Get online and you will see that there are websites for organisations, NGOs, institutes, stores, services provided and even for people – celebrities and otherwise. During the last few years, web design and website design has become really big, since most organisations have realised the value of creating a website to attract as many visitors as possible.
In fact, even with the do-it-yourself websites, the design templates are created by experts who are well trained in the field. The future seems brighter than ever, since the internet us the way to go. Everyone is trying to make their presence felt in the virtual world. With new technological advancements like 3D or 4D technology and other breakthroughs, the web has become an experience in itself.
The internet plays an important part in people’s lives in today’s day and age. It can be a teacher for new things, it can be an advisor when a person is stuck and it can be a knowledge provider when needed. It can act as a business accelerator and catalyst or also as a friend. It all depends on the user’s need and mood. For this information to be available to the public at large, however, someone needs to put it up as well. And for that, again, a website is needed.
Each website ends up being a different virtual world with its own rules. The web development industry grew at a high rate in the last couple of years (around 25%) and it is expected to grow even faster in the next few years. The ease of creating a website has facilitated many web presences, which have also been fuelled by reduced costs of developing and maintaining a website.

To get there

A website serves many purposes, and many people go into creating a website. It is of course design oriented, but other things also need to be taken into consideration. Some of the aspects that designers need to think about are – ease of navigation and user interface. The former refers to the process when the visitor comes to your website and he can go around the website very easily, not having to waste time at all in looking for what he wants. User interface is also a similar approach, where the designer needs to think of how a visitor will interact with a website and what the guiding factors will be. There are several functionalities like the layout of the website and its pages, the colour scheme, and the balance of the elements. So you need to have one aspect clear – it is not only about beautifying the page.
Although there are no fixed requirements to enter this profession, knowledge always helps. There are several private computer institutes which offer courses in design and web layout. With gaining so much importance, there is also a need for an aspirant to understand the elements of design and colour. So, even if you have a design qualification, you may do well in this field, but you will be required to build a few software operation skills pertaining to design. It would be advisable to opt for an education in the field before entering it, since it will ground you in the basics, and without the basics you will find yourself lost on the job.
Look at all the options you have when you want to take up a course in web design, and then compare and contrast all of them to arrive at your decision so as to which one to opt for.

Market and remuneration

This is a field where the sky is the limit. The work is not confined to any one element, but several functionalities and responsibilities. The designations in the field also vary accordingly. A typical design team will have one or two senior designers and a handful of junior designers. The tasks are divided and deadlines are given out. Even though designers work individual in different aspects, they need to realise that at the end, the work has to come together to form the same final product. A junior level designer will hold fewer and less difficult responsibilities, and these will improve with hierarchy. After a few years of experience, a web designer can be a main designer on a project who handles different decisions. He can also dabble in custom projects.
Openings exist in web development companies and design companies. One should keep an open mind, since often; different elements of a website are designed by different people. It may so happen that separate openings might come up for the design aspects and the other aspects. These creative openings can also be found in advertising agencies and design firms.
The work is extremely challenging and diverse, since every project is different and you need to be on top of your game to consistently offer good design solutions to various clients. That is what makes this a satisfying and interesting work profile. Today you could be working for a website for an institution and a week later for a restaurant. Perhaps a little later may be a laundry or a plant nursery! Who knows! Payment in this industry varies. There can be annual salary ranges, payment for a particular job, or even payment on an hourly basis. With a good qualifications and a strong portfolio, one can command at least Rs. 18,000 to Rs. 25,000 per month at the beginning.

A student says

Yesha Kurunde / Pursuing her course  
When studying in this course, I was afraid that I might not be able to bring my artistic talent within the framework of a computer, but my instructor helped me a lot to overcome this notion. I am a good painter, but I had a mental block towards drawing on the computer. With the practical design element, I am now able to do well. Another aspect I want to stress on is that a student aspirant needs to constantly work on various projects to build a good portfolio. A portfolio is the only way in which one can show his work. Understand that for a design job, no one asks an aspirant to undergo a test like journalism or software companies might ask. As a designer, it is your duty to explore your fullest potential and show that to the interviewers, so that they know what kind of work you are capable of. Students have to find the time to build a portfolio along with pursuing the course. The portfolio will reflect your growth as a designer.
During our course discussions, we also learn that designers ought to genuinely listen to the clients and their needs and provide design solutions accordingly. In that respect, conflicts can arise between the designer and the client in terms of certain elements, in which case the designer needs to gracefully accept the changes suggested and not enter into an argument.

An aspirant asks

Sameer Gaitonde , HSC student
I am a good artist and I want to pursue a design course in J. J. School of Art after my class 12 exams. I do, however feel that I need to be up-to-date on my computer skills as well, so along with my formal education, I want to take up a course in a computer institute. My parents are worried of the investment and are asking me to do only one course at a time. Please advise.
Our professional answers: First, I feel glad that you already know what you want to do in future and that your parents are already on board with the idea of you taking up a design course. Your conflict is legitimate, but do not worry, it is nothing that cannot be sorted. You design course will be three years in duration, so I would advise you to focus only on that in the first year. By the end of the first year, you will know what you have achieved, and what to expect in the next two years. You will also know the kind of time commitment you need for your design course. Perhaps, computer aided design will be a part of your curriculum at the school, and you may not need an additional computer-related course. That’s why, I suggest you wait a year and then decide what you need to do ahead. On another note, I agree with your parents, since art is a course which needs a good amount of investment, even for the materials.

(Writen by
Free Press Journal

In our blog we publish not only our articles, but also an articles of those writers who, we believe, have to be interesting and for our readers

вторник, 22 сентября 2015 г.

Turning a Web Design Class Into a Small Business

Two years ago, Mark Suter, a computer tech teacher at Pandora-Gilboa High School (OH), invited his high school students to start an entrepreneurial tech club that would provide Web design, video production and staff training to community businesses and nonprofit organizations. That club, Rockettech, has exceeded even Suter’s expectations, grossing more than $14,000 in donations for its work — money that is reinvested into the club.
My Top 3 Tools for Finding the Best Tools
Tweetchats: Join a tweetchat and ask attendees for help finding what you're looking for. For the uninitiated, a tweetchat feels just like a chat room from the 90s when you use a tool likenurph.com or tweetchat.com. Join in a conversation and contribute; you don't need to be an expert! Find a topic and chat times here.
Freetech4teachersRichard Byrne does a great job of testing out new tools and writing summaries. He also responds to questions from readers about the tools, so this is a great resource on many levels.
Larry Ferlazzo's “Best of” Series: Larry creates lists of tools, sorted by subject and usage scenario — not just math, science, and English ones. There’s foreign language (he’s an ESL teacher), art, music, economics and more.

THE Journal: How did you come up with the Rockettech idea?

Mark Suter: I grew up in a small-business environment. My family has a produce business that encourages trying new things to differentiate itself from the supermarkets. Once I started teaching, I realized that my students are really sharp, with the energy and creativity to be entrepreneurial, and they’re already learning the skills in Web design, video production and programming. So why not let them test their skills in the real world and see if we can treat this classroom like a small business?

THE Journal: What has the experience been like?

Suter: Messy, and I like it that way. Standardized tests tend to be very clear-cut for students. My class is a little more like they’ll experience once they take a job somewhere, where if you’re going to be trying to innovate and grow, it’s going to be messy. I make myself vulnerable to try to model the idea that it’s okay to fail and make mistakes, because that’s how you learn.

THE Journal: Did you expect Rockettech to fail?

Suter: Yes. My thinking was that these are kids whose experience so far has been to study for the test, take the test, then move on to the next class. What’s going to happen when I stick them in front of a client who is dependent on them to do a good job or it will reflect poorly on the business?

THE Journal: Why has it succeeded?

Suter: When the kids come into class, it doesn’t smell like school to them anymore. They’re thinking in an innovative way and we have a mutual trust. I trust that if I give them something, they’re going to do everything they can to succeed. And they know that if they screw up, I’m not going to be angry with them if they’re doing all they can to be successful; I’m going to show them where they made their mistake and they’re going to try again.

THE Journal: What’s an example of a client your students have taken on? 

Suter: This past year, the Allen County Economic Development Group entrusted us with making the website that potential companies use to see if they’re going to set up their business in our county. So there is some actual economic impact from the work that the Rockettech kids are doing. We talk about the fact that this isn’t a simulation; you’re affecting real businesses. We’ve done work for churches, several healthcare clients, the power company … a wide range of private and public sector clients.

THE Journal: What kinds of jobs, typically?

Suter: Web design and video production are the two main things. Our business model with the websites is we create it in a content management system, then we tell the company up front that we’re going to train you in how to run your website, whether through personal meetings or customized video tutorials, because we’re not in the business of keeping up websites. We can’t be, because my employees keep graduating. So we set up the hosting, design the website, then train as many people as they’d like at that company on how to maintain it. And we have a donation pledge that serves as our contract, which the students also negotiate. 

THE Journal: You ask for donations?

Suter: It’s kind of a professional understanding. On the donation pledge form it says, if we perform these services for you in this time frame, do you agree to donate x amount of dollars? We have milestones laid out, a timeline established, and then when the product is complete we have a meeting with the client and we ask how they feel about the service: Was it professionally done, was the communication professional, and if so, are you willing to donate the original amount we agreed to? If not, what can we do to improve or fix it? We haven’t had anybody yet who didn’t donate in the end because they didn’t like the service. They always have given us a chance to improve it until it is right. And the businesses really enjoy working with the kids. They understand that things might not be perfect on the first run, but they also know that in the end they’re going to be happy with what we deliver.

THE Journal: Why should other schools consider doing something similar?

Suter: I think there is a great opportunity right now for schools to add a real-world component to computer science and STEM classes. The lesson to be learned from what we have done is that yes, when you try something new and messy it’s going to flop sometimes, but when it is successful, it’s unbelievably satisfying not just for the student but for the teacher. I get to see these kids light up at the knowledge that they have created something that has worth to other people, other than just something that their parents put on the fridge.

(Writen by
Dan Gordon)      

In our blog we publish not only our articles, but also an articles of those writers who, we believe, have to be interesting and for our readers

четверг, 17 сентября 2015 г.

8 Website Design Trends You Must Learn for the Future

Richie Contartesi is the owner of www.AnabolicTechnology.com and 3 online startups. He is an online enthusiast with experience consulting business owners and other entrepreneurs on building a revenue generating online presence for businesses yielding a maximum return on time and investment....

Do you need a new website? It’s a proven fact: the more attractive your website or logo is, the more impact it has. You probably choose your graphics for a specific impact, planning and discussing your promotional materials for months in advance.
While you’re doing that, you need to realize that even though some design paradigms never go away, trends do change. What worked five years ago may not necessarily have the same impact on customers today, so you need to adapt to the times. With that in mind, here are eight WordPress design trends that are all the rage for the future.

1. Semi-flat design principles

Flat design exploded in late 2013 and early 2014, led by Microsoft and Apple. That quickly morphed into a flat-ish design combining real world enhancements with flat elements, like you see in Google’s Material design. We should see even more of that in the future.

2. Better fonts and other typography concepts

Google’s Web Fonts, as well as Adobe’s Typekit web fonts, have allowed web designers to incorporate better typography into their pages. Making a stronger statement, using better visual hierarchy, and utilizing more unique fonts should become the standard rather than the exception to the rule.

3. Rich content storytelling

The web allows us to create visual experiences that evoke emotion within long form articles and content, and the big media players have finally woke up and realized the potential. The New York Times started it all in 2012 with Snowfall, and the idea has grown since then. Storytelling has become more convergent, intimate, and visual, and that trend should continue.

4. Big, bold, and beautiful images

Last year, high quality images made a big splash in logo and web design. With the proliferation of free unique stock image sites and faster broadband speeds, we saw higher quality images and that really captured people’s attention. Humans love big, beautiful images, so we expect to see more of that in future designs.

5. Hand-drawn imagery and illustrations

Small illustrations have popped up through the years, but larger hand-drawn imagery is still to come. With strong fonts, pleasing colors, and large images becoming standard, designers will look to differentiate themselves. One way they can accomplish that will be using unique hand-drawn illustrations. It’s hard work, but it will pay off by making the websites really stand out.

6. Dr. Seuss’s magical realism

Magic Leap caught our attention and imagination with just a few photo mockups and great news coverage. Thanks to the ready availability of the technology to make it happen, along with a sense of wonder and the dreams of Dr. Seuss and others, imagination can become real in design. Look for even more magic to show up in designs of the future.

7. Cinemagraphic wonders

If designers really want to stand out, they’ll have to go a step beyond pure video or images, and delve into something that is more difficult to make but more capable of interactive storytelling. Cinemagraphs, the new, classier version of animated GIFs, will prove to be much more unique than anything else video or stock photos have to offer.

8. Background video

With broadband speeds getting increasingly faster, it’s becoming more realistic to expect video footage to appear when you first load a page. Background videos will explode onto more web pages, since the rich experience of video truly shows the soul of a company. Subtle, ambient, ethereal videos that don’t get in the way of the content will become more prevalent.


Did this article help you understand about design trends? If not, please ask your questions in the comments below. If so, share with a business owner or entrepreneur you believe can benefit!

(Writen by
 Richie Contartesi)      

In our blog we publish not only our articles, but also an articles of those writers who, we believe, have to be interesting and for our readers

вторник, 25 августа 2015 г.

How could surprise a modern web, or better snippets for CSS

The second part 

Dear readers, today we continue to acquaint you with mutual interests snippets thanks to which you can do amazing things with markup CSS3.

Customized checkboxes

Recently, mobile templates of user-interface design, gained big popularity in the field of web design. In the list of "usefulness" of this miniature snippet, created by Brad Bodine,  you will find customized sliders and checkboxes.
Switches and sliders are created by using normal HTML input fields with the CSS configuration. Designers over the years awaited the appearance of dynamic input fields, and most recently, browser vendors have created products that support CSS3 as the configuration method.

Wonderful progress bar with animation

This animated progress bar was also created by Thibault Korable solely on the basis of CSS-code. Let the new CSS3 specification does not allowed to "turn around"  in improving animation, interactive progress bar with clickable step still looks very unusual. It is perfect to any standard layout for e Commerce, and will improve in looks with the  registration mechanism, if the process takes only a few pages.

Stunning Solar System on the Web

At the first look at this animated solar system, hard to believe one's eyes. Every Malik Dellidj founded one of the icons, representing the world, based on clean code CSS. At the same time, was saved the speeds ratio of planetary movement in their orbits. As a result, in front of us a fully CSS-scaled model of the solar system, from which is truly breathtaking!

Full screen slider carousel: do without Java-Script.

Earlier for any carousel images or photo gallery was used Java-script. As a rule,  uncomfortable to control an event by clicking on CSS3, but at the same time selected radio buttons allow to make a choice of only one item at a time. It gives an opportunity designers to create a rotating carousel with animated effects exclusively on CSS. Enough to look at this unusual slider carousel from Kohei Shingai.

Status Icons: Alternative PNG and JPEG

Most of the websites are still using traditional PNG / JPEG images for the icons. Files with the SVG extension are gaining popularity due to the possibilities of vector graphics, but do not forget about the icons, which are basis on the clean CSS code and created by Matt Shueri. At the very least striking that each one of these icons of the state was solely on CSS.  If taking a separate form for each icon, you should know how to create the others with a minimum of code.
Calendar Widget: basic interactive on pure CSS
This widget created by means of hover-effects and creative approach into the icons design.  Calendar interface is meets rarely in the web design and requires careful attention to detail. In this case, hover-effects look great, and all details of the interface look very organically, together presenting a perfect working ensemble. This calendar, created by Yussuf using pure CSS, is not а fully interactive, but it is quite possible to do so if to work well.

Scalable button with a link: it is possible now!

10-15 years ago, icons tags have been very popular for the clouds and tag list in blogs. Earlier, similar items are displayed only due to background images, but now with the CSS, you can create scalable buttons with links to any type of "heel." This snippet developed by Fernando Pasika uses SCSS, but if necessary, it may be compiled and edited as a normal CSS.

Unfolding stack of photos: animation details

At first glance it seems that this is a typical CSS3-animation created by the help hover-effects, but if you look closer, you start to understand that every picture is animated. For creating the perspective illusion and depth of the author Miro Karilahti used CSS3-conversion. From HTML also it was taken just separate <div> container with anchor links around each photo.

Unusual notebook with tag <Blockquote>

This amusing snippet authored by Thibaut merchant ships, has been created by using the CSS Flow. Papers sheet background can have different types of boundaries, shadows and gradient effects, assembled in one tag <div>. A lower page  is turned a little, relative to the top that creates the illusion of depth.

Animated Factory: The Chase on the conveyer belt

If to talk about CSS-animation, then the graphics of this factory is phenomenal. Before you fall into a hole, the boxes are moving on conveyor belts by the endless line,    fitting by the interesting transforming way of CSS3. An animation of the mysterious green substance in the balloon, the author Noel Delgado implemented using class .magic. Guided by these same principles, it is possible to "revive" the icons or user's graphic for your own web projects.

And finally, we will tell you ...

Each of these snippets is a good example of the development of CSS-design. In a short period of time, front-end development, has changed a lot - of course, into the better way. Must agree, it is very interesting to see what the CSS will open us in the years to come!

среда, 19 августа 2015 г.

How could surprise a modern web, or better snippets for CSS

The first part 

In the web developer's arsenal there is always a place for the latest techniques of creating website. CSS3 markup language with an arsenal of new features, which have supported by the modern web browsers, has become a major turning point in the world of web interfaces.  While the modern web technologies are improving day by day, enthusiastic about their work, taking a great interest in their work, "creatives" have poured effort to work out the implementation of exciting ideas, which only a short while ago seemed unthinkable.

We have collected the best free snippets, which are ideal for those who want to go into detail of advanced CSS-techniques. Every piece of code uses the CSS, to create new opportunities, dilative boundaries of modern web design. Boldly copy any of these code pieces, to use it in your work, or try to create its own work, using provided materials as a guide.

The unusual Accordion-menu with smooth animation

Usually accordion-menu related to an onclick event in Javascript. But now, to create the already hidden behind of radio buttons menu-harmonica easier than ever. It can be implemented on a CSS using pseudo-class: checked - as, for example, in this snippet, created by Joey Anz. For the accordion menu animation was used smooth transformation.

Three-dimensional icon-loader in the ring form

Pure CSS loaders have become extremely popular in recent times, having won a whole army of fans. All we are familiar with the standard design, created on the basis of base objects or vector images SVG. But this is a unique downloads icon because it has a perspective - ring is located under an inclination with reference to the viewer. To obtain that effect has been used property of prospects along with some dynamic effects animation in CSS.

Toothed banner: and all began from training

Web developers do not get tired to be surprised by the fact that many ideas can be implemented in a web browser now, although most recently that was merely impossible without the graphics editor such as Adobe Photoshop. Banners with serrated edge creates an interesting effect, breaking the page composition with such elements as STA-buttons and headers. Actually these jagged banners by Terry Mun, have been developed as an example of the lesson for front-end developers, which one is explain the whole process creating code snippets from the beginning to the end.

Animated pop-up with different data

While a huge pop interface seems steep Fitch added CSS3 animation effects, implemented by Jamie Coulter, emerged that it even tastier. Histogram and graphs of data are allocated during pointing at them with the mouse.

Interesting logo for YouTube

With the advent of CSS3 specification creation of dynamic logos has considerably changed and doesn't make any problems now . This YouTube logo, the authorship of which belongs to Leon Taveras, was designed with the use gradient background and text shadows. All gathered inside of the <H1> tag with the use of two <span> for separation of text blocks .

Stellar Parallax on clean CSS3

Constant motion parallax and design, generally refers to the JQuery world. Although this statement is true, therefore, it would be possible to create a parallax on clean CSS3. In this snippets background,  which developed Saransh Singh,  separating by box-shadow effects and gradients in combination with the CSS3 animation.

Animated text: gorgeous and uncontrollable

In the large heads and interleaved layers of parallax this trick always used. The moving text will attract attention and let you to share of your message with the other visitors in unusual form. In this snippet, the authorship of which belongs to Kurt Shlattseru, Java-script is not used, and text animation can be controlled by CSS. At the same time, despite the stunning effect, it is difficult to control the action because of restrictions in the CSS to the actions with DOM-elements.

Stitched Edge Effect: almost like in Photoshop

For the background images are often used effect laid on the edge of the line. Due to the background of the CSS3 gradients is possible to achieve by using of vector shapes directly in the browser by means of this lovely snippet from Mitch Granger. Let's be honest, the most plausible line effect is quite real to create in Photoshop or Illustrator. But the fact of that it is possible in CSS, shows how far we have come in point of web standards.

Interactive NES: the good old retro CSS

Although this "retro blast from the past" can not be realized on the typical site, but this snippet still to be a wonderful creation snippet. NES is not only scalable element and exclusively created for the good old CSS, but it also has a fully interactive properties. This snippet, which has been developed by One Div, consists of more than 600 lines of CSS code. Taking into account modern possibilities, it will be interesting to see what can be achieved in decade. 

Cute animated SVG icons

Scalable Vector Graphics - the perfect companion for CSS-animation. Not based on pixels, but on mathematical formulas, such elements can be easily scaled. This lamp, created by Subendu Gosh, was animated of using the CSS3. Note that the SVG massive enough, but at the same time, the snippet can be a useful learning tool for developers who are beginning to work with the animation of SVG / CSS.

(Writen by
Aleksandr Polukord)