I returned to the office seat of the company as usual, holding in my right hand the super breakfast I bought for 6 yuan from McDonald’s downstairs, pressing the switch of the mainframe computer under the table with my left hand, and then eating the hamburger with double crust and ham, slowly waiting for the computer to start up. A few moments later, I was too drunk to swallow my breakfast value when my desktop clicked open and my mailbox started up to receive my latest email. With a mouthful of hot soy milk in my mouth, I slowly shifted my gaze to the work email I was receiving. Thrum ~ an event design request for H5 pops up, I need to design a promotional page for “Grab the Ultimate October Gift” these two days.


A start to see the activity demand deadline, in fact I was rejected, the 2 days to design a cool Fried day page, feel the time is not enough, but as a professional design resin, I think I still should carefully look at the demand, and then determine how to quarrel with the demand side ~ di di di, double-click to open the interactive ▼ draft file



There are all interactive illustrations of this publicity page in the demand draft. The whole activity can be divided into three parts, the first part is the head picture, the second part is click to buy the gift package, and the third part is buying Q coins to recharge.




Blink your eyes, touch your chin and meditate for a few seconds. It’s not that hard. It should be done! At this time I have a specific look at the first picture and text case: grab October ultimate gift, 1 yuan unlock 30 words!! Recharge maximum rebate 70% oh ~ Oh, huh, scare? I thought for a few minutes, this is a text to picture creation!!



Fulmore V: Look at these two paragraphs first, I want to extract the picture words with the feeling of movement and beating first! For example: Word grab! But also refine the most attractive user screen words: gift!!


From this I can think of the following picture! Dense crowd, in the crowded grab a gift picture both visual sense ~


The general picture impression has, then how to start the draft? Here we need to consider the analysis of picture elements and what is the tone! ?


Picture pig feet need not say more, its own brand image penguin niang + small sunspot! The key word here is October. October tends to continue the National Day feeling, so I choose red and yellow as the main color here. (Ok, I’m just blind, because I like the color combination, hahaha ~)



Analysis to here the basic idea is more clear can begin to draw, the head of the draft! The following figure ▼



When drawing the draft, we should consider the extensibility of this picture and the specific use of it. In addition to the DESIGN of H5 activity (750-1334), we should also use this picture in the flash screen (IP6, IP7, 7p, IP8, 8P, IPx, Android…..). Various banner positions and so on, so in the draft time to consider these issues, try to use a large size to draw, and try to layer!! OJBK (generally I am a new canvas A4 resolution 300 to draw, see personal habits! There is no limit), otherwise you will find all kinds of problems when you do extension design! It’s freaking out. No, no, no! So remember to remember!


The draft is almost ready, and it is time to complete the interaction design of the second and third parts ~ the details are as follows




It took less than half a day to get to this point. (For the quick draft part, the faster the better, the shorter the trial and error time, the more time you have to work on design details later!) The basic design prototype has come out, this time do not blindly down oh! It is necessary to communicate with the demander to confirm that there is no problem with this draft design, or it does not meet the demand purpose of the demander. Otherwise, you will communicate with the demander after completing more than half of it. If you are wrong, redo it! But it’s a waste of time!! Shut up! Are tears ~


At this point, AFTER repeated communication with the demander, she said: totally ojbk! No problem (perfect visual sense). At this moment, I silently returned to the design of the corpse, crossed my legs, looked up at a 45 degree Angle, the corners of my mouth smiled slightly, thinking (I am a genius!) , eh? Tick tock tock tock ~ time is running out, quickly refine the design!


Design process



Complete design exhibition




Summarize some core points of activity design ▼


01. Analyze and understand the copy and come up with the corresponding picture! (The picture is not on the copy, will be embarrassed! No 1+1>2 effect


02 the whole activity thinking logic to straighten out, not blindly immediately to find a reference!


03. Understand the design requirements and communicate with the demander immediately if there is any problem! Not every demand draft is well thought out! Do you know! So there are problems as far as possible to solve the communication, you can pit, stifle before the start of the design!


04. We must quickly make a draft and confirm with the demander, and then continue to do !!!! Or you’ll be sorry!


05 activity button popup window and so on, can make a UI kit for reconstruction developers, convenient follow-up work!


After obtaining demand from, after 24 hours, 48 seconds, I continued to back to the resin station design, on the right hand holding the value of McDonald’s 6 yuan to buy breakfast downstairs, left hand instantaneous press host computer switch under the table, and then eating double foreskin interspersed with ham hamburger, slowly waiting for the computer start. Aye? How come the picture is so familiar, as if the scene happened ~ what did I do? Where am I? Who am I?